topic Re: dashboard clear text in text input in Dashboards & Visualizations

dashboard clear text in text input

Sukisen1981 — Sat, 02 Mar 2019 09:20:42 GMT

Is there a way in simple xml form to have the X symbol enabled inside the input text box?
The input drop down has the child element showclearbutton, but the same does not exist for text inputs.
I have seen some complex answers involving js etc, but is it really that complex?
Can we do something with CSS inside the simple xml form?
Basically, i have text input box and I would like the users to be able to click on the X icon/symbol inside the text input box and clear all text
Splunk Version 6.6.3

Re: dashboard clear text in text input

Sukisen1981 — Sun, 03 Mar 2019 13:01:05 GMT

Hi , Any answers? clues...alternatives

Re: dashboard clear text in text input

maciep — Sun, 03 Mar 2019 15:00:14 GMT

i think this is a bit more complicated than you might imagine? You're essentially trying to add a button to an existing text box and have that button take some action. And you want to do it with just a styling engine? Probably not doable.

Adding html elements and placing them in existing divs from simple xml is impossible i think. But even if you could, no idea how you would also use css to take action when that button is clicked? Without js? I know css can be pretty powerful, but it does have its limits, right?

That said, you can sort of mimic that functionality with simple xml. And maybe with this approach, you could use css to further style these elements...adding to the illusion that it is "built-in"?

<form>
  <label>Playing Around</label>

  <fieldset submitButton="false" autoRun="false">
    <input type="text" token="my_text">
      <label>Enter Some Text</label>
    </input>
    <input type="checkbox" token="clear_button" searchWhenChanged="true">
      <label></label>
      <change>
        <unset token="form.clear_button"></unset>
        <unset token="form.my_text"></unset>
      </change>
      <delimiter> </delimiter>
      <choice value="clear">X</choice>
    </input>
  </fieldset>
</form>

Re: dashboard clear text in text input

Sukisen1981 — Sun, 03 Mar 2019 17:55:14 GMT

Hi @maciep , thanks for the response.
I had tried this option before, and well I am sorry I had forgotten to mention, I do have another drop down input and a submit button as well. The submit button will take inputs from the drop down and text input fields. and then do its search. There will be a big gap between the text input (which has to be the second input type in the form) and the submit button, which affects the look and feel of the dashboard. I did try replacing X with some larger text like 'clear entered text' but it does not help much.
What I did try was to convert the simple XML to HTML and with the help of a few HTML divs, and CSS inside the HTML form I was able to achieve the needed behaviour. Basically just have a class button (type=reset) after the input text , place it in a nested div to be part of the input text only. This worked well and I was happy.
But then it stuck me that I had tested this on chrome,so what about other browsers? So, i tried with a few other browsers, worked well on firefox but refused to run on ie10, which led me to some link stating, ie10 might be not supported fully as fasr as browser rendering is considered by Splunk anymore. Now, this is not acceptable, I don't know which browsers end users are using and ie10 is going to be used quite a bit.
So, I am back to square one now. I do think though you are correct and I am perhaps trying to achieve something complex without the use of .js AND I also want cross browser compatibility.
I am going to keep this open for some time and see if someone else can suggest something else. I doubt though if this can really be improved.
At some time i just felt like adding a js and writing a simple CS and closing out this issue! Why take so much trouble for something like this! But maybe I will just wait and see.

Re: dashboard clear text in text input

Sukisen1981 — Mon, 04 Mar 2019 17:28:49 GMT

So, finally I did this by converting my simple xml to html and adding some div tags and custom style.

The HTML code for the dropdown, text, input and submit button is as follows

      <div class="input input-text" id="text4" type="text">

          <label>Enter Title</label>
          <input id="reset1" type="reset" value="X"/> 
        </div>


        <div class="form-submit" id="search_btn" >

            <button class="btn btn-primary submit">Submit</button>
        </div>
    </div>

  </form>

Added some small style elements for the X buttons in the text inputs

form [id="reset1"] {

     position: absolute;
    border: none;
    display: block;
    width: 16px;
    border-radius: 20px;
   left: 490px;
     top: 75px;                             

    background-color: #ddd;
    padding: 0px;
    margin: 0px;
}

The mistake (or my incapability) that I was doing with the earlier attempt is to try to have a custom close icon/button and then try to re-position it inside the text fields. The key thing here is that I used just the simple <input id="reset1" type="reset" value="X"/> instead of a fancy cutsom button, this way I did not need to re-size/re-place my custom button per se.
Yes, it does mean that by using the HTML conversion I have compromised with edit features available in simple xml, but there is always a trade off , i guess. Am i entirely happy? No, but it works and does the needed function in all browsers and I did not use any custom js
Maybe this will help someone one day

Re: dashboard clear text in text input

maciep — Mon, 04 Mar 2019 17:52:43 GMT

Yeah, a bit more flexibility with an html dashboard, glad it's working for you.

I would suggest too, maybe submit an Enhancement Request for this functionality to be added to splunk's built-in textbox?

Re: dashboard clear text in text input

Sukisen1981 — Mon, 04 Mar 2019 18:10:36 GMT

@maciep - Hmm he he will splunk listen to me? But, yes its something that should be there, we have showclearbutton for dropdown input, it probably won't take much more of an effort for the splunk engineers to have this in a text input as well...thanks for your help on this!

Re: dashboard clear text in text input

niketn — Tue, 05 Mar 2019 02:05:50 GMT

@Sukisen1981 I am wondering how you feel converting to HTML a simpler approach than adding Simple XML JS Extension to Simple XML dashboards? 🙂

I would think Simple XML JS Extension to be a better fit over HTML Dashboard provided you are comfortable making chnages to Splunk JS stack directly via HTML dashboards. Also if you are willing to sacrifice several new features like <init> section, table cell coloring using Simple XML etc.

Re: dashboard clear text in text input

Sukisen1981 — Mon, 11 Mar 2019 14:51:47 GMT

@niketnilay - Thanks for checking this out. I am on 6.6.3 version AND I do not have access to store CSS or JS files in the static folder, so using something simple like script=".js" and then just write js and store it externally in the static location, and refer it within my simple xml form is not possible.
Is it possible to write js in 6.6.3 in the simple XML file without referencing a js file in an external static location? If I have to convert to HTML mode to write the js, well then I might as well achieve this through the CSS in the HTML code.
I quite agree with you that yes, I do loose a lot of flexibility if I convert to HTML dashboard, but I can not see any other option.

Re: dashboard clear text in text input

reneedeleon — Mon, 30 Mar 2020 04:34:39 GMT

@Sukisen1981 is it possible to create a clear input for text fields in xml for a dashboard?