topic Re: Access a drop-down field value in javascript in Splunk Dev

Access a drop-down field value in javascript

nisha_kapoor — Thu, 27 Jul 2017 18:51:38 GMT

I have a dashboard with a dropdown. I want to validate that the user has selected a value for this dropdown. If not, I want an alert to display. Where exactly do I paste the javascript code for this?

I tired converting my dashboard to HTML and used this Javascript code. (I haven't included the entire dashboard code in the interest of readability, please let me know if you want me to paste the entire code)

<!DOCTYPE html>
<html lang="en">
<head>
<script> 
     function validateForm() {
       var x = document.getElementById("input1").value;
     alert("Your field is "+x);
       }
    </script>
</head>
<body>
    <!-- 
    BEGIN LAYOUT
    This section contains the layout for the dashboard. Splunk uses proprietary
    styles in <div> tags, similar to Bootstrap's grid system. 
    -->
    <div class="fieldset">
            <div class="input input-dropdown" id="input1">
                <label>College</label>
              <button type="button" onclick="validateForm()">Try it</button>
            </div>
     </div>
</body>
</html>

But no matter what value I select in the drop-down, the alert displays "Your field is undefined".

To make things clear, I have you two name-value options in my drop-down, USC and UCSD. The initial and default values are set to blank.

Thanks in advance.

Re: Access a drop-down field value in javascript

niketn — Thu, 27 Jul 2017 20:52:55 GMT

@nisha_kapoor, can you please describe the purpose for validation of No Value Selected by the User, when the Dashboard loads without any value for the Dropdown in the first place?

Also any specific reason for JavaScript/alert and also HTML Dashboard?

Can the following Simple XML dashboard with HTML Tooltop suffice your needs? It displays Tooltip Text: No Value Selected when Dashboard Dropdown is empty.

  <row>
    <panel>
      <input type="dropdown" token="input1" searchWhenChanged="true">
        <label>College</label>
        <choice value="abc">ABC</choice>
        <choice value="def">DEF</choice>
        <change>
          <condition match="isnull($value$)">
            <set token="tokAlert">No Value Selected</set>
          </condition>
          <condition>
            <unset token="tokAlert"></unset>
          </condition>
        </change>
      </input>
      <html depends="$tokAlert$">
        <div class="tooltip fade top in" style="top: -100px; left: 70px; display: block;">
          <div class="tooltip-arrow"/>
          <div class="tooltip-inner">$tokAlert$</div>
        </div>
      </html>
    </panel>
  </row>

Re: Access a drop-down field value in javascript

nisha_kapoor — Thu, 27 Jul 2017 22:18:39 GMT

@niketnilay Thank you for your reply.

My purpose is to have a required field validation on this dropdown. If the user doesn't select anything from the dropdown and clicks on the submit button, he should get an alert.

I couldn't find any functionality to do this on Simple XML (my javascript code doesn't run in Simple XML), hence I created a HTML dashboard.

I am trying to do exactly what you demonstrated with the tool tip example, but is there a way the tool tip can be replaced with a pop up alert box?

Re: Access a drop-down field value in javascript

nisha_kapoor — Tue, 01 Aug 2017 00:35:12 GMT

Is there some way I can position the tool tip when I have multiple input elements in the dashboard? Instead of using

style="top: -100px; left: 70px; display: block;

can I link it to a particular input text box?

Re: Access a drop-down field value in javascript

niketn — Tue, 01 Aug 2017 07:52:16 GMT

Several questions ;), let me answer to the best I can.

Following example links panel1 for applying CSS Style for Tooltip and also changes from inline Style to HTML <style> tag which is always hidded using depends.

  <row>
    <panel id="panel1">
      <input type="dropdown" token="input1" searchWhenChanged="true">
        <label>College</label>
        <choice value="abc">ABC</choice>
        <choice value="def">DEF</choice>
        <change>
          <condition match="isnull($value$)">
            <set token="tokAlert">No Value Selected</set>
          </condition>
          <condition>
            <unset token="tokAlert"></unset>
          </condition>
        </change>
      </input>
      <html depends="$alwaysHideCSSStyle$">
        <style>
          #panel1 .tooltip{
            top: -100px; 
            left: 70px; 
            display: block;
          }
        </style>
      </html>
      <html depends="$tokAlert$">
        <div class="tooltip fade top in">
          <div class="tooltip-arrow"/>
          <div class="tooltip-inner">$tokAlert$</div>
        </div>
      </html>
    </panel>
  </row>

Re: Access a drop-down field value in javascript

niketn — Tue, 01 Aug 2017 08:24:16 GMT

Option 1: JavaScript alert() based on no value selected:
Following code should pop up alert() when users click on Submit and input value for College dropdown is not selected or empty.

Step 1: Provided you have a dropdown defined like the following with change event to unset/set validation error message tokenAlert based on value selected or not respectively:

  <fieldset autoRun="false" submitButton="true" position="top">
    <input type="dropdown" token="input1" searchWhenChanged="false">
      <label>College</label>
      <choice value="abc">ABC</choice>
      <choice value="def">DEF</choice>
      <change>
        <condition match="isnull($value$)">
          <set token="tokAlert">No College Selected</set>
        </condition>
        <condition>
          <unset token="tokAlert"></unset>
        </condition>
      </change>
    </input>
  </fieldset>

Step 2: You can use jQuery to handle click() event of submit button and alert() based on tokenAlert set in SimpleXML input change event:

