Using Spotfire Controls as JavaScript Objects

Let’s say that you are building an advanced workflow. You may need to take advantage of the text area’s capabilities to incorporate jQuery, CSS, and other responsive elements to design your interactive areas. I want to enumerate some of the techniques that I’ve used in the Blackjack template on Exchange.ai as a suggestion for best practices.

Pack all your SpotfireControls at the top

Action Controls, Property Controls, and Dynamic Items are all embedded into the ‘Edit HTML’ forms as SpotfireControl tags with a single attribute, ‘id’. They are unwieldly and can often be unpredictable. More importantly, you cannot style them in CSS or control their behavior (listening or extracting values) in JavaScript.

By themselves, you can refer to the SpotfireControl in jQuery by calling it’s ID. For example:

<script>
$('286f89cf42fa42bd875acb6ac2146b54').click(
    function() {
        alert('You clicked an Action Control!');
     }
);
<script>

Let’s simplify this with hidden block for mapping. After all, do we really even need to use the SpotfireControl?

<div style="display:none;">
<p id="cardID"><SpotfireControl id="c6221ace979b4b7abfc6cb7cda82ce03" /></p>
<p id="selectedIndices"><SpotfireControl id="81623e6922d240c899cabfb6342b3b3c" /></p>
<p id="calcValueSpotfireBust"><SpotfireControl id="3bd910de133a4af3a060fd95a7339548" /></p>
<p id="calcValueSpotfireNoBust"><SpotfireControl id="8009489800fe4ea6a777fa94e48e83ec" /></p>
</div>

This gives me a ‘library’ to refer to in my JavaScript that has nicer names. The result is now I can link buttons of my own creation to Spotfire Action Controls.

Technical Director at Ruths.ai

One thought on “Using Spotfire Controls as JavaScript Objects

Leave a Comment

Your email address will not be published. Required fields are marked *