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

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>

---
What goes around comes around. If it helps, hit it with Karma 🙂

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

panel

token

Aligning Observability Costs with Business Value: Practical Strategies

Mastering Data Pipelines: Unlocking Value with Splunk

Splunk Up Your Game: Why It's Time to Embrace Python 3.9+ and OpenSSL 3.0

Are you a member of the Splunk Community?