How to hide HTML in panel when multiple tokens are set?

avivn — Mon, 28 Aug 2017 14:15:03 GMT

hello,
I have a panel with tag like this:

<panel>  
<html rejects="$first$,$second$">
 ....text....  
</html>  
</panel>

I have two tokens based on different searches in the dashboard.
I want the HTML to be hidden when both the token are set.
how can I do this?
thanks.

Re: How to hide HTML in panel when multiple tokens are set?

niketn — Mon, 28 Aug 2017 17:33:02 GMT

@avivn, can you add more details on what event is setting tokens $first$ and $second$ in your dashboard?

Re: How to hide HTML in panel when multiple tokens are set?

niketn — Mon, 28 Aug 2017 19:34:36 GMT

@avivn, Behavior of depends attribute and rejects attributes with multiple tokens are different.

For depends multiple tokens work like AND, i.e. element (like row, panel, html, input) with depends shows up only when all tokens are set. On the other hand, for rejects multiple tokens work like OR, i.e. element with rejects gets hidden even if there is one token which is unset.

So instead of using rejects, you would need to implement your own logic using Simple XML JavaScript Extension in your dashboard.

PS: Since the following required Token Handler, you need to know whether tokens belong to default or submitted model in your dashboard/form. Refer to documentation: http://dev.splunk.com/view/SP-CAAAEW2.
I have used default event handler in my case to code change in token values. Since I have used token's change event handler, assumption is both tokens will not be set on dashboard/form load. : http://dev.splunk.com/view/webframework-codeexamples/SP-CAAAE5J

Step 1: Save the following file as hide_html_on_multiple_tokens.js

require([
    "splunkjs/mvc",
    "jquery"
    ],
    function(
        mvc,
        $
        ) {
            //mvc.Components.get() function to get all default Tokens
                var defaultTokenModel = mvc.Components.get("default");

                defaultTokenModel.on("change:first",function(newTokFirst,first){            
                    console.log("first: ",first);
                    var tokSecond= defaultTokenModel.get("second");                 
                    console.log("tokSecond: ",tokSecond);
                    if (tokSecond===undefined || first===undefined){
                        $("#html1").show();
                    }else{
                        $("#html1").hide();
                    }
                });

                defaultTokenModel.on("change:second",function(newTokSecond,second){
                    console.log("second: ",second);
                    var tokFirst= defaultTokenModel.get("first");                   
                    console.log("tokFirst: ",tokFirst);
                    if (tokFirst===undefined || second===undefined){
                        $("#html1").show();
                    }else{
                        $("#html1").hide();
                    }
                });
        }
    );

Step 2: Create a SimpleXML form with above JS and radio input to set and unset two tokens to test whether HTML panel gets hidden or not. PS: jQuery in this example uses HTML id attribute i.e. html1 to hide() or show()the same:

<form script="hide_html_on_multiple_tokens.js">
  <label>Hide HTML Panel on setting both first and second tokens</label>
  <fieldset submitButton="false">
    <input type="radio" token="tokenChanges">
      <label></label>
      <choice value="setfirst">Set First Token</choice>
      <choice value="unsetfirst">Unset First Token</choice>
      <choice value="setsecond">Set Second Token</choice>
      <choice value="unsetsecond">Unset Second Token</choice>
      <choice value="setboth">Set Both Tokens</choice>
      <choice value="unsetboth">Unset Both Tokens</choice>
      <change>
        <condition value="setfirst">
          <set token="first">true</set>
        </condition>
        <condition value="unsetfirst">
          <unset token="first"></unset>
        </condition>
        <condition value="setsecond">
          <set token="second">true</set>
        </condition>
        <condition value="unsetsecond">
          <unset token="second"></unset>
        </condition>
        <condition value="setboth">
          <set token="first">true</set>
          <set token="second">true</set>
        </condition>
        <condition value="unsetboth">
          <unset token="first"></unset>
          <unset token="second"></unset>
        </condition>
      </change>
    </input>
  </fieldset>
  <row>
    <panel>
      <title>Chart 1 (HTML section hides only when both first: $first$ and second: $second$ tokens are set)</title>
      <html id="html1">
        <div style="color:red;text-align:center;font-weight:bold;font-size:200%">token1: $first$ - token2: $second$</div>  
      </html>
    </panel>
  </row>
</form>

Re: How to hide HTML in panel when multiple tokens are set?

avivn — Wed, 30 Aug 2017 07:11:55 GMT

thank you!

Re: How to hide HTML in panel when multiple tokens are set?

niketn — Wed, 30 Aug 2017 07:14:28 GMT

Anytime 🙂

topic Re: How to hide HTML in panel when multiple tokens are set? in Dashboards & Visualizations

How to hide HTML in panel when multiple tokens are set?

Re: How to hide HTML in panel when multiple tokens are set?

Re: How to hide HTML in panel when multiple tokens are set?

Re: How to hide HTML in panel when multiple tokens are set?

Re: How to hide HTML in panel when multiple tokens are set?