All Apps and Add-ons

How to use switcher with checkbox splunk sideview

disha
Contributor

Hi,
I am creating custom form in splunk view using checkbox,textfields and button.
Fields are like:
Name --textfield
Inputs1,input2,input3--checkbox
output1,output2,output3--checkbox

next checkbox is switch mode with Auto or manual.
My requirement is:
1. User can either select Auto OR Manual. Not both.
2. If user select auto I want to ask user count and % as textfield.
3. If user select Manual, I need to skip count and % textfields and display the next form field that is EmailID textfield.

I need a small example to achieve this functionality with sideview module. Please help.
Thanks,
Disha

1 Solution

sideview
SplunkTrust
SplunkTrust

For the Auto or Manual element, where the user can pick one or the other but not both, just don't use the Checkbox module - use the Radio module. If you don't seem to have the Radio module then your Sideview Utils is out of date so update.

For the count and %fields that you want to show as a TextField, but only if the Radio is set to "auto", put

<param name="customBehavior">showOnlyIfAuto</param>

and for the EmailID TextField that should only show if "manual" is selected, put

<param name="customBehavior">showOnlyIfManual</param>

then in application.js (or some other js file in appserver/static/ that you have included using the SideviewUtils module), and assuming that the "name" of your Auto/Manual Radio module is "mode", your JS definition is as follows:

if (typeof(Sideview)!="undefined") {
    Sideview.utils.declareCustomBehavior("showOnlyIfAuto", function(textFieldModule) {
        var methodReference = textFieldModule.onContextChange.bind(textFieldModule);
        textFieldModule.onContextChange = function() {
            var retVal = methodReference();
            var context = this.getContext();
            var visibilityToken = "show only when auto is selected";
            if (context.get("mode")=="auto") {
                this.show(visibilityToken);
            } else {
                this.hide(visibilityToken);
            }
            return retVal;
        }
    });

    Sideview.utils.declareCustomBehavior("showOnlyIfManual", function(textFieldModule) {
        var methodReference = textFieldModule.onContextChange.bind(textFieldModule);
        textFieldModule.onContextChange = function() {
            var retVal = methodReference();
            var context = this.getContext();
            var visibilityToken = "show only when manual is selected";
            if (context.get("mode")=="manual") {
                this.show(visibilityToken);
            } else {
                this.hide(visibilityToken);
            }
            return retVal;
        }
    });
}

That's it. I'll admit it's a bit verbose as a customBehavior for such a simple thing. And it's a common enough sort of customBehavior that I may break down and put params on TextField+Pulldown+Checkbox+Checkboxes+Radio like showOnlyWhen with some crude psueodocode syntax of <param name="showOnlyWhen">$mode$==auto</param>.

View solution in original post

disha
Contributor

Hi Nick,
I am not able to achieve this.MY code is

    <param name="name">mode</param>

    <param name="staticRadios">
      <list>
        <param name="label">Auto</param>
        <param name="value">auto</param>
      </list>
      <list>
        <param name="label">Manual</param>
        <param name="value">manual</param>
      </list>

     </param>
    <param name="template">$name=$value$</param>
<param name="customBehavior">showOnlyIfAuto</param>


   <module name="HTML">
<param name="html"><![CDATA[

<font size="4" face="Georgia, Arial" color="006400">Accuracy(%):</font><BR>]]>


<module name="TextField">
<param name="name">accuracy</param>

$name$=$value$
left
20%

Also I am putting js code in application.js but I can see accuracy textfield when the page load. It does not waiting for select auto or manual.I am missing something. Please guide.
Thanks.
Disha

0 Karma

sideview
SplunkTrust
SplunkTrust

Since you're using the template param, with the XML you have your $mode$ value will be either mode=auto or `mode=manual". So neither of them will really match the conditional logic in the Javascript, which are respectively looking for "auto" and "manual". Delete the template param, or modify the JS code so they are looking for $mode.rawValue$.

0 Karma

sideview
SplunkTrust
SplunkTrust

For the Auto or Manual element, where the user can pick one or the other but not both, just don't use the Checkbox module - use the Radio module. If you don't seem to have the Radio module then your Sideview Utils is out of date so update.

For the count and %fields that you want to show as a TextField, but only if the Radio is set to "auto", put

<param name="customBehavior">showOnlyIfAuto</param>

and for the EmailID TextField that should only show if "manual" is selected, put

<param name="customBehavior">showOnlyIfManual</param>

then in application.js (or some other js file in appserver/static/ that you have included using the SideviewUtils module), and assuming that the "name" of your Auto/Manual Radio module is "mode", your JS definition is as follows:

if (typeof(Sideview)!="undefined") {
    Sideview.utils.declareCustomBehavior("showOnlyIfAuto", function(textFieldModule) {
        var methodReference = textFieldModule.onContextChange.bind(textFieldModule);
        textFieldModule.onContextChange = function() {
            var retVal = methodReference();
            var context = this.getContext();
            var visibilityToken = "show only when auto is selected";
            if (context.get("mode")=="auto") {
                this.show(visibilityToken);
            } else {
                this.hide(visibilityToken);
            }
            return retVal;
        }
    });

    Sideview.utils.declareCustomBehavior("showOnlyIfManual", function(textFieldModule) {
        var methodReference = textFieldModule.onContextChange.bind(textFieldModule);
        textFieldModule.onContextChange = function() {
            var retVal = methodReference();
            var context = this.getContext();
            var visibilityToken = "show only when manual is selected";
            if (context.get("mode")=="manual") {
                this.show(visibilityToken);
            } else {
                this.hide(visibilityToken);
            }
            return retVal;
        }
    });
}

That's it. I'll admit it's a bit verbose as a customBehavior for such a simple thing. And it's a common enough sort of customBehavior that I may break down and put params on TextField+Pulldown+Checkbox+Checkboxes+Radio like showOnlyWhen with some crude psueodocode syntax of <param name="showOnlyWhen">$mode$==auto</param>.

View solution in original post

joebensimo
Path Finder

A showOnlyWhen parameter would be an welcome addition!

0 Karma

sideview
SplunkTrust
SplunkTrust

Sideview Utils 2.4.8 just released, in which you will now find good documentation and working examples for the Radio module. http://sideviewapps.com/apps/sideview-utils

0 Karma

sideview
SplunkTrust
SplunkTrust

Yes there isn't any nice docs page yet. I'm afraid I'm a bit behind on a couple docs tasks.

For now you can manually navigate to this view in Sideview Utils - "testcases_for_checkbox". it's devoid of explanatory text but there are several working examples there that you can copy and paste from, and since Radio works just like Pulldown/Tabs/Checkboxes, all the metaphors and params should be very familiar to you.

The real docs page will come in the next release or two hopefully.

0 Karma

disha
Contributor

Thanks Nick..But I cannot see any documentation for radio module like how to use it. I have sideview 2.4.7.
Can You give me the link of example usage.
Thanks

0 Karma
Register for .conf21 Now! Go Vegas or Go Virtual!

How will you .conf21? You decide! Go in-person in Las Vegas, 10/18-10/21, or go online with .conf21 Virtual, 10/19-10/20.