topic How to create a dropdown based on the checkbox? in Dashboards & Visualizations

How to create a dropdown based on the checkbox?

marisstella — Tue, 18 Feb 2020 10:23:34 GMT

I need three dropdowns which should be shown based on the check box.. If there is no check box choosen, the dropdown should be hidden..
Like
checkbox1 dropdown1
checkbox2 dropdown2
checkbox3 dropdown3
when I click on the checkbox1 then only the dropdown1 should showup and fetch the result based on my search query.

Re: How to create a dropdown based on the checkbox?

kamlesh_vaghela — Tue, 18 Feb 2020 12:23:45 GMT

@marisstella

Can you please try this?

<form>
  <label>Checkbox</label>
  <fieldset submitButton="false">
    <input type="checkbox" token="checkbox">
      <label>Checkbox 1</label>
      <choice value="Checkbox1">Checkbox1</choice>
      <delimiter> </delimiter>
      <change>
        <condition match="$checkbox$==&quot;Checkbox1&quot;">
          <set token="flag1">true</set>
        </condition>
        <condition>
          <unset token="flag1"></unset>
          <unset token="dropdown1"></unset>
        </condition>
      </change>
    </input>
    <input type="checkbox" token="checkbox2">
      <label>Checkbox 2</label>
      <choice value="Checkbox2">Checkbox2</choice>
      <delimiter> </delimiter>
      <change>
        <condition match="$checkbox2$==&quot;Checkbox2&quot;">
          <set token="flag2">true</set>
        </condition>
        <condition>
          <unset token="flag2"></unset>
          <unset token="dropdown2"></unset>
        </condition>
      </change>
    </input>
    <input type="checkbox" token="checkbox3">
      <label>Checkbox 1</label>
      <choice value="Checkbox3">Checkbox3</choice>
      <delimiter> </delimiter>
      <change>
        <condition match="$checkbox3$==&quot;Checkbox3&quot;">
          <set token="flag3">true</set>
        </condition>
        <condition>
          <unset token="flag3"></unset>
          <unset token="dropdown3"></unset>
        </condition>
      </change>
    </input>
    <input type="dropdown" token="dropdown1" depends="$flag1$">
      <label>DropDown 1</label>
      <choice value="A">A</choice>
    </input>
    <input type="dropdown" token="dropdown2" depends="$flag2$">
      <label>DropDown 2</label>
      <choice value="A">A</choice>
    </input>
    <input type="dropdown" token="dropdown3" depends="$flag3$">
      <label>DropDown 3</label>
      <choice value="A">A</choice>
    </input>
  </fieldset>
</form>

Re: How to create a dropdown based on the checkbox?

manjunathmeti — Tue, 18 Feb 2020 13:03:50 GMT

Instead of using match you can use value attribute in condition element.

<form>
  <fieldset submitButton="false">
  <input type="checkbox" token="checkbox">
      <label>Checkbox</label>
      <choice value="Checkbox">checkbox</choice>
      <change>
        <condition value="Checkbox">
          <set token="flag">true</set>
        </condition>
        <condition>
          <unset token="flag"></unset>
        </condition>
      </change>
    </input>
    <input type="dropdown" token="dropdown" depends="$flag$">
      <label>DropDown</label>
      <choice value="A">A</choice>
    </input>
  </fieldset>
 </form>

Re: How to create a dropdown based on the checkbox?

vnravikumar — Wed, 19 Feb 2020 05:52:24 GMT

Try this

<form script="checkbox.js">
  <label>Checkbox</label>
  <fieldset submitButton="false">
    <input type="checkbox" token="chkvalue" id="rk">
      <label>Checkbox</label>
      <choice value="one">One</choice>
      <choice value="two">Two</choice>
      <choice value="three">Three</choice>
      <delimiter>,</delimiter>
    </input>
    <input type="dropdown" token="dropdown1" depends="$form.showdp1$">
      <label>DropDown 1</label>
      <choice value="dp1">DP1</choice>
    </input>
    <input type="dropdown" token="dropdown2" depends="$form.showdp2$">
      <label>DropDown 2</label>
       <choice value="dp2">DP2</choice>
    </input>
    <input type="dropdown" token="dropdown3" depends="$form.showdp3$">
      <label>DropDown 3</label>
       <choice value="dp3">DP3</choice>
    </input>
    <input type="text" token="showdp1" depends="$hide$"></input>
    <input type="text" token="showdp2" depends="$hide$"></input>
    <input type="text" token="showdp3" depends="$hide$"></input>
  </fieldset>
</form>

javascript:

require([
    "jquery", 
    "splunkjs/mvc", 
    "splunkjs/mvc/simplexml/ready!"], function($, mvc) {
        var checkbox = mvc.Components.get('rk');
        checkbox.on("change", function(e) {
            var defaultTokenModel = mvc.Components.get("default");
            var tokenValue = defaultTokenModel.get("chkvalue");
            defaultTokenModel.unset("form.showdp1");
            defaultTokenModel.unset("form.showdp2");
            defaultTokenModel.unset("form.showdp3");
            if(tokenValue != null && tokenValue.length > 0){
                tokenValue.split(",").forEach(function (item) {
                if(item === "one"){
                    defaultTokenModel.set("form.showdp1",true);
                }else if(item === "two"){
                    defaultTokenModel.set("form.showdp2",true);
                }else if(item === "three"){
                    defaultTokenModel.set("form.showdp3",true);
                }
            });
        }
    });
});

Re: How to create a dropdown based on the checkbox?

marisstella — Wed, 19 Feb 2020 09:33:13 GMT

Awesome... I made some changes as per my requirement. Appreciate it. Thanks for the help Kamlesh and Manjunath

Re: How to create a dropdown based on the checkbox?

marisstella — Wed, 19 Feb 2020 09:35:04 GMT

@ravikumar, this is good idea but I don't know how to execute this.. that's why accepted above answer. Don't mind.