What are Component Visibility Rules?
Component Visibility Rules allow you to control whether components or tabs are shown on the detail page.
By configuring conditions, specific components or tabs are displayed only when certain conditions are met. This reduces unnecessary interference from non-essential components and improves page viewing and operation efficiency.
When to Use Component Visibility Rules?
Component Visibility Rules are commonly used to show or hide different components, tables, or navigation blocks based on field values.
When following up on an opportunity, show the “Initiate Quotation” component only when the opportunity stage reaches Quotation, making it easier for users to fill in content.
During contract approval, show the “Initiate Signing” component only when the contract status is Pending Signature, and hide it in other statuses.
On a customer detail page, display corresponding page cards based on selected tabs such as “Basic Information”, “Sales Orders”, etc.
What Does It Look Like?
In a task management system, when a task progresses to the "Terminated" phase, the "Comments" component should be displayed on the page. This allows staff to quickly enter follow-up information and document reasons for the termination.
How to Set Up the Component Visibility Rules?
Step 1 Accessing the settings
Component visibility rules on the PC Custom Data Detail Page and Mobile Custom Detail Page are independent and do not affect each other.
1. PC Custom Data Detail Page
Enter the Custom Detail Page designer. In Page Settings >> Component Visibility Rules, click Add to configure a new rule.
If rules already exist, you can continue to add rules from the upper-left area, or edit, duplicate, or delete existing rules.
When multiple rules are added, the rule list supports drag-and-drop sorting for easier review.
Note:
Up to 50 visibility rules can be added per desktop Custom Data Detail Page.
2. Mobile Custom Detail Page
Enter the Custom Detail Page designer and switch to the Mobile tab.
In Page Settings → Component Visibility Rules, click Add to create a new rule.
If rules already exist, you can continue to add rules, or edit, duplicate, or delete existing rules.
When multiple rules are added, the rule list supports drag-and-drop sorting.
Note:
Up to 50 visibility rules can be added per Mobile Custom Detail Page.
Step 2 Configuring visibility rules
Each rule consists of two parts: Conditions (when to show) and Target Components (what to show when the conditions are met)
1. Understanding the logical relationship between multiple conditions
A component visibility rule can have multiple conditions. The logical relationship between the conditions can be set as follows:
all of: To display the field that meets all conditions.
any of: To display the field that meets any of the conditions.
2. Configuring the conditions
After setting the logical relationship of multiple conditions, set a condition for the component visibility rule. The condition consists of three parts:
Condition Field: Supports selecting main fields of the current record, submitter, submission time, update time, and workflow state fields. Subform fields are not supported.
Operator: Based on field type (e.g., equals / not equals, contains / not contains, etc.)
Filter Value: Selectable options or custom input.
When you add three or more conditions, a Delete All button appears to clear all conditions at once.
Notes:
Each rule supports up to 50 conditions.
If any condition field is deleted or a user lacks permission to access that field, the entire rule becomes invalid. When invalid, the components configured in Display Components will be hidden.
3. Selecting which components to be displayed
After configuring conditions, select the components to be displayed when the conditions are satisfied. Components remain hidden when the conditions are not met.
For Multi-Tab components, items are displayed hierarchically. You may select:
The entire multi-tab component
Specific internal tabs
Components within those tabs
Note:
When selecting a certain level, the rule applies to that level and all levels below it. For example, selecting a multi-tab component controls visibility of:
The multi-tab component itself
All tabs under it
All components inside those tabs
Step 3 Previewing the Custom Data Details Page
After configuring the Component Visibility Rules, you can preview the final effect on the Custom Data Detail Page.
Notes:
Visibility rules do not take effect while designing the detail page.
They only work in Preview and Data View modes.For components inside Multi-Tab:
If all components within a tab are hidden due to visibility rules, the tab remains visible.
If all tabs are hidden, the Multi-Tab component itself will not display.
I have finished reading. 🏆
👉I can't wait to try for myself.
👉I need more HELP in Discord Forum.