joakim.johansson

Input directive for showing and hiding parameters based on user selection

Discussion created by joakim.johansson Employee on Sep 27, 2019
Latest reply on Dec 26, 2019 by RicardoPereira

The ability to configure parameters and how they should be presented in Snow Automation Platform (AP) is determined by the available input directives in the platform. For example, a string can be presented as a text box, autocomplete, read only textbox a dropdown and so on. The possibilities is not locked down in the platform. You can actually write your own input directives and publish them inside AP.

 

However, big DISCLAIMER, if you mess up you end up with a broken user interface. So please, if you decide to go down this road, build this in a test environment, even if you try the code below that I have tested on my development machine.

 

A pretty common request is the ability to show and hide parameters on the checkout based on what a user selects. This functionality is not (yet) in the product but with the code below you can add it yourself. This is actually an example from Snow’s internal Automation Platform, used when onboarding new employees (we have a lot of those ).

Example

When onboarding new employees, whoever is doing the onboarding places a request in AP. As a part of that request, he or she decides if the new employee need a mobile device.

 

If yes, the user interface changes to this

 

The code

 

So, how do you achieve this? Let’s take it step by step.

1. Browse to http://yourAPserver/#/inputdirectives

2. Press the “Add” button and enter a name. Enter “custom-booleantoggle-hidden-parameters” and press Save

 

3. Add the following code to the “Controller” part.

 

['$scope', '$http', function ($scope, $http) {

    /*

       

    You can hide other parameters by adding json-config in the placeholder-field for the parameter using this directive.

    Example of json-config:

   

    [{"value": 'True',"showParameters": ["Input13", "Input14"]}]

   

    When the value of the boolean-toggle must be set to True for parameters Input13 and Input14 to be visible.

    The parameters must be configurated as visible in the beginning.

       

    */

    $scope.init = function () {

       

        if ($scope.parameter.value !== '') {

            $scope.parameter.value = angular.lowercase($scope.parameter.value) === 'true' ? 'True' : 'False';

        }

        $scope.showParameterConfigs = eval($scope.parameter.placeholderText);

        $scope.$watch('parameter.value', function (newValue) {

            if (newValue != undefined) {

                $scope.setParametersVisible();       

            }

        })

    }

   

    $scope.setValue = function (newValue) {

        $scope.parameter.value = newValue;

        $scope.setParametersVisible();

    }

   

    $scope.setParametersVisible = function () {

       

        _.each($scope.showParameterConfigs, function (c) {

            _.each(c.showParameters, function (p) {

                var parameterToHide = _.find($scope.$parent.cartItem.parameters, function (pp) {

                    return pp.variableName == p;

                });

                if (parameterToHide != undefined) {

                    parameterToHide.visible = c.value == $scope.parameter.value ? 1 : 0;

                    parameterToHide.value = parameterToHide.visible ? parameterToHide.value : '';

                }

            });

        });

    }

   

 

    $scope.init();

}]

 

And in the Template part add the following

 

<div class="btn-group">

    <button class="btn" data-ng-class="parameter.value == 'True' ? 'btn-success' : 'btn-default'" data-ng-click="setValue('True')" data-igap-localize>Yes</button>

    <button class="btn" data-ng-class="parameter.value == 'False' ? 'btn-danger' : 'btn-default'" data-ng-click="setValue('False')" data-igap-localize>No</button>

</div>

 

You also need to add the supported types. Choose System.Boolean and System.Bool. This will make the new input directive available in the config when you build you workflows. In this case it will be visible when the parameter is a Boolean.

 

It should now look like this. Don’t forget to Save

 

Configure your parameters

The input directive has been added, now it’s time to use it. Reading the instruction in the input directive that says. This means it will require some extra configuration when setting up our parameters.

Lets setup a test scenario. In our scenario we want to let somebody select the color and brand of the new company car. But only if they select that they need a company car.

Create the following parameters:

 

Parameter 1

Display name “1. Full name”

Type: string

Input field type: Textbox

Parameter visibility: “Checkout view”

Parameter 2

Display name “2. Requires company car”

Type: Boolean

Input field type: “custom-booleantoggle-hidden-parameters” (if it doesn’t show, reload the page)

Parameter visibility: “Checkout view”

Parameter 3

Display name “3. Color”

Type: string

Input field type: “Textbox”

Parameter visibility: “Checkout view”

Parameter 4

Display name “4. Brand”

Type: string

Input field type: “Textbox”

Parameter visibility “Checkout view”

 

Final configuration

Now, looking at my test service it looks like this. It still behaves normally, that is, showing all parameters.

 

 

From the input directive code we can read the following…

 

/*    

    You can hide other parameters by adding json-config in the placeholder-field for the parameter using this directive.

    Example of json-config:

    [{"value": 'True',"showParameters": ["Input13", "Input14"]}]

 

    When the value of the boolean-toggle must be set to True for parameters Input13 and Input14 to be visible.

    The parameters must be configurated as visible in the beginning.

    */

 

Let’s head back to our parameter config and update the “Placeholder” field. In my case the config needed to be added to the placeholder field is:

[{"value": 'True',"showParameters": ["string02", "string03"]}]

Meaning… If value is True, then show parameters called string03 and string 04. It looks like this…

Result

Now, going back to the checkout. The selection on Company car will toggle the visibility on Color and Brand selection.

 

Also, if you need help with advanced configurations like this. You can always contact Snow Services for help.

Outcomes