Dashboards & Visualizations

how to create a textbox with numeric value

vivek_manoj
Explorer

I have created a textbox input type in a dashboard.

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

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@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>
0 Karma

vivek_manoj
Explorer

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.

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

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/getandsettokenva...

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

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

0 Karma

vnravikumar
Champion

Hi

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>
0 Karma

vivek_manoj
Explorer

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.

0 Karma

vnravikumar
Champion

Hi

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,'');
    });
});
0 Karma

vnravikumar
Champion

I hope the above code matches your requirement.

0 Karma

vnravikumar
Champion

Please confirm.

0 Karma
Get Updates on the Splunk Community!

Introducing the 2024 SplunkTrust!

Hello, Splunk Community! We are beyond thrilled to announce our newest group of SplunkTrust members!  The ...

Introducing the 2024 Splunk MVPs!

We are excited to announce the 2024 cohort of the Splunk MVP program. Splunk MVPs are passionate members of ...

Splunk Custom Visualizations App End of Life

The Splunk Custom Visualizations apps End of Life for SimpleXML will reach end of support on Dec 21, 2024, ...