Use Conditions to Show or Hide Components

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

Let's say you have a form for users to submit expense reports with fields like Country and Amount (in US currency). 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-bind-if component (available as If in the Components palette).

When you add an oj-bind-if component, you also set the conditions under which the component should be displayed by entering an expression in its Test property in the Properties pane. 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.

In our example, we’ll build an expression using variables 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-bind-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-bind-if component to control when a component is displayed in a page:

1. In Design mode, locate the component that you want to control dynamically.
2. Right-click the component on the canvas or in the Structure view and select Surround > If in the pop-up menu. In our example, we’ll select the two oj-input-number components for the Exchange Rate and Amount in USD fields that we want to control dynamically.
   
   

   
   Description of the illustration page-designer-surround-if.png

   
   

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

3. Select the Bind If component on the canvas or in the Structure view and open the Properties pane.

   You’ll see the Test property which you use to set the condition. The default expression is [[True]].

   
   

   
   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 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 follows:

   [[ $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 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 or in the component's popup menu in the Structure view or on the canvas.

6. Test your application in Live mode. Here’s what our example form looks like with dynamic UI controls enabled: