Hi,
Look at the option with inputs. Further info for this can be found in the docs here
2 and 3: You're after some advanced token logic. I have an example dashboard which may be of use. In essence I use hidden text fields to set the values of multiple tokens and replicate logic throughout without having loads of set and unset statements all over the place.
<form script="tokenlinks.js">
<label>Button Handler Updated</label>
<!--
<init>
<set token="ShowDev"></set>
</init>
-->
<fieldset submitButton="false"></fieldset>
<row>
<panel depends="$ShowBoth$">
<html>
<button class="btn" data-set-token="form.DateButton" data-value="Show">Show Date</button>
<button class="btn" data-set-token="form.SecsButton" data-value="Show">Show Time</button>
<button class="btn" data-set-token="form.AllButton" data-value="Show">Show All</button>
</html>
</panel>
<panel depends="$ShowDate$">
<html>
<button class="btn" data-set-token="form.DateButton" data-value="Show">Show Date</button>
<button class="btn" data-set-token="form.SecsButton" data-value="">Hide Time</button>
<button class="btn" data-set-token="form.AllButton" data-value="Show">Show All</button>
</html>
</panel>
<panel depends="$ShowSecs$">
<html>
<button class="btn" data-set-token="form.DateButton" data-value="">Hide Date</button>
<button class="btn" data-set-token="form.SecsButton" data-value="Show">Show Time</button>
<button class="btn" data-set-token="form.AllButton" data-value="Show">Show All</button>
</html>
</panel>
<panel depends="$ShowHide$">
<html>
<button class="btn" data-set-token="form.DateButton" data-value="">Hide Date</button>
<button class="btn" data-set-token="form.SecsButton" data-value="">Hide Time</button>
</html>
</panel>
</row>
<row>
<panel>
<single depends="$ShowDatePanel$">
<search>
<query>
| makeresults | eval ShowMessage=strftime(now(),"%b %e") | fields ShowMessage
</query>
</search>
<option name="rangeColors">["0x53a051","0x0877a6","0xf8be34","0xf1813f","0xdc4e41"]</option>
<option name="underLabel">Date</option>
</single>
<single depends="$ShowSecsPanel$">
<search>
<query>
| makeresults $ShowSecsPanel$ | eval ShowMessage=strftime(now(),"%H:%M:%S") | fields ShowMessage
</query>
</search>
<option name="drilldown">all</option>
<option name="rangeColors">["0x53a051","0x0877a6","0xf8be34","0xf1813f","0xdc4e41"]</option>
<option name="underLabel">Time</option>
<drilldown>
<set token="form.SecsButton"></set>
</drilldown>
</single>
<html rejects="$ShowBoth$">
<button class="btn" data-set-token="form.AllButton" data-value="">Hide All</button>
</html>
</panel>
</row>
<row depends="$ShowDev$">
<panel>
<html>
<h1>DEV CONTROLS</h1>
</html>
</panel>
</row>
<row depends="$ShowDev$">
<panel>
<input type="text" token="DateButton">
<default></default>
<change>
<condition value="Show">
<set token="ShowDatePanel"></set>
<set token="form.SetButtonsInitial">DateShow</set>
<set token="form.AllButton">Date</set>
</condition>
<condition>
<unset token="ShowDatePanel"></unset>
<set token="form.SetButtonsInitial">DateHide</set>
<set token="form.AllButton">Date</set>
</condition>
</change>
</input>
<input type="text" token="SecsButton">
<default></default>
<change>
<condition value="Show">
<set token="ShowSecsPanel"></set>
<set token="form.SetButtonsInitial">SecsShow</set>
<set token="form.AllButton">Secs</set>
</condition>
<condition>
<unset token="ShowSecsPanel"></unset>
<set token="form.SetButtonsInitial">SecsHide</set>
<set token="form.AllButton">Secs</set>
</condition>
</change>
</input>
<input type="text" token="AllButton">
<default></default>
<change>
<condition value="Show">
<set token="form.SecsButton">Show</set>
<set token="form.DateButton">Show</set>
</condition>
<condition value="Date"></condition>
<condition value="Secs"></condition>
<condition>
<set token="form.SecsButton"></set>
<set token="form.DateButton"></set>
</condition>
</change>
</input>
<input type="text" token="SetButtonsInitial">
<default></default>
<change>
<condition match="$form.SecsButton$=="Show" AND $form.DateButton$=="Show"">
<set token="form.ResetButtons"></set>
</condition>
<condition match="$form.SecsButton$=="Show"">
<set token="form.ResetButtons">Secs</set>
</condition>
<condition match="$form.DateButton$=="Show"">
<set token="form.ResetButtons">Date</set>
</condition>
<condition>
<set token="form.ResetButtons">Both</set>
</condition>
</change>
</input>
<input type="text" token="ResetButtons">
<default></default>
<change>
<unset token="ShowBoth"></unset>
<unset token="ShowSecs"></unset>
<unset token="ShowDate"></unset>
<unset token="ShowHide"></unset>
<set token="form.SetButtons">$value$</set>
</change>
</input>
<input type="text" token="SetButtons">
<default></default>
<change>
<condition value="Both">
<set token="ShowBoth"></set>
</condition>
<condition value="Secs">
<set token="ShowDate"></set>
</condition>
<condition value="Date">
<set token="ShowSecs"></set>
</condition>
<condition>
<set token="ShowHide"></set>
</condition>
</change>
</input>
</panel>
</row>
</form>
The tokenlinks js file is the same file you can get from the dashboard examples app. The code is below, however its just to handle the buttons in the same way any other input sets a token value.
require(['jquery', 'underscore', 'splunkjs/mvc', 'util/console'], function($, _, mvc, console) {
function setToken(name, value) {
console.log('Setting Token %o=%o', name, value);
var defaultTokenModel = mvc.Components.get('default');
if (defaultTokenModel) {
defaultTokenModel.set(name, value);
}
var submittedTokenModel = mvc.Components.get('submitted');
if (submittedTokenModel) {
submittedTokenModel.set(name, value);
}
}
$('.dashboard-body').on('click', '[data-set-token],[data-unset-token],[data-token-json]', function(e) {
e.preventDefault();
var target = $(e.currentTarget);
var setTokenName = target.data('set-token');
if (setTokenName) {
setToken(setTokenName, target.data('value'));
}
var unsetTokenName = target.data('unset-token');
if (unsetTokenName) {
setToken(unsetTokenName, undefined);
}
var tokenJson = target.data('token-json');
if (tokenJson) {
try {
if (_.isObject(tokenJson)) {
_(tokenJson).each(function(value, key) {
if (value == null) {
// Unset the token
setToken(key, undefined);
} else {
setToken(key, value);
}
});
}
} catch (e) {
console.warn('Cannot parse token JSON: ', e);
}
}
});
});
... View more