Conditional Component Rendering
Not every part of a page is relevant at all times. A "payment details" section is only meaningful after an invoice has been issued. An "escalate" action button only makes sense for open support tickets. An admin panel is only appropriate for users with the right role. Showing everything to everyone at all times creates clutter and confusion.
Conditional component rendering lets any component on a page be shown or hidden based on logic defined in the builder.
Three Types of Conditions
Data conditions: Show or hide based on the value of a field in the current record. Show the "Mark Shipped" button only when the order status is "Ready to Ship." Show a warning banner when a deadline field is in the past. Hide a section when a boolean field is false.
Role conditions: Show or hide based on the current user's role or permissions. Show an admin section only to administrators. Show a financial summary only to users with financial access. Restrict certain action buttons to managers.
Context conditions: Show or hide based on page context — whether a record exists (create vs. edit mode), the current environment, or the presence of a specific feature.
Conditions in the Builder
Every component in the builder has a visibility settings panel. Click on a component, open "Visibility," and add a condition. Select the condition type, choose the field or role, and specify the value or comparison. Save.
The component is immediately conditional. Preview the page in different states to verify the behavior.
Multiple conditions can be combined with AND or OR logic. A component might be visible only when the status is "Active" AND the user has the "Manager" role.
No Code, No Logic Files
Conditional visibility is configuration, not code. There are no template conditions to write, no logic files to update, no deployment required. The condition is attached to the component definition and evaluated at render time by the platform.
This means non-developers can add conditional visibility to any component. If the product manager decides a button should only appear in a certain state, they can configure that directly in the builder without requesting development work.
Always-On Alternatives
Conditional components can have fallback content — what to show when the condition is not met. A panel that shows payment details when paid might show a "payment pending" message when not. This keeps the layout stable even when the primary component is hidden, avoiding jarring layout shifts.
The Cleaner Page
Conditional rendering makes pages significantly cleaner and more appropriate for their context. Users see actions and information relevant to the current state of data and their role — nothing more, nothing less. This reduces cognitive load and makes it easier to focus on what's actionable.