Bootstrap Modal Window

When there is a constraint of either Space or a need to force the User to make an selection before the Analysis is moved forward, it is useful to have a Modal Popup Window, show up.

I am showing here how a Modal window can be created in Spotfire. It uses a hidden "Calculated Value" control in the text area to recreate a Spotfire filter in HTML + Bootstrap.

Text Area

HTML Content

<!--Hidden Calculated Value variable for Content-->
<div id="dropboxWrapper"  style = "display:none"><SpotfireControl id="582584011c584d9198f5c002603db718" /></div>
<br>
<br>
<br>
<h4>Presenting similar infomation in a nice Bootstrap presentation</h4>
<br>
<!--Jquery script adds content in below container-->
<div class="container">
</div>

Jquery Script

//Append Header dependencies
$('head').append("<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'/>")

//Append Container Contents

$(this).delay(1000).queue(function(){
var newcontent="";
var labelVal3 = $("#dropboxWrapper").text().split(",");
newcontent = "<select multiple class='form-control' id='sel2' style='width:150px;height:250px;'>";
for (i = 0; i < labelVal3.length; i++) { 
newcontent += "<option>"+labelVal3[i]+"</option>";
}
newcontent += "<</select>";

$( ".container" ).append( "\
  <h3>Modal Example</h3>\
  <button type='button' class='btn btn-info btn-lg' data-toggle='modal' data-target='#myModal'>Open Modal</button><br><br>\
  <div class='modal fade' id='myModal' role='dialog'>\
<div class='modal-dialog'>\
  <div class='modal-content'>\
<div class='modal-header'>\
  <button type='button' class='close' data-dismiss='modal'>&times;</button>\
  <h4 class='modal-title'>Modal Header</h4>\
</div>\
<div class='modal-body'>"+
newcontent
+"</div>\
<div class='modal-footer'>\
  <button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>\
</div>\
  </div>\
</div>\
</div>\  " );
$(this).dequeue();
});

Final Result

** Key insights here.
1. A delay  required in the Jquery for Spotfire Controls to populate before accessing content.
2. Many Filters are Images rendered at server side, so cannot be tapped for content.
3. Spotfire already refers to Bootstrap, so do not refer to it again, as it causes conflict.... found out the hard way.