Dynamic Links in Spotfire

My friend asked me recently -
"I need to trigger a URL from Spotfire, where URL should change as per User inputs"
Interesting 🤓
Usually when people try doing it from IronPython webbrowser code, It doesn't work in Webplayer. So we need something which works everywhere 🙂
To do this, I will take a generic example. I will trigger a Google search query based on an Input field. Every time search query gets updated, the Search button will also change its whole code.
Lets start -
  1. Create a HTML Text Area with an Input field Property, and a DIV for holding our search button.
    <span id="query">
    <SpotfireControl id="041866e281b24b8fa9f839f91af7a30d" />
    </span>
    <br><br>
    <div id="trigger">
    </div>
  2. Now Add some extra code to making our search button as an actual button. You can use code below -
    <style id="AlienBox">
     .buttonSpan {
    background-color:chocolate !important;
    color: white !important;
    border: 1px solid white!important;
    border-radius: 2px 3px 3px 3px !important;
        font-variant: petite-caps;
    cursor:pointer;
    }
     </style>
    As usual, here is JS code to beat HTML sanitization -
    if(!$('#AlienBox').length){
     $('body').append($(`<style id="AlienBox">
     .buttonSpan {
    background-color:chocolate !important;
    color: white !important;
    border: 1px solid white!important;
    border-radius: 2px 3px 3px 3px !important;
        font-variant: petite-caps;
    cursor:pointer;
    }
     </style>`, {
            id: 'AlienBox' 
       })); 
    }
  3. Add this JavaScript to Text Area. Feel free to modify as per your need.
    function ChangeURL(){

    var q =$('#query input').val();
    var SearchString = "<span class='buttonSpan' onclick=\"location='https://www.google.com/search?q="+q+"'\"> Search Google for '"+q+"'</span>";
    $('#trigger').html(SearchString);
    }
    setInterval(ChangeURL,500)
  4. Done
This is how it looks for different inputs -
Clicking on these buttons will open a Web Browser with Dynamic URL if the Analysis is opened in Clint. From Webplayer, it simple loads the URL populated.

Adding Styles to Date Picker

in , ,  
While working with date range filters, date-pickers are very helpful. They allow to select date ranges of our interest in a very convenient manner. They are nice right ??


Well what about this one ?

💡 Liked it? Then add this code to a HTML Text area to have this look and feel -
<style>
.DatePicker {
    background: black;
    border: 2px solid #ffffff;
    border-radius: 8px 0px 8px 0px;
    position: absolute;
    overflow: hidden;
    z-index: 1024;
    text-align: center;
    font-size: 11px;
    color: #fff;
    width: 189px;
    font-variant-caps: small-caps;
}
.DatePicker .Header {
    height: 22px;
    padding: 2px 0 2px 0;
    background-color: brown;
    font-size: larger;
    font-weight: bold;
}
.DatePicker .Week td.CurrentMonth {
    color: brown;
}
.DatePicker .Week td {
    width: 21px;
    height: 21px;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    color: black;
}
 </style>
⚽ To beat HTML Sanitization, use below JavaScript code - 
if(!$('#AlienBox').length){
 $('body').append($(`<style id="AlienBox">
.DatePicker {
    background: black;
    border: 2px solid #ffffff;
    border-radius: 8px 0px 8px 0px;
    position: absolute;
    overflow: hidden;
    z-index: 1024;
    text-align: center;
    font-size: 11px;
    color: #fff;
    width: 189px;
    font-variant-caps: small-caps;
}
.DatePicker .Header {
    height: 22px;
    padding: 2px 0 2px 0;
    background-color: brown;
    font-size: larger;
    font-weight: bold;
}
.DatePicker .Week td.CurrentMonth {
    color: brown;
}
.DatePicker .Week td {
    width: 21px;
    height: 21px;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    color: black;
}
 </style>`, {
        id: 'AlienBox' 
   })); 
}