All Apps and Add-ons

How To Use Multiple Checkbox instead of Multi Select Dropdown?

jpass
Contributor

I'm using SideView Utils and the Checkbox module. I am wondering if it's possible to use multiple checkboxes to achieve the same functionality as the multi-select dropdown.

For example, consider this:

'myField' has 10 possible values
val1
val2
val3
etc.

I'd like to have 10 check boxes and a user can decide which values to include in the search. It seems the checkbox needs a 'template' parameter because the problem arises when you start adding OR to the mix. If a single value is checked, the OR is not needed and causes an error.

1 Solution

jpass
Contributor

As promised:

I am posting some code that will allow you to have multiple check boxes on a dashboard to achieve the functionality described above.

Description -

  • this method uses SideView Utils 2.2.7
  • each check box has a unique 'name' and unique 'onValue'
  • the 'offValue' for each check box is set to 0
  • a 'value setter module' sits downstream of the checkbox modules and combines each checkbox value into a string
  • if all boxes are un-checked, the 'value setter module' value would be: 0;0;0
  • if you check box1, the 'value setter value' changes to the onValue for box1: fieldname="avalue1";0;0
  • if two checkboxes are checked the 'value setter value' becomes: fieldname="avalue1";fieldname="avalue2";0
  • the 'search module' that sits downstream of the value setter module will use this string
  • but before the search is launched, a 'CustomBehavior Module' allows me to intercept and process the 'value setter value' before it is used in the search
  • the end result is this:
  • value setter module value before CustomBehavior: fieldname="avalue1";fieldname="avalue2";0
  • value setter module value after CustomBehavior: fieldname="avalue1" OR fieldname="avalue2"
  • It's pretty simple. The javascript just removes the ; and separates each value with an OR

-----------This is the advanced XML-----------

<module name="Checkbox">
    <param name="label">Checkbox #1</param>
    <param name="onValue">myfield="avalue1"</param>
    <param name="offValue">0</param>
    <param name="name">box1</param>
    <param name="checked">True</param>

<module name="Checkbox">
    <param name="label">Checkbox #2</param>
    <param name="onValue">myfield="avalue2"</param>
    <param name="offValue">0</param>
    <param name="name">box2</param>
    <param name="checked">True</param>

<module name="Checkbox">
    <param name="label">Checkbox #3</param>
    <param name="onValue">myfield="avalue3"</param>
    <param name="offValue">0</param> 
    <param name="name">box3</param>
    <param name="checked">True</param>

<module name="TextField">
    <param name="name">searchphrase</param>
    <param name="float">left</param>

<module name="Button">

    <module name="ValueSetter">
        <param name="name">chk_boxes</param>
        <param name="value">$box1$;$box2$;$box3$</param>

        <module name="CustomBehavior">
            <param name="customBehavior">join_chks</param>

            <module name="Search">
                <param name="search"><![CDATA[index=myindex $chk_boxes$ $searchphrase$]]></param>

                        <module name="Table"/>
            </module>
        </module>
    </module>
</module>
</module>
</module>
</module>
</module>

-----------This code must be placed in the application.js file-----------

if (Splunk.util.getCurrentView() == 'yourviewname')
{
    Sideview.utils.declareCustomBehavior("join_chks", function(customBehaviorModule)
    {
        customBehaviorModule.getModifiedContext = function() 
        {
        var context = this.getContext();

        //grab the value setter module value and create an array from it
        var chkboxes = context.get("chk_boxes").split(";");

        //declare an new array to be used as our new value setter value     
        var new_chkboxes = new Array();

        //loop over the chkboxes array and push any value not equal to zero to the new_chkboxes array
        for (var i = 0; i < chkboxes.length; i++)
        {
            if(chkboxes[i] !=="0")
            {new_chkboxes.push(chkboxes[i]);}
        }
    //convert the new_chkboxes array into a string of values separated by OR
    new_chkboxes = new_chkboxes.join(' OR ');

    //replace the value setter value with our new string
    context.set('chk_boxes',new_chkboxes);
    return context;
    }
    }
    );
}

View solution in original post

jpass
Contributor

As promised:

I am posting some code that will allow you to have multiple check boxes on a dashboard to achieve the functionality described above.

Description -

  • this method uses SideView Utils 2.2.7
  • each check box has a unique 'name' and unique 'onValue'
  • the 'offValue' for each check box is set to 0
  • a 'value setter module' sits downstream of the checkbox modules and combines each checkbox value into a string
  • if all boxes are un-checked, the 'value setter module' value would be: 0;0;0
  • if you check box1, the 'value setter value' changes to the onValue for box1: fieldname="avalue1";0;0
  • if two checkboxes are checked the 'value setter value' becomes: fieldname="avalue1";fieldname="avalue2";0
  • the 'search module' that sits downstream of the value setter module will use this string
  • but before the search is launched, a 'CustomBehavior Module' allows me to intercept and process the 'value setter value' before it is used in the search
  • the end result is this:
  • value setter module value before CustomBehavior: fieldname="avalue1";fieldname="avalue2";0
  • value setter module value after CustomBehavior: fieldname="avalue1" OR fieldname="avalue2"
  • It's pretty simple. The javascript just removes the ; and separates each value with an OR

