topic Re: How to increase height of input text box html dashboard in Dashboards & Visualizations

How to increase height of input text box html dashboard?

danosoclive — Tue, 02 Aug 2022 14:28:28 GMT

Hi, i've been banging my head against the wall for a while on this one.
I have an HTML dashboard that i would like users to be able to input details on particular issues.
These updates will generally be paragraphs of text.

As such i've been trying to give the users an expanded box in which to put their details and have so far failed.
I've tried inline height: 500px - nothing, ive tried in an external css, width works fine (so i know it the right syntax) , but no joy.

So my question is this.
Is there a way to make a text box have a multi line expanded input in html splunk?
Alternatively is there a way to use textarea and have the contents be the value of an input token?

Many thanks in advance
Dan

Re: How to increase height of input text box html dashboard

bshuler_splunk — Fri, 20 Dec 2019 15:34:15 GMT

https://stackoverflow.com/questions/17083229/how-to-change-an-input-element-to-textarea-using-jquery

Re: How to increase height of input text box html dashboard

niketn — Sat, 21 Dec 2019 11:23:48 GMT

@danosoclive, you would need <html> textarea input for this to work which is not a default input in Splunk. However if you follow the blog by @jconger, Using HTML5 Input Types on Splunk Forms, you can have html input of your choice in your Splunk Form including Text Area. You would also need a companion Simple XML JS Extension file to capture the changes in the Text Area input and set/unset the required token accordingly.

Following is a run anywhere example to have Multiline Text Area input like Comment in Splunk.

Following is the run anywhere example Simple XML Code:

<dashboard script="html_text_area_input.js">
  <label>Multi-line Text Box Area as Splunk Input using Simple XML JS Extension</label>
  <init>
    <set token="tokComment">Not Applicable.</set>
  </init>
  <row>
    <panel>
      <html>
        <style>
          #html_ta_user_comment{
            width: 500px;
            height: 115px;            
          }
        </style>
        <div>
          <label>Enter Comment</label>
        </div>
        <div>
          <textarea id="html_ta_user_comment" name="comment" rows="10" cols="30">Not Applicable.</textarea>
        </div>
      </html>
      <table>
        <search>
          <query>| makeresults
| fields - _time
| eval "Text Entered"=$tokComment|s$</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">20</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">none</option>
        <option name="percentagesRow">false</option>
        <option name="refresh.display">progressbar</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
      </table>
    </panel>
  </row>
</dashboard>

Following is the Simple XML JS Extension file html_text_area_input.js to be placed under Splunk app's appserver/static folder (may require debug refresh, bump or splunk restart along with internet browser history cleanup).

require(["jquery", 
        "splunkjs/mvc", 
        "splunkjs/mvc/simplexml/ready!"], 
    function($, mvc) {
    var defaultTokenModel = mvc.Components.get("default");
    var submitTokenModel = mvc.Components.get("submitted");
    $(document).on("change","#html_ta_user_comment",function(){
        var strComment=$(this).val();
        var strTokComment=defaultTokenModel.get("tokComment");
        if(strComment!=="" && strComment!==undefined){
            if(strTokComment!==undefined || strTokComment!==strComment){
                defaultTokenModel.set("tokComment",strComment);
                submitTokenModel.set("tokComment",strComment);
            }
        }else{
            defaultTokenModel.unset("tokComment");
            submitTokenModel.unset("tokComment");
        }
    });
});

Re: How to increase height of input text box html dashboard

DanoSOC — Mon, 06 Jan 2020 12:58:24 GMT

Hi niketnilay,

Thankyou for your comprehensive response.
However I cannot seem to get the above to work at all.
I can now define a text area and have initialised the token but it will not update the token 'on("change")' when I type something in, or at least it does not show me that it has changed. Any idea what could be going wrong?!

Thanks
Dan

Re: How to increase height of input text box html dashboard

DanoSOC — Wed, 08 Jan 2020 13:08:52 GMT

A bit of jiggery pokery later and I managed to make it work, and have successfully implemented into a HTML dashboard. Thanks for your help neketnilay !

Re: How to increase height of input text box html dashboard

j_cabanillas — Mon, 23 Nov 2020 05:34:31 GMT

Can you please tell me how you made it "change "?

Re: How to increase height of input text box html dashboard

emottola — Wed, 10 Nov 2021 03:01:44 GMT

Can you be more specific about what you changed?

Re: How to increase height of input text box html dashboard

klchoy — Tue, 02 Aug 2022 08:28:55 GMT

Hi, your solution worked perfectly. I have another question, how can I transfer value from another dashboard back to the "tokcomment" token?

Re: How to increase height of input text box html dashboard

tomapatan — Thu, 03 Oct 2024 07:22:37 GMT

Great post!

How do I add a submit button so that the text entered into the form gets printed after the Submit button is pressed ?

Thanks.

Re: How to increase height of input text box html dashboard

ITWhisperer — Thu, 03 Oct 2024 08:04:35 GMT

Off topic but you could look at the documentation

https://docs.splunk.com/Documentation/Splunk/9.0.4/DashStudio/inputConfig#Add_a_submit_button

Re: How to increase height of input text box html dashboard

tomapatan — Thu, 03 Oct 2024 14:13:49 GMT

Answered my own question - the script below worked for me:

require([ 'splunkjs/mvc', 'splunkjs/mvc/simplexml/ready!' ], function(mvc) { console.log('JavaScript loaded'); // Debug log to confirm script is running var defaultTokenModel = mvc.Components.getInstance('default'); var submittedTokens = mvc.Components.getInstance('submitted'); document.getElementById('submit_button').addEventListener('click', function() { var comment = document.getElementById('html_ta_user_comment').value; console.log('Submit button clicked'); // Debug log to confirm button click console.log('Comment:', comment); // Debug log to show the comment value defaultTokenModel.set('tokComment', comment); console.log('Token set:', defaultTokenModel.get('tokComment')); // Debug log to confirm token is set // Trigger the search by updating the submitted tokens submittedTokens.set(defaultTokenModel.toJSON()); }); });

By adding the line submittedTokens.set(defaultTokenModel.toJSON());, we ensured that the search is refreshed whenever the token value changes.