Form Component - Contingent Actions Video at Inductive University

Transcript

(open in window)

[00:00] One of the benefits of using the form component is that it gives us access to contingent actions within forms. Contingent actions will show hide, enable, or disable certain widgets in a form based on information a user enters into another part of the form. For example, I have a toggle switch we added to this form in a previous lesson. I'm currently in preview mode and my toggle switch is set to true to indicate that training sessions have been initiated. You can see here that there are two additional widgets below our toggle, a checkbox widget and a numeric widget. Watch what happens when I turn my toggle off... The checkbox widget is grayed out and the numeric widget disappears from view altogether. Now, if I turn the toggle back on, you can see that all parts of the form are visible and functional. So, our two contingent action widgets depend on the input from the toggle switch to determine how they'll appear in the view.

[01:03] If the toggle switch is set to true, then the check boxes will be enabled and the numeric field will be visible. If the toggle switch is set to false, then the check boxes will be disabled and the numeric field will be hidden from view. The way that we create this contingent functionality is very simple. I'll jump out of preview mode and switch over to this other sample view. In this view, I put the basic widgets in place for the check boxes and the numeric data entry field, but I haven't created the contingent action functionality yet. Let's dig down into the checkbox widget first. We followed a similar pattern in setting up this widget to what you may have seen in other lessons with an id, a widget type, additional options to display more than one checkbox, and adjusting labels as needed. To make this widget's action contingent on what happens with our toggle switch, we need to focus on this property -- enabledWhen First, I need to add an object member using this plus sign. I'll choose properties, then ID, and I need to connect it to the ID of the toggle widget that will control the behavior of this checkbox widget.

[02:10] I'll add that ID, and then I can add another object member with properties and value. There, I'll put in true. What this means is that when the toggle is switched to the on position, I want this checkbox widget to be enabled and clickable. If the toggle is turned off, I want the checkbox to show as grayed out and disabled. Let's take a look at our numeric field next. I'll expand it in the Perspective property editor so we can see how it's put together at its most basic level. Our target is another special property that we can use to create a second contingent action -- visibleWhen. This property will allow us to switch between a visible and a hidden state for our numeric field based on the position of the toggle switch. We'll use the same basic process to set it up with object members, starting with the ID of the controlling widget, and then a value of true. In this case, if the toggle is switched on, this numeric widget will be visible, and if the toggle is off, the numeric widget will be hidden.

[03:12] Let's check it out in preview mode again and see our work in action. And our changes work exactly as expected. Whether you use them to manage space, provide better focus in a form, or just add interactivity to the user experience, the form component's Contingent Actions are a valuable and powerful tool within the Perspective ecosystem.

One of the benefits of using the form component is that it gives us access to contingent actions within forms. Contingent actions will show hide, enable, or disable certain widgets in a form based on information a user enters into another part of the form. For example, I have a toggle switch we added to this form in a previous lesson. I'm currently in preview mode and my toggle switch is set to true to indicate that training sessions have been initiated. You can see here that there are two additional widgets below our toggle, a checkbox widget and a numeric widget. Watch what happens when I turn my toggle off... The checkbox widget is grayed out and the numeric widget disappears from view altogether. Now, if I turn the toggle back on, you can see that all parts of the form are visible and functional. So, our two contingent action widgets depend on the input from the toggle switch to determine how they'll appear in the view.

[01:03]          If the toggle switch is set to true, then the check boxes will be enabled and the numeric field will be visible. If the toggle switch is set to false, then the check boxes will be disabled and the numeric field will be hidden from view. The way that we create this contingent functionality is very simple. I'll jump out of preview mode and switch over to this other sample view. In this view, I put the basic widgets in place for the check boxes and the numeric data entry field, but I haven't created the contingent action functionality yet. Let's dig down into the checkbox widget first. We followed a similar pattern in setting up this widget to what you may have seen in other lessons with an id, a widget type, additional options to display more than one checkbox, and adjusting labels as needed. To make this widget's action contingent on what happens with our toggle switch, we need to focus on this property -- enabledWhen First, I need to add an object member using this plus sign. I'll choose properties, then ID, and I need to connect it to the ID of the toggle widget that will control the behavior of this checkbox widget.

[02:10]          I'll add that ID, and then I can add another object member with properties and value. There, I'll put in true. What this means is that when the toggle is switched to the on position, I want this checkbox widget to be enabled and clickable. If the toggle is turned off, I want the checkbox to show as grayed out and disabled. Let's take a look at our numeric field next. I'll expand it in the Perspective property editor so we can see how it's put together at its most basic level. Our target is another special property that we can use to create a second contingent action -- visibleWhen. This property will allow us to switch between a visible and a hidden state for our numeric field based on the position of the toggle switch. We'll use the same basic process to set it up with object members, starting with the ID of the controlling widget, and then a value of true. In this case, if the toggle is switched on, this numeric widget will be visible, and if the toggle is off, the numeric widget will be hidden.

[03:12]          Let's check it out in preview mode again and see our work in action. And our changes work exactly as expected. Whether you use them to manage space, provide better focus in a form, or just add interactivity to the user experience, the form component's Contingent Actions are a valuable and powerful tool within the Perspective ecosystem.

We are experiencing playback issues from our video hosting provider. Please check back shortly.

LESSON LIST