5 min readUpdated Mar 2, 2026

PopupEditorBuilder

Overview

The PopupEditorBuilder is a component of the Vantage analytics and data platform that enables users to create and configure popup layouts for displaying content dynamically. With its user-friendly interface, users can add, modify, and organize various elements within the popup, enhancing the interactivity of their applications. This component is designed to cater to a wide variety of use cases, allowing for a customizable experience that suits the needs of different business contexts.

Purpose

The purpose of the PopupEditorBuilder is to facilitate the design and management of popups that can display data, information, or action buttons in a structured manner. It allows for customization of layout, content, and element properties, offering users the flexibility to create richly interactive experiences.

Settings

The PopupEditorBuilder component accepts various settings that influence its behavior and appearance. Below is a detailed breakdown of each setting:

Global Configuration Settings

  1. Title

    • Input Type: String
    • Description: This setting defines the main title displayed at the top of the popup. Changing this value updates the header visual. Default value is an empty string.
    • Default Value: ''

  2. Subtitle

    • Input Type: String
    • Description: The subtitle is an additional text element below the title. It provides users with more context about the popup's purpose or content. Default value is an empty string.
    • Default Value: ''

  3. Footer Text

    • Input Type: String
    • Description: This is the text displayed at the bottom of the popup, often used for disclaimers, credits, or additional information. Modifying this text will change what is displayed in the footer area. Default value is an empty string.
    • Default Value: ''

  4. Layout

    • Input Type: Object
    • Description: This setting contains the layout configuration for the popup. It determines the structure of how elements are arranged within the popup, which can either be a 'standard' layout or tabbed layout with multiple tabs. Default structure includes a basic layout with one default tab.
    • Default Value: { type: 'standard', tabs: [{ id: '1', title: 'Tab 1' }] }

  5. Section

    • Input Type: Object
    • Description: This setting controls the visibility of the header and its style. It allows users to decide if they want a header displayed and which style it should utilize (e.g., default or custom styles). Default shows the header with a standard style.
    • Default Value: { showHeader: true, style: 'default', icon: 'Layout' }

  6. Formatting

    • Input Type: Object
    • Description: This setting specifies the visual formatting of the popup, particularly the border style. Altering this setting can change the look and feel of the popup's borders, potentially impacting visual appeal. Default value sets a standard border style.
    • Default Value: { borderStyle: 'default' }

  7. Background Color

    • Input Type: String
    • Description: This setting allows users to choose the background color of the popup. It can accept any valid CSS color format (e.g., '#ff0000'). The behavior of the popup may respond to changing this color, affecting visibility and layout based on the chosen color. Default value is transparent if not set.
    • Default Value: '' (transparent)

Data Expectations

The PopupEditorBuilder expects to receive the following data through its props:

Use Cases & Examples

Use Cases

  1. Dynamic Content Display: A financial dashboard can utilize the PopupEditorBuilder to create popups that dynamically show user-specific data or reports, allowing for custom filtering and sorting of information.

  2. Contextual Information: In a customer support platform, this component can be used to provide contextual help or explanatory text when users hover over certain elements, presenting insights in a more engaging manner.

  3. Customizable User Interactions: An e-commerce site could leverage this component to facilitate user interactions with product information, allowing for customized content within modals or popups.

Example Configuration

Use Case: Dynamic Content Display for Financial Reports

To configure the PopupEditorBuilder for a financial dashboard that shows context-specific data, the component can be set up with the following values:

javascript
const initialContent = [
    { id: '1', type: 'text', content: 'Yearly Revenue Overview', label: 'Revenue Text', config: {} },
    { id: '2', type: 'chart', content: '', label: 'Revenue Chart', config: {} }
];

const initialConfig = {
    title: 'Financial Dashboard',
    subtitle: 'Yearly Insights',
    footerText: 'Source: Company Data',
    layout: { type: 'tabbed', tabs: [{ id: '1', title: 'Overview' }, { id: '2', title: 'Details' }] },
    section: { showHeader: true, style: 'default', icon: 'Chart' },
    formatting: { borderStyle: 'rounded' },
    backgroundColor: '#f0f0f0'
};

<PopupEditorBuilder 
    initialContent={initialContent} 
    initialConfig={initialConfig} 
    workflows={[]} 
    onSave={(elements, config) => {
        console.log('Saved Elements:', elements);
        console.log('Configuration:', config);
    }} 
    onClose={() => console.log('Popup closed')} 
/>

In this configuration:

This setup ensures that users can visualize essential financial data effectively while allowing them the flexibility to modify it based on their needs.