1. Building Responsive Applications with Visual Builder Studio
  2. Develop Applications
  3. Work With Components
  4. Add Components to Pages
  5. Use Conditions to Show or Hide Components

Use Conditions to Show or Hide Components

You can use an oj-if component to conditionally show or hide UI components in your visual application. Use oj-if to surround other components and set conditions to determine whether the components should be displayed on a page.

Note:

The oj-if component provides functionality similar to oj-bind-if, except that where the oj-bind-if element is not removed from the DOM after bindings are applied, oj-if stays in the DOM and can therefore directly be used as the slot content of a custom element. If you want to conditionally render the content of a slot or if you want the element to stay in the DOM, oj-if is recommended over oj-bind-if.

To use oj-if in your pages, your visual app requires JET 17.x or later.

Here's how you can use oj-if to conditionally display its contents: Let's say you have a form for users to submit expense reports with fields like Country and Amount (in US Dollars). When users from countries other than the United States submit expenses, we want to show additional fields like Exchange Rate and Amount in USD. In other words, we want these fields to show only when the country selected is not United States. You can do this by surrounding these fields in an oj-if component (available as If in the Components palette).

When you add an oj-if component, you also set the conditions under which the component should be displayed by adding an expression in its Test property. For example, you can use an expression that evaluates if the value of a page variable does not equal a predefined value. The surrounded content is displayed if the values are not equal (the expression is true), and hidden if the values are equal (the expression is false).

In our example, we'll build an expression to show the surrounded content when the value selected for Country is something other than United States and to hide these fields when the selected Country is United States.

You can also use oj-if to dynamically control what components a user sees based on the user's role, for example, to hide buttons or navigational elements, by using $application.user.roles.role_name in the expression. You can set restrictions on entire pages, or just on certain components in a page. The visibility of components based on roles is only enforced on the client, and the value of the role could be changed in the client. For this reason, in addition to hiding components, you should also use role-based security to secure the application and the data in a page.

To use an oj-if component to control when a component is displayed in a page:

  1. In Design view, locate the component that you want to control dynamically, for example, Input Number for the Exchange Rate field and Input Text for the Amount in USD field.
  2. Right-click the component on the canvas or in the Structure view and select Surround > If from the context menu:
    Description of page-designer-surround-if.png follows
    Description of the illustration page-designer-surround-if.png

    In the Structure view, you'll see the components surrounded by an If component. (In Code view, you'll see oj-if.)
    Description of page-designer-pagestructure-bind.png follows
    Description of the illustration page-designer-pagestructure-bind.png

  3. Select the If component in the Structure view and open the Properties pane to see the Test property which you use to set the condition. The default expression is [[True]].
    Description of page-designer-bind-override.png follows
    Description of the illustration page-designer-bind-override.png

  4. Enter the condition that controls the component’s visibility. You can enter the condition in the Test field, or use the Expression Editor to build an expression using available variables, as shown here:
    Description of page-designer-expression-editor.png follows
    Description of the illustration page-designer-expression-editor.png

    In our example where the country variable is of type number, the above expression is used to hide the Exchange Rate and Amount in USD fields when the Country field's value is United States. If you want those fields to be hidden even when the Country field is empty, you can extend your expression as: 
    [[ $variables.expenseReport.country !== 1 &&
    $variables.expenseReport.country]]

    If the variable type is not a number, remember to use quotation marks (' ') around the value in the Expression Editor.

  5. Optional: In the Properties pane, use the Temporary Override property to temporarily set the result of the test condition to True or False. For example, when designing your page, if some content is hidden on the canvas because the test condition's result is False, you can set Temporary Override to True so the content is visible on the canvas, or select Off to temporarily disable the test. This setting is temporary and will revert to Off when you reload the page.

    You can set the Temporary Override in the Properties pane, in the component's context menu on the canvas, or in the Structure view.

  6. Test your application in Live view. Here’s what our example form looks like with dynamic UI controls enabled:
    Description of page-designer-bind-example.png follows
    Description of the illustration page-designer-bind-example.png