Dashboards & Visualizations

Create a token of a html textarea when the user clicks on a submit button?

alwayslearning
Explorer

Hi all,

I am trying to create a token from user input on a html textarea. Unfortunately I can't use the default "input type=text" because I need to have a large text box for users to record investigations (which gets posted to an external ticketing tool). The idea is that the user completes the textbox and clicks on a "Next" or "Submit" button and the user input will be set as a token. The name of the token will need to be based on the id of the textarea as the dashboard may have a few textboxes. As a starter, I've been testing with the following and failing (not very good at Javascript):

XML

 

<form script="textarea.js">
  <label>HTML Text Area Button</label>
  <row>
    <panel>
      <html>
        <textarea id="ta_investigateoutcome" rows="3"/>
        <input id="html_ta_user_comment" type="button" value="Click"/>
        <html encoded="1">TEST: $investigateoutcome$</html>
      </html>
    </panel>
  </row>
  <row>
    <panel depends="$alwayshideCSSpanel$">
      <html>
        <style>
          textarea {
          width: 100%;
          height: 150px;
          padding: 12px 20px;
          box-sizing: border-box;
          border: 2px solid #ccc;
          border-radius: 4px;
          background-color: #f8f8f8;
          resize: none;
          }
        </style>
      </html>
    </panel>
  </row>
</form>

 

textarea.js

 

require([
  'underscore',
  'jquery',
  'splunkjs/mvc',
  'splunkjs/mvc/tableview',
  'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {
  var defaultTokenSpace = mvc.Components.getInstance('default');
  $('textarea').parent().parent().addClass('textarea_div');
  $('textarea').each(function (ta) {
    $(this).on('click',"#html_ta_user_comment",function(input) {
      defaultTokenSpace.set($(this).attr('id').replace('ta_' ,'') ,$(this).val());
    })
  })
});

 

Labels (2)
1 Solution

niketn
Legend

@alwayslearning you are possibly looking for the following JS. I would recommend you to search in the Splunk Web Reference Documentation on Splunk Dev site for each of the SplunkJS stack elements mentioned in the code to understand them better.

 

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'
], function (_, $, mvc) {
    // Iitialize Default and Submitted Token Model.
    var defaultTokenModel = mvc.Components.get("default");
    var submittedTokenModel = mvc.Components.get("submitted");
    // #html_ta_user_comment button Clicked
    $(document).on("click", "input#html_ta_user_comment", function (e) {
        // Capture value of the Text Area
        var str_ta_investigateoutcome = $("textarea#ta_investigateoutcome").val();
        // If text area value is not null or empty then set token $investigateoutcome$ value
        if(str_ta_investigateoutcome!== undefined && str_ta_investigateoutcome!==""){
            // Default Token Model update For token value in UI
            defaultTokenModel.set("investigateoutcome", str_ta_investigateoutcome);
            // Submitted Token Model update For running searches on Dashboard with Submit Button.
            submittedTokenModel.set("investigateoutcome", str_ta_investigateoutcome);
        }else{
            // If Text Area is not populated before clicking on the #html_ta_user_comment button pop-up alert!
            alert("Please add comment before submitting!");
        }
    });
});
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

niketn
Legend

@alwayslearning you are possibly looking for the following JS. I would recommend you to search in the Splunk Web Reference Documentation on Splunk Dev site for each of the SplunkJS stack elements mentioned in the code to understand them better.

 

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'
], function (_, $, mvc) {
    // Iitialize Default and Submitted Token Model.
    var defaultTokenModel = mvc.Components.get("default");
    var submittedTokenModel = mvc.Components.get("submitted");
    // #html_ta_user_comment button Clicked
    $(document).on("click", "input#html_ta_user_comment", function (e) {
        // Capture value of the Text Area
        var str_ta_investigateoutcome = $("textarea#ta_investigateoutcome").val();
        // If text area value is not null or empty then set token $investigateoutcome$ value
        if(str_ta_investigateoutcome!== undefined && str_ta_investigateoutcome!==""){
            // Default Token Model update For token value in UI
            defaultTokenModel.set("investigateoutcome", str_ta_investigateoutcome);
            // Submitted Token Model update For running searches on Dashboard with Submit Button.
            submittedTokenModel.set("investigateoutcome", str_ta_investigateoutcome);
        }else{
            // If Text Area is not populated before clicking on the #html_ta_user_comment button pop-up alert!
            alert("Please add comment before submitting!");
        }
    });
});
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

thambisetty
SplunkTrust
SplunkTrust

textarea value will be assigned to token "ta_investigateoutcome_output". This can be used to used as Splunk token.

require(['jquery','splunkjs/mvc','splunkjs/mvc/simplexml/ready!'], function(){
   $('#html_ta_user_comment').on("click",function() {
	var userinput = $('#ta_investigateoutcome').val();
   	$(document).find("#userinput").text(userinput);
	// Access the "default" token model
        var tokens = splunkjs.mvc.Components.get("default");
 
       // Retrieve the value of a token $mytoken$
       tokens.set("ta_investigateoutcome_output",userinput);

   });
});

 

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

thambisetty
SplunkTrust
SplunkTrust

user input is stored in var userinput in below textarea.js:

require(['jquery','splunkjs/mvc','splunkjs/mvc/simplexml/ready!'], function(mvc){
   $('#html_ta_user_comment').on("click",function() {
	var userinput = $('#ta_investigateoutcome').val();
   	$(document).find("#userinput").text(userinput);
    });
});

 

simplexml:

<form script="textarea.js">
  <label>HTML Text Area Button</label>
  <row>
    <panel>
      <html>
        <textarea id="ta_investigateoutcome" rows="3"/>
        <input id="html_ta_user_comment" type="button" value="Click"/>
        <h3>CLICK SUBMIT BUTTON TO SEE USER INPUT IS:</h3><span id="userinput">No Input!</span>
      </html>
    </panel>
  </row>
  <row>
    <panel depends="$alwayshideCSSpanel$">
      <html>
        <style>
          textarea {
          width: 100%;
          height: 150px;
          padding: 12px 20px;
          box-sizing: border-box;
          border: 2px solid #ccc;
          border-radius: 4px;
          background-color: #f8f8f8;
          resize: none;
          }
        </style>
      </html>
    </panel>
  </row>
</form>
————————————
If this helps, give a like below.

alwayslearning
Explorer

Thank you for the suggestion but unfortunately this didn't work for me when I tested it (UPDATE: works on Edge, not Chrome). I also need the user input set as a splunk token so that I can call it later to pass it to the ticketing tool

Get Updates on the Splunk Community!

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...

Let’s Get You Certified – Vegas-Style at .conf24

Are you ready to level up your Splunk game? Then, let’s get you certified live at .conf24 – our annual user ...