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.
@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>
@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>
thank you!
Anytime 🙂
@avivn, can you add more details on what event is setting tokens $first$ and $second$ in your dashboard?