topic Re: how to create a textbox with numeric value in Dashboards & Visualizations

how to create a textbox with numeric value

vivek_manoj — Tue, 24 Dec 2019 05:52:41 GMT

I have created a textbox input type in a dashboard.

I want to limit that user can enter only numeric value in a textbox.

Re: how to create a textbox with numeric value

vnravikumar — Tue, 24 Dec 2019 06:00:26 GMT

Check this

<form>
  <label>textbox</label>
     <fieldset submitButton="false">
     <input type="text" token="number">
       <label>Add threshold</label>
       <change>
         <condition match="match(value, &quot;^[0-9]+$&quot;)">>
           <set token="form.number">$value$</set>
         </condition>
         <condition>
           <unset token="form.number"></unset>
         </condition>
       </change>
     </input>
   </fieldset>
</form>

Re: how to create a textbox with numeric value

vivek_manoj — Tue, 24 Dec 2019 06:14:01 GMT

Hi Ravi,

I have tried your above code, but I was looking that it wouldn't allow to enter the non-numberic data at all in the text box.

I can see its allowing to enter non-numberic data as well as not to pass the value in the url.

Re: how to create a textbox with numeric value

vnravikumar — Tue, 24 Dec 2019 06:18:55 GMT

Try the below code:

<form script="test.js">
  <label>textbox</label>
     <fieldset submitButton="false">
     <input type="text" token="number" id="digits">
       <label>Add threshold</label>
     </input>
   </fieldset>
</form>

Javascript: test.js

require(["jquery",
"splunkjs/mvc",
"splunkjs/mvc/simplexml/ready!"], 
function($,mvc) {

    $("#digits [data-test='textbox']").keyup(function () { 
        this.value = this.value.replace(/[^0-9\.]/g,'');
    });
});

Re: how to create a textbox with numeric value

kamlesh_vaghela — Tue, 24 Dec 2019 06:21:25 GMT

@vivek_manoj

I suggest you to go with HTML tag. Check below XML.

<dashboard>
  <label>TextBox</label>
  <row>
    <panel>
      <html>
        <input type="number" />
      </html>
    </panel>
  </row>
</dashboard>

Re: how to create a textbox with numeric value

vivek_manoj — Tue, 24 Dec 2019 06:25:00 GMT

Hi Kamlesh,

Thanks for replying but in that case, how can we pass the value from the box to the panel.

As the box is inside html tag.

Re: how to create a textbox with numeric value

vnravikumar — Tue, 24 Dec 2019 06:32:32 GMT

I hope the above code matches your requirement.

Re: how to create a textbox with numeric value

kamlesh_vaghela — Tue, 24 Dec 2019 06:47:19 GMT

You have to set textbox value into token value, using javascript, which you can use in table.

You have to trigger set/get token on change/lost focus of the textbox. check below link for javascript reference. Still you need any assistance then let us know.

https://dev.splunk.com/enterprise/docs/developapps/webframework/binddatausingtokens/getandsettokenvalues/

https://www.youtube.com/watch?v=lojUc9v37Jg

https://answers.splunk.com/answers/586958/how-do-i-add-javascript-to-a-splunk-dashboard.html

Re: how to create a textbox with numeric value

vnravikumar — Tue, 24 Dec 2019 09:16:02 GMT

Please confirm.