.gif)
<span id='dropDownDocProp' style='display:none'>
<SpotfireControl id="calculatedValueGoesHere123" />
calculated value expression: first([myHTMLColumn])
</span>
<div id="here">html renders here</div>
js
MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
//this is the target element to monitor changes
//just put the span id here. You can remove next line and add a script param called targetDomId
var targetDomId = "dropDownDocProp"
//function when dropdown value changes
var myFunction = function(oldValue,newValue){
$("#here").html(newValue)
}
//no need to change after this line.
var target = document.getElementById(targetDomId)
//callback is the function to trigger when target changes
var oldVal = target.innerText.trim()
var callback = function(mutations) {
newVal=$('#'+targetDomId+' ').text()
if(newVal!=oldVal) myFunction(oldVal,newVal)
oldVal = newVal;
}
//this is to glue these two together
var observer = new MutationObserver(callback);
var opts = {
childList: true,
attributes: true,
characterData: true,
subtree: true
}
observer.observe(target,opts);
Sample Data
copy the text below and add a data table from clipboard in spotfire
ID,Detail
2,"<div style=""position:relative;""> <div style=""opacity:0.5;position:absolute;left:50px;top:-30px;width:300px;height:150px;background-color:#40B3DF""></div> <div style=""opacity:0.3;position:absolute;left:120px;top:20px;width:100px;height:170px;background-color:#73AD21""></div> <div style=""margin-top:30px;width:360px;height:130px;padding:20px;border-radius:10px;border:10px solid #EE872A;font-size:120%;""> <h1>CSS = Styles and Colors</h1> <div style=""letter-spacing:12px;font-size:15px;position:relative;left:25px;top:25px;"">Manipulate Text</div> <div style=""color:#40B3DF;letter-spacing:12px;font-size:15px;position:relative;left:25px;top:30px;"">Colors, <span style=""background-color:#B4009E;color:#ffffff;""> Boxes</span></div> </div> </div>"
3,"<style> .table { width: 100%; } .table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; text-align: left; } .table.names tr:nth-child(even) { background-color: #eee; } .table.names tr:nth-child(odd) { background-color: #fff; } .table.names th { background-color: black; color: white } </style> </head> <body> <table class=table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </table><br> <table class=""table names""> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </table>"
7,"<style> .flex-container { display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; text-align: center; } .flex-container>* { padding: 15px; -webkit-flex: 1 100%; flex: 1 100%; } .article { text-align: left; } .header { background: black; color: white; } .nav { background: #eee; } .nav ul { list-style-type: none; padding: 0; } .nav ul a { text-decoration: none; } @media all and (min-width: 768px) { .nav { text-align: left; -webkit-flex: 1 auto; flex: 1 auto; -webkit-order: 1; order: 1; } .article { -webkit-flex: 5 0px; flex: 5 0px; -webkit-order: 2; order: 2; } } </style> <div class=""flex-container""> <header class=header> <h1>City Gallery</h1> </header> <nav class=""nav""> <ul> <li><a href=""#"">London</a></li> <li><a href=""#"">Paris</a></li> <li><a href=""#"">Tokyo</a></li> </ul> </nav> <article class=""article""> <h1>London</h1> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p> <p><strong>Resize this page to see what happens!</strong></p> </article> </div>"
10,"<style> .body { background-color: powderblue; } .h1 { color: red; } .p { color: blue; } </style> <div class=body> <h1>HTML TEST</h1> <h1 class=h1>This is a Heading</h1> <p class=p>This is a styled paragraph.</p> <script> function myFunction() { document.getElementById(""demo"").innerHTML = ""Hello JavaScript!""; } </script> <h3>External image and javascript test</h3> <p id=""demo"">This text should be replaced by clicking the button</p> <button type=""button"" onclick=""myFunction()"">Try it</button><img src=""https://www.w3schools.com/images/html5.gif"">"
No comments:
Post a Comment