Creating Conditional Workflow Attributes

  • By Daniel Hazelbaker One Year Ago

Overview

Long elusive is the ability to create a Workflow with a User Entry Form that shows or hides some Attributes depending on prior selections on the same form. For example, if you have a Boolean attribute called "Requires Event?" and another 3 or 4 attributes that you want to only show up if they select Yes. Using some a little jQuery in the Pre- and Post-HTML values of the form fields you can accomplish this.

The JavaScript below assumes you are wanting to put your conditional data on a simple Boolean attribute. You can actually do this with (almost) any attribute, but you will need to tweak the JavaScript to work with other input types than a drop down list.

Prepare Things

Okay, first we need to create 3 sample attributes to test with:

  • Need More Stuff? (Boolean)
  • Extra Input 1 (Single Select) (whatever values you want)
  • Extra Input 2 (Text)

Now add a User Entry Form to your workflow activity and set all three attributes to Visible and Editable. Then, optionally, you can set Required on the "Need More Stuff?" attribute. Also, make sure they are listed in the order above.

Next we are going to wrap the "Need More Stuff?" attribute in a div so we know what drop down list to trigger on changes. Put the following in the Pre-HTML field.

<div class="js-need-more">

Then in the Post-HTML close out the div.

</div>

Next we are going to do something similar on the "Extra Input 1", but only on the Pre-HTML.

<div class="js-need-more-true">

The JavaScript code expects the same class name to be appended with "-true" to find the div to show and hide. Finally we are going to close that div by using the Post-HTML of the "Extra Input 2". This way both those attributes are grouped together and will show/hide together.

</div>

The Magic

You are going to append the following JavaScript to the Post-HTML field of the "Extra Input 2". This is what makes the magic happen.

<script>
(function() {
var js_class = 'js-need-more';
var $control = $('.' + js_class + ' select');
var $toggleTrue = $('.' + js_class + '-true');
var $toggleFalse = $('.' + js_class + '-false');

function UpdateToggle()
{
if ($control.val() == 'True')
{
$toggleTrue.removeClass('hidden');
$toggleFalse.addClass('hidden');
}
else
{
$toggleTrue.addClass('hidden');
$toggleFalse.removeClass('hidden');
}
}

Sys.Application.add_load(function () {
$control.change(UpdateToggle);
UpdateToggle();
});
})();
</script>

Okay. Let's break this down so you can see whats going on and make changes as you see fit.


var js_class = 'js-need-more';
var $control = $('.' + js_class + ' select');
var $toggleTrue = $('.' + js_class + '-true');
var $toggleFalse = $('.' + js_class + '-false');

The first line defines the CSS class name that is used as the container for the Boolean attribute. The second line defines a reference to the Select control that is rendered by the Boolean attribute. The third and fourth lines define references to the containers to be made visible when the value is True and when the value is False. Note: We are actually only using the "-true" class, but you can add in another container with "-false" and see the two containers toggle back and forth.


function UpdateToggle()
{
if ($control.val() == 'True')
{
$toggleTrue.removeClass('hidden');
$toggleFalse.addClass('hidden');
}
else
{
$toggleTrue.addClass('hidden');
$toggleFalse.removeClass('hidden');
}
}

If you are familiar with jQuery then you probably recognize what is going on. But for those not super familiar... We are defining a function that, when called, will check the value of the Drop Down that is rendered by the Boolean attribute. If the value is "True" (this is not the "Yes" value you set when creating the attribute, this is a hard-coded value in the system), then it makes the "-true" container visible and the "-false" container hidden. Otherwise it does the reverse and sets the "-true" container to hidden and the "-false" container becomes visible instead.


Sys.Application.add_load(function () {
$control.change(UpdateToggle);
UpdateToggle();
});

This final section handles initialization. Each time the page loads it registers an "on change" handler for the Drop Down control and calls the "UpdateToggle" function we defined above. Then we explicitly call the "UpdateToggle" function so that the right container is visible at page load. The reason we do this on each page load is because if you have a control such as a Person Picker, a partial postback will happen which causes a page reload - even though it doesn't look like it.


Finally here is a screenshot of what the Form Fields configuration should look like.

ConditionalFormFields.png

That's about it. If you run this Workflow then you should see the "Extra Input 1" and "Extra Input 2" show and hide depending on your current selection of the "Need More Stuff?" drop down.


@danielhazelbaker
Shepherd Church

Prolific coding monkey and avid Overwatch player. If there is a "right way" to do something you can be sure Daniel's approach will be a "near miss".