Conditionally Displaying Items

Conditionally Displaying Items using "hide-if" in 3B Portals

The "hide-if" feature in 3B Portals introduces dynamic control over the visibility of form items. This functionality allows items to be conditionally displayed based on the evaluation of JavaScript expressions, enhancing user experience.

1. hide-if Functionality Overview
   • Description: The "hide-if" feature enables the conditional display of portal components. Users can specify JavaScript expressions in the hide-if field of an item. The item is hidden from the user if the expression evaluates to true. This feature leverages the contactUser and record objects to allow for rich, context-aware conditions.
   • Impact: Facilitates the creation of dynamic, adaptive portals that respond to the context of user data and record information, streamlining the user interface and improving overall experience.
2. Examples of hide-if Usage
   • Implementing "hide-if" conditions can be as simple as hiding an item if no user is logged in (e.g., hide-if: contactUser?.Id == null), or more complex, such as showing an item only if a specific record is being viewed (e.g., hide-if: record?.Id == 'someIdHere').

Best Practices for Using hide-if

• Utilize Optional Chaining (?.) to prevent errors when accessing properties of potentially undefined objects.
• Keep your JavaScript expressions clear and concise to maintain readability and ease of maintenance.
• Test your hide-if conditions thoroughly to ensure they behave as expected across different user states and data records.

Implementation Considerations

• The "hide-if" feature is designed for use with JavaScript expressions and requires a basic understanding of JavaScript syntax and logic.
• Consider the user experience when designing forms with conditional visibility to avoid confusion or the appearance of missing information.