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

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

SOC4Kafka - New Kafka Connector Powered by OpenTelemetry

Rounding off the Splunk Dashboard Contest

A Four Part Event Series: AI + Observability: AI Agents, LLMs, Apps, & Infrastructure

Join the Conversation