Dashboards & Visualizations

Checkbox - when 1 box is selected another(default only) is unselected

Motivator

I have a checkbox, and I want the default value to be *, that is All. e.g. device = (device="*")
But once an individual choice is selected I want All to be unselected. e.g. device = (device="Choice1")

How do I do this?

Default All is selected, and then I choose choice1, I get this:
device = (device="*" OR device="Choice1")
I do not want this, I want just device="Choice1", where device="*" would be unselected.

This is my code:

<panel>

      <input type="checkbox" token="device" searchWhenChanged="true">
    <!-- checkbox dropdown -->
    <label>Select a device(for per device, need to unselect all):</label>
    <default>*</default>
    <!-- <choice value="*">All</choice> -->
    <!-- The final value will be surrounded by prefix and suffix -->
    <prefix>(</prefix>
    <suffix>)</suffix>
    <!-- Each value will be surrounded by the valuePrefix and valueSuffix -->
    <valuePrefix>device="</valuePrefix>
    <valueSuffix>"</valueSuffix>
    <!-- All the values and their valuePrefix and valueSuffix will be concatenated together with the delimiter between them -->
    <delimiter> OR </delimiter>
    <choice value="*">All</choice>
    <choice value="Choice1">Choice1</choice>
    <choice value="Choice2">Choice2</choice>
    <choice value="Choice3">Choice3</choice>

  </input>

  <html>
    <h3> device = $device$</h3>
  </html>
</panel>
Tags (1)
0 Karma

Motivator

For the checkbox input, the "form.token" token contains a string with a comma separated string with all the selected values ordered (in my case "*,1,2,3" when all options are selected). With the change > condition options we can check wether or not all is still selected when you select a box another than "all" and just set the "form.token" token to whatever was selected.

Example:
by default I have "all" selected.
if I select opt1 (which has a value of 1) my form.chkbox becomes "*,1". the condition case kicks in and sets the form.chkbox to 1 (unselecting the "all" as result). The same logic applies to the other options.

if having opt1 selected e select opt2 my form.chkbox becomes "1,2" so no condition is triggered.

The only caveat here is if you only box selected you can't select "all" before selecting other box first. You'll need to have more than on box selected before the "all" option becomes selectable again. There might be a wait to work around this using condition match instead of condition value but I haven't figured it out yet.

  <fieldset submitButton="false">
    <input type="checkbox" token="chkbox">
      <label>chkbox</label>
      <choice value="*">all</choice>
      <choice value="1">opt1</choice>
      <choice value="2">opt2</choice>
      <choice value="3">opt3</choice>
      <change>
        <condition value="*,1">
          <set token="form.chkbox">1</set>
        </condition>
        <condition value="*,2">
          <set token="form.chkbox">2</set>
        </condition>
        <condition value="*,3">
          <set token="form.chkbox">3</set>
        </condition>
      </change>
      <default>*</default>
      <initialValue>*</initialValue>
    </input>
  </fieldset>

Other than this approach you can probably get away with using javascript to do it.

------------
Hope I was able to help you. If so, an upvote would be appreciated.

Motivator

If the this post answered your question please accept it as an answer so it can be mark as such and help other in the future. Thanks

------------
Hope I was able to help you. If so, an upvote would be appreciated.
0 Karma