require([
    'splunkjs/mvc',
    'jquery',
    'splunkjs/mvc/simplexml/ready!'
], function(mvc,$){
    $('#submit').on("click", function() {
        var submittedTokens = mvc.Components.get("submitted");
        var input1Token = submittedTokens.get("tokAlert"); //Token tokAlert is set 
        if(input1Token){
            alert(input1Token);
        };
    });
});

PS: mvc.Components.get("submitted");, gets the tokens from Submitted Token Model from Simple XML. Token Model can be either default or submitted based on token behavior set in SimpleXML. Read details on Splunk Dev site: http://dev.splunk.com/view/webframework-developapps/SP-CAAAEW2

Step 3: If you have saved above JavaScript as validation_error_alert.js, then include the same as script in your form tag in simple XML

<form script="validation_error_alert.js">

PS: Simple XML CSS Extension or Simple XML JS Extension require bumping of Splunk environment. So refresh/restart Splunk and also clear internet browser history if required.

Re: Access a drop-down field value in javascript

niketn — Tue, 29 Sep 2020 15:07:28 GMT

Option 2: Modal Error Message Window based on bootstrap element in Splunk:
Following code should open modal window with Validation Error Message, when users click on Submit and input value for College dropdown is not selected or empty.

Step 1: Provided you have a dropdown defined like the following with change event to unset/set validation error message tokenAlert based on value selected or not respectively:

   <fieldset autoRun="false" submitButton="true" position="top">
     <input type="dropdown" token="input1" searchWhenChanged="false">
       <label>College</label>
       <choice value="abc">ABC</choice>
       <choice value="def">DEF</choice>
       <change>
         <condition match="isnull($value$)">
           <set token="tokAlert">No College Selected</set>
         </condition>
         <condition>
           <unset token="tokAlert"></unset>
         </condition>
       </change>
     </input>
   </fieldset>

Step 2: Code for HTML Panel in Simple XML with modal window which is hidden by default (through style="display: none;" and aria-hidden="true" attributes):

  <row>
    <panel>
      <!--HTML for Modal View to Display Validation Messages-->
      <!--Hidden by default-->
      <!--Shows up on Submit button click based on validation errors-->
      <html>
        <div class="section" id="modals">
          <div class="modal hide fade" id="myModal" style="display: none;" aria-hidden="true">
              <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                  <h3>Validation Message</h3>
              </div>
              <div class="modal-body">
                  <p>$tokAlert$</p>
              </div>
          </div>
        </div>
      </html>
    </panel>
  </row>

Step 3: Following JavaScript code is used to show the modal window, when tokenAlert is set with Validation Error Message:

require([
    'splunkjs/mvc',
    'jquery',
    'splunkjs/mvc/simplexml/ready!'
], function(mvc,$){
    $('#submit').on("click", function() {
        var submittedTokens = mvc.Components.get("submitted");
        var input1Token = submittedTokens.get("tokAlert"); //Token tokAlert is set          
        console.log("input1Token:",input1Token);
        if(input1Token){
            $('#myModal').modal('show'); //Shows Modal window with Validation Message set in SimpleXML through HTML Panel
        };
    });
});

Step 4: If you have saved above JavaScript as validation_error_show_modal.js, then include the same as script in your form tag in simple XML

 <form script="validation_error_show_modal.js">

PS: Simple XML CSS Extension or Simple XML JS Extension require bumping of Splunk environment. So refresh/restart Splunk and also clear internet browser history if required.

Re: Access a drop-down field value in javascript

niketn — Tue, 01 Aug 2017 08:43:20 GMT

I have answered these as separate answers below. I have tried to use Simple XML with JS Extensions rather than converting to HTML Dashboard. However, it is up to you as to which way of JavaScript implementation you are comfortable with. Please try them out and let me know.

Re: Access a drop-down field value in javascript

nisha_kapoor — Tue, 01 Aug 2017 20:23:49 GMT

@niketnilay Thank you so much for taking the time out to write these detailed and awesome answers! I executed Option 1, it works perfectly. I am still to try Option 2, but this is my feedback on the rest:

Simple XML dashboard with HTML Tooltop: The problem is arising when I placed more than one input element within the panel, in this case the ToolTip doesn't get displayed with the correct input element. I put all the elements in different panels and placed these panels in the same row for now.
Option 1: This works perfectly. I have to clear my browsing history and/or restart Splunk everytime I make a change to it. Just out of curiosity if I had to do the same on Splunk cloud, where I don't have access to Splunk folder, how would I go about it?

Re: Access a drop-down field value in javascript

niketn — Wed, 02 Aug 2017 01:13:10 GMT

@nisha_kapoor,

1) sorry Simple XML tooltip option I had mentioned prior to knowing your requirement. Yes it might not be easy to implement with Simple XML but you can read the blog from OctoInsight to introduce Tooltips using JavaScript: https://www.google.co.in/amp/s/blog.octoinsight.com/splunk-tooltips-instructions-included/amp/

2) For developer's instance there are some setting that you can introduce in Splunk and Browser to prevent caching so that new JavaScript and CSS files are always picked up (https://docs.splunk.com/Documentation/Splunk/latest/AdvancedDev/CustomizationOptions#Clear_client_and_server_assets_caches_after_customization). Instead of restart you can also try out /_bump or /debug/refresh options. Static assets can also be uploaded via Splunk UI provided you have access or else you can reach out to Splunk Admin (in case of Splunk Cloud- Splunk Support team).

Let me know if further detail is required for any of these.