topic Re: How to set img src value in html panel based on token value? in Dashboards & Visualizations

How to set img src value in html panel based on token value?

j_quickbase — Tue, 24 Nov 2020 06:50:20 GMT

I have a simple dashboard with a drop-down input field:

<fieldset autoRun="false" submitButton="true"> <input type="time" searchWhenChanged="false"> <label>Default (5m realtime)</label> <default> <earliest>rt-5m</earliest> <latest>rtnow</latest> </default> </input> <input type="dropdown" token="instance" searchWhenChanged="true"> <label>Instance</label> <choice value="prod">US</choice> <choice value="test">EU</choice> <default>prod</default> </input> </fieldset>

I would like to set the img src in the below HTML panel to specific URL, based on the value of the selected token above:

For example, if the "US" option is chosen, the img src URL should be: https://www.US-option.foo.bar.org

Or, if the "EU" option is chosen, the img src URL should be: https://www.EU-option.foo.bar.edu

I have tried "condition match", etc. and cannot seem to figure it out. Any guidance is greatly appreciated.

Re: How to set img src value in html panel based on token value?

renjith_nair — Tue, 24 Nov 2020 08:30:32 GMT

Try this,

<form> <fieldset autoRun="false" submitButton="false"> <input type="dropdown" token="instance" searchWhenChanged="true"> <label>Instance</label> <choice value="lights">Lights</choice> <choice value="forest">Forest</choice> <default>prod</default> </input> </fieldset> <row> <panel> <title>Image of $instance$</title> <html> <img src="https://www.w3schools.com/css/img_$instance$.jpg" alt="IMG" > </img> </html> </panel> </row> </form>

Re: How to set img src value in html panel based on token value?

thambisetty — Tue, 24 Nov 2020 09:06:43 GMT

@j_quickbase

dashboard:

<form script="replaceimage.js"> <label>testx</label> <fieldset submitButton="false"> <input type="dropdown" token="instance"> <label>Instance</label> <choice value="prod">US</choice> <choice value="test">EU</choice> </input> <input type="time" token="field2"> <label></label> <default> <earliest>-24h@h</earliest> <latest>now</latest> </default> </input> </fieldset> <row> <panel> <html> <div id="image"> </div> </html> </panel> </row> </form>

js:

$SPLUNK_HOME\etc\apps\search\appserver\static\replaceimage.js

require([ "splunkjs/mvc", "splunkjs/mvc/simplexml/ready!" ], function (mvc) { // get default token model var tokens = mvc.Components.getInstance("default"); tokens.on("change:instance", function(model, value) { console.log("Dropdown value changed: " + String(value)); if (value=="prod"){ document.getElementById("image").innerHTML="<img src='https://homepages.cae.wisc.edu/~ece533/images/airplane.png'/>"; } if (value=="test"){ document.getElementById("image").innerHTML="<img src='https://homepages.cae.wisc.edu/~ece533/images/baboon.png'/>"; } }); });

Re: How to set img src value in html panel based on token value?

j_quickbase — Tue, 24 Nov 2020 13:37:09 GMT

As this is in Splunk Cloud, and I'd like to keep all of the code inline (not worry about external/uploaded javascript, etc.)..I have managed to get the below to work;

<fieldset autoRun="false" submitButton="true"> <input type="time" searchWhenChanged="false"> <label>Default (5m realtime)</label> <default> <earliest>-5m</earliest> <latest>now</latest> </default> </input> <input type="dropdown" token="instance" searchWhenChanged="true"> <label>Instance</label> <choice value="prod">US</choice> <choice value="test">EU</choice> <default>prod</default> <change> <condition match="match(value, "test")"> <set token="country">https://www.EU-option.foo.bar.edu/image.png</set> </condition> <condition match="match(value, "prod")"> <set token="country">https://www.US-option.foo.bar.org/image.png</set> </condition> </change> </input> </fieldset> <panel> <html> <img src="$country$"/> </html> </panel>

Thanks to everyone that responded.