Solved: Create a token of a html textarea when the user cl...

alwayslearning · ‎09-18-2020

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());
    })
  })
});

niketn · ‎09-20-2020

@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 · ‎09-20-2020

@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 · ‎09-20-2020

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 · ‎09-20-2020

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 · ‎09-20-2020

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

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

javascript

token

New Case Study Shows the Value of Partnering with Splunk Academic Alliance

How to Monitor Google Kubernetes Engine (GKE)

Index This | How can you make 45 using only 4?