​​How to show and hide controls based on specific action?

Last Update: October 26, 2017

Here are the steps on how to show and hide Panel and Tab controls based on the value selected from a DropDownList control. The design for that will look like the following screenshot.
How to show and hide controls based on specific action1.jpg
We will use in this use case two Absolute Panels and one Relative Panels to let the form shifts up and down smoothly and automatically. In the other hand, if you select the Tab from the dropdown list to be shown, the other controls will be hidden and the shown controls will be shifted to occupy the empty area in the form.

  1. Open the form in design mode.
  2. Add a Panel control and set the Layout property to Relative.
  3. Add a DropdownList control. Select the control and under the Data Source property choose Unmapped Source and add the following values: [Other Controls] and [Tab] then click on Apply button. The location of this control should be outside the Relative Panel.
    How to show and hide controls based on specific action2.jpg
  4. Add 2 Panel controls inside the Relative Panel and set their Layout property to Absolute.
  5. Switch the Hidden property for both Absolute Panels to ON.
  6. In the first Absolut Panel, adds any controls you want, for example, you can add one Label and one TextBox controls.
  7. In the second Absolute Panel add a Tab control.
  8. Select the first Absolut Panel control and click on the add icon under Rules pane to add a new rule to this control.
  9. Follow the following steps:
    A. Change the Rule Name as desired.
    B. Change the Rule Type to Formatting.
    C. Change Event Type to onChange. Leave "Execute if event triggered only on this control" unchecked.
    D. In the Condition section, type the following:
    drpSelectToShow == 'Other Controls'
    E. Check Visible checkbox and set it is value to Yes.
    F. Click on the Save button to save the rule.
    Note: You can use Assistance Panel to help you adding functions and related parameters, form variables and form controls to Conditions and/or Actions sections.
  10. Select the second Absolute Panel control and press on add icon under Rules pane to add a new rule to this control.
  11. Follow the following steps:
    A. Change the Rule Name as desired.
    B. Change the Rule Type to Formatting.
    C. Change Event Type to onChange. Leave "Execute if event triggered only on this control" unchecked.
    D. In the Condition section, type the following:
    drpSelectToShow == 'Tab'
    E. Check Visible checkbox and set it is value to Yes.
    F. Click on the Save button to save the rule.

Related Resources:
These resources may not reflect the same exact case steps.
How to auto-shifting Panels control in the form?