Breadcrumbs

Reference Popup

The Reference Popup is a specialized version of the standard Popup component. While it shares the same structural logic, its content is dynamically driven by a specific configuration file.

Add Reference Popup

You can add a Reference Popup from the Left panel.

image-20260219-131736.png

Overview

This component is essentially a Popup that displays bibliographic references, citations, or legal footnotes. Instead of manual text entry on each slide, it pulls data directly from a centralized reference.json file.

Prerequisites

  • Data Configuration: To display content, the reference.json file must be populated within the Shared Resources of the Design System.

  • UI Limitation: There is currently no graphical interface for editing the reference.json file; it must be updated manually in the source code.

  • Interaction Programming: This component is activated just like a standard popup via the "Add interaction" function on a trigger element.

How to Use the Reference Popup

Step 1: Adding the Component

Select the Reference Popup from the components list and place it on your slide. It will automatically include the standard popup hierarchy (Backdrop, Overlay, and Close Button).

Step 2: Content Mapping

Unlike the standard Popup, you do not need to manually add text elements. The component is pre-configured to render the text strings defined in the reference.json file.

Step 3: Programming the Trigger

Refer to the Popup Component Documentation for detailed instructions on setting up the "Show" or "Toggle" interactions.

Key Features & Benefits

  • Centralized Management: Updating the reference.json file once updates references across the entire project.

  • Consistency: Ensures all citations follow the same visual style and layout.

  • Efficiency: Reduces the risk of manual errors on individual slides.

Best Practices

  • Global Access: Since references are often required globally, consider placing the trigger and the Reference Popup within a Slide Fragment.

  • Verification: Always verify in Preview Mode that the popup correctly pulls the latest data from the JSON file after any changes.