Configuring Dependency for a Web Component

Overview

Dependencies for web components allow organisers to control when a component is displayed or behaves in a specific way based on defined conditions. By configuring dependencies in the Web Builder, you can ensure that components appear only when relevant criteria are met, improving the user experience and maintaining clean, dynamic layouts.

This article explains how to view, create, update, and manage dependencies for a component within the Web Builder.

Step-by-Step Approach

1. View available dependencies for a component

• On the Event Dashboard, go to Contents module.
• Select Pages sub menu.
• Add or edit any page.
• Drag and drop the required web component.
• Navigate to Component Settings.
• Locate the Dependency select field.
• The select field displays a list of all existing dependencies available for selection.

2. Select a dependency for a web component

• Choose a dependency from the list.
• The selected dependency is immediately applied to the web component.
• The component’s visibility or behaviour now follows the configured dependency conditions.

3. View all current dependencies

• On the Web Builder, click the Dependency button.
• A pop-up opens displaying all existing dependencies.
• Each dependency is listed with its name and configuration details.

4. Add a new dependency

• On the Dependency pop-up, click Add Dependency.
• The Content Module pop-up opens.
• Define the dependency details and conditions.
• Save the dependency.
• The newly created dependency becomes available in the Dependency select field.

5. Add, update, or remove dependency conditions

• While creating or editing a dependency, manage its conditions in the Add New Dependency Filters pop-up.
• You can:
• Name the dependency
• Add new dependency conditions
• Update existing conditions
• Remove unnecessary conditions
• Save the dependency to apply the updated condition logic.

6. Update an existing dependency

• On the Dependencies listing, go to More Options (⋮) for the selected dependency and click View or Edit.
• Update the dependency details or conditions in the Add New Dependency Filters pop-up.
• Save your changes.
• The updated dependency is applied wherever it is used.

7. Remove a dependency

• On the Dependencies listing, go to More Options (⋮) for the selected dependency and click Delete.
• The dependency is removed and no longer available for selection.

Result

Once configured, dependencies ensure that web components dynamically respond to user selections or data conditions, creating a more targeted and intuitive experience in the Web Builder.