-----------This is the advanced XML-----------

<module name="Checkbox">
    <param name="label">Checkbox #1</param>
    <param name="onValue">myfield="avalue1"</param>
    <param name="offValue">0</param>
    <param name="name">box1</param>
    <param name="checked">True</param>

<module name="Checkbox">
    <param name="label">Checkbox #2</param>
    <param name="onValue">myfield="avalue2"</param>
    <param name="offValue">0</param>
    <param name="name">box2</param>
    <param name="checked">True</param>

<module name="Checkbox">
    <param name="label">Checkbox #3</param>
    <param name="onValue">myfield="avalue3"</param>
    <param name="offValue">0</param> 
    <param name="name">box3</param>
    <param name="checked">True</param>

<module name="TextField">
    <param name="name">searchphrase</param>
    <param name="float">left</param>

<module name="Button">

    <module name="ValueSetter">
        <param name="name">chk_boxes</param>
        <param name="value">$box1$;$box2$;$box3$</param>

        <module name="CustomBehavior">
            <param name="customBehavior">join_chks</param>

            <module name="Search">
                <param name="search"><![CDATA[index=myindex $chk_boxes$ $searchphrase$]]></param>

                        <module name="Table"/>
            </module>
        </module>
    </module>
</module>
</module>
</module>
</module>
</module>

-----------This code must be placed in the application.js file-----------

if (Splunk.util.getCurrentView() == 'yourviewname')
{
    Sideview.utils.declareCustomBehavior("join_chks", function(customBehaviorModule)
    {
        customBehaviorModule.getModifiedContext = function() 
        {
        var context = this.getContext();

        //grab the value setter module value and create an array from it
        var chkboxes = context.get("chk_boxes").split(";");

        //declare an new array to be used as our new value setter value     
        var new_chkboxes = new Array();

        //loop over the chkboxes array and push any value not equal to zero to the new_chkboxes array
        for (var i = 0; i < chkboxes.length; i++)
        {
            if(chkboxes[i] !=="0")
            {new_chkboxes.push(chkboxes[i]);}
        }
    //convert the new_chkboxes array into a string of values separated by OR
    new_chkboxes = new_chkboxes.join(' OR ');

    //replace the value setter value with our new string
    context.set('chk_boxes',new_chkboxes);
    return context;
    }
    }
    );
}

sideview
SplunkTrust
SplunkTrust

Well, if you know in advance what your 10 checkboxes are, ie thinking like the Pulldown module, if you only have "static" options and no "dynamic" options, then it's possible but clunky. You can specify both onValue and offValue. have the onValue param be like myField="val1", and the offValue param to be something that will never happen sourcetype="nonexistent_sourcetype". the offValue is then a kind of harmless placeholder, and when the $foo$ tokens from your checkboxen are plugged into a search, and separated by lots of OR's, there will be something there and you'll have a weird search like

( sourcetype="nonexistent_sourcetype" OR myField="val2" OR sourcetype="nonexistent_sourcetype" OR myField="val4" )

The real answer though I feel, is for me to get around to writing a module that's been in my queue called "Checkboxes", which really works exactly like the Pulldown and Tabs modules, in that it can have static and/or dynamic options, and the same templating stuff and all that jazz. I think it's time for it to be built because the use cases for it seem to be coming more frequently than they were a year ago.

sideview
SplunkTrust
SplunkTrust

Note that the Checkboxes module released in Sideview Utils 2.4, which was a couple releases ago now. Unfortunately I neglected to come back and tell you guys. Checkboxes makes these configurations a lot easier. In addition to being able to do a whole group of static checkboxes, you can use it to render checkbox controls dynamically from search results.

sideview
SplunkTrust
SplunkTrust

Totally, me too. And indeed if you're comfortable with customBehaviors then that's probably the best way right now.

0 Karma

jpass
Contributor

I like the real answer the best. For now I'm going to go with an easy CustomBehavior that looks at onValue / offValue of the check boxes & generates a new string that's inserted into the search.

I'll post the code once I'm done.

Thanks for answering my question.

0 Karma
Get Updates on the Splunk Community!

Earn a $35 Gift Card for Answering our Splunk Admins & App Developer Survey

Survey for Splunk Admins and App Developers is open now! | Earn a $35 gift card!      Hello there,  Splunk ...

Continuing Innovation & New Integrations Unlock Full Stack Observability For Your ...

You’ve probably heard the latest about AppDynamics joining the Splunk Observability portfolio, deepening our ...

Monitoring Amazon Elastic Kubernetes Service (EKS)

As we’ve seen, integrating Kubernetes environments with Splunk Observability Cloud is a quick and easy way to ...