Dashboards & Visualizations

Embed token values in html string

Enrico
Explorer

Hi everybody,

I need to insert inside my dashboard a button that makes a call to a URL, embedding in the string the values of some tokens that are generated by the inputs of the dashboard.

In order to do this I inserted in the XML code the following HTML lines:

 

<row>
  <panel>
    <html>
      <form action="heregoestheURL" target="_blank">
        <input type="submit" value="Esporta"/>
      </form>
    </html>
  </panel>
</row>

 

 

The code works fine, the HTML button is correctly visualised in the dashboard and it is opening correctly the new window in the browser when pushed, but I cannot find a way to dynamically pass to the URL the values of the tokens. Does anyone have any idea on how I could implement this?

Any help is really appreciated. Thanks!

Enrico

Labels (4)
0 Karma
1 Solution

kamlesh_vaghela
SplunkTrust
SplunkTrust

@Enrico 

Your code works for me.  🙄 Check this.

 

 

<form>
  <label>Submit Form</label>
  <init>
    <set token="sezioneValue">A</set>
    <set token="timeValueEarliest">10</set>
    <set token="timeValueLatest">20</set>
    <set token="tokenEarliestTime">30</set>
    <set token="tokenLatestTime">40</set>
  </init>
  <row>
  <panel>
     <html>
       <a class="btn" href="https://*******************/Export/Index?sezione=$sezioneValue$&amp;earliestTime=$timeValueEarliest$&amp;latestTime=$timeValueLatest$&amp;startTime=$tokenEarliestTime$&amp;endTime=$tokenLatestTime$" target="_blank" >Export</a>  
      </html>
   </panel>
</row>
</form>

 

 

Screenshot 2021-07-13 at 2.37.07 PM.png

View solution in original post

Enrico
Explorer

Hi @kamlesh_vaghela,

Thank you very much for your answer! I am pretty sure that your solution would work, I used JS several times with lines similar to yours in other dashboards without any issues, but this time I actually wanted to try without involving JS code. 

My request is due to the fact that JS code is not very suitable when operating on Splunk Cloud because of the difficulties to debug and upload the separate .js file. Do you think it's possible to achieve the same outcome just using XML and HTML?

Thanks!

Enrico

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@Enrico 

Can you please try this?

<form>
  <label>Submit Form</label>
  <row>
    <panel>
      <html>
        <a class="btn" href="heregoestheURL?a=b&amp;c=d" target="_blank" >Submit</a>  
    </html>
    </panel>
  </row>
</form>

 

Thanks
KV
▄︻̷̿┻̿═━一

If any of my reply helps you to solve the problem Or gain knowledge, an upvote would be appreciated.

0 Karma

Enrico
Explorer

Hi @kamlesh_vaghela,

Thank you once again. I tried your solution but unfortunately it is not giving the expected results: the new window is opened but the parameters are not substituted in the URL. 

Enrico

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@Enrico 

Can you please share your sample XML?

KV

0 Karma

Enrico
Explorer

Hi @kamlesh_vaghela,

Sure, here it goes:

<row>
  <panel>
     <html>
       <a class="btn" href="https://*******************/Export/Index?sezione=$sezioneValue$&amp;earliestTime=$timeValueEarliest$&amp;latestTime=$timeValueLatest$&amp;startTime=$tokenEarliestTime$&amp;endTime=$tokenLatestTime$" target="_blank" >Export</a>  
      </html>
   </panel>
</row>

This is inserted inside a normal dashboard composed of several panels. I also tried to remove both "$" and also to leave only the first one, but nothing changed. The URL is always considered as a static string and the variables are not substituted. 

Enrico

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@Enrico 

Your code works for me.  🙄 Check this.

 

 

<form>
  <label>Submit Form</label>
  <init>
    <set token="sezioneValue">A</set>
    <set token="timeValueEarliest">10</set>
    <set token="timeValueLatest">20</set>
    <set token="tokenEarliestTime">30</set>
    <set token="tokenLatestTime">40</set>
  </init>
  <row>
  <panel>
     <html>
       <a class="btn" href="https://*******************/Export/Index?sezione=$sezioneValue$&amp;earliestTime=$timeValueEarliest$&amp;latestTime=$timeValueLatest$&amp;startTime=$tokenEarliestTime$&amp;endTime=$tokenLatestTime$" target="_blank" >Export</a>  
      </html>
   </panel>
</row>
</form>

 

 

Screenshot 2021-07-13 at 2.37.07 PM.png

Enrico
Explorer

Hi @kamlesh_vaghela,

I added the initialisation and now it is working for me too, thanks a lot. 

Have a nice day!

Enrico

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@Enrico 

I'm not sure Splunk allow this but you can achieve this by using JS. Can you please try this?

XML

<form script="submit_form.js">
  <label>Submit Form</label>
  <row>
    <panel>
      <html>
        <input type="button" id="button" value="Esporta"/>
    </html>
    </panel>
  </row>
</form>

 

submit_form.js

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc) {
    var utils = require("splunkjs/mvc/utils");
    $(document).ready(function() {
        $("#button").click(function() {
            utils.redirect('heregoestheURL?a=b&c=d', "_blank");
        });
    });
});

 

Thanks
KV
▄︻̷̿┻̿═━一

If any of my reply helps you to solve the problem Or gain knowledge, an upvote would be appreciated.

Get Updates on the Splunk Community!

Introducing Splunk Enterprise 9.2

WATCH HERE! Watch this Tech Talk to learn about the latest features and enhancements shipped in the new Splunk ...

Adoption of RUM and APM at Splunk

    Unleash the power of Splunk Observability   Watch Now In this can't miss Tech Talk! The Splunk Growth ...

Routing logs with Splunk OTel Collector for Kubernetes

The Splunk Distribution of the OpenTelemetry (OTel) Collector is a product that provides a way to ingest ...