Solved: How to set img src value in html panel based on to...

j_quickbase · ‎11-23-2020

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:

    <panel>
      <html>
         <img src="https://specific-url-based-on-the-token-value-above-html"></img>
      </html>
    </panel>

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.

j_quickbase · ‎11-24-2020

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, &quot;test&quot;)">
          <set token="country">https://www.EU-option.foo.bar.edu/image.png</set>
        </condition>
        <condition match="match(value, &quot;prod&quot;)">
          <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.

View solution in original post

j_quickbase · ‎11-24-2020

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, &quot;test&quot;)">
          <set token="country">https://www.EU-option.foo.bar.edu/image.png</set>
        </condition>
        <condition match="match(value, &quot;prod&quot;)">
          <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.

thambisetty · ‎11-24-2020

@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'/>";
    }
    });
});

————————————
If this helps, give a like below.

renjith_nair · ‎11-24-2020

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>

Happy Splunking!

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

panel

token

Announcing Scheduled Export GA for Dashboard Studio

Extending Observability Content to Splunk Cloud

More Control Over Your Monitoring Costs with Archived Metrics GA in US-AWS!