Skip to main content

Configuration Guide

Data Source Configuration​

The widget requires a properly structured data source to function effectively. You can choose between two supported data structures:

Supported Data Formats​

  1. Object with Nested Objects

    This format organizes data as key-value pairs within a parent object, where each key corresponds to a unique item identifier.

    {
      "item1": {
        "id": "item1",
        "name": "John Doe",
        "description": "Full stack developer with 5+ years experience"
      },
      "item2": {
        "id": "item2",
        "name": "Jane Smith",
        "description": "UX specialist focused on accessibility"
      }
    }

  2. Array of Objects

    This format stores items as elements within an array, ideal for collections of similar items.

    [
      {
        "id": "item1",
        "name": "John Doe",
        "description": "Full stack developer with 5+ years experience"
      },
      {
        "id": "item2",
        "name": "Jane Smith",
        "description": "UX specialist focused on accessibility"
      }
    ]

Note: Each item must contain a unique identifier in the id field to ensure proper functionality.

General Settings​

Operating Modes​

The widget provides two distinct operating modes to suit different use cases:

ModeDescriptionBest Used For
List ModeDisplays all available items in a structured, tabular formatCatalogs, directories, comprehensive displays
Comparison ModeShows items only when triggered by external identifiersProduct comparisons, selective displays

Select the appropriate mode from the Mode dropdown in the configuration panel.

Enable or disable popup modals using the Allow modals checkbox.
When enabled, users can interact with items to view additional details in a modal overlay.

Field Configuration​

The Fields section allows you to specify which properties from your data source should be displayed in the widget.

Each field can be customized with different display formats and styling options.
For detailed instructions on field configuration, see the Configuring Fields documentation.

Comparison Mode Settings​

The following settings are available only when Comparison Mode is selected:

Selection Timeout​

Controls how long (in seconds) a selected item remains visible before being automatically removed.

  • Value Range: 0-∞
  • Default: 0 (item remains until manually cleared)

No Selection Display Options​

Customize what appears when no items are selected:

Configure a text message with the following properties:

  • Custom Text: The message to display when no items are selected
  • Typography Options:
    • Font family, size, and style
    • Text color and letter spacing
    • Text shadow effects
    • Horizontal and vertical alignment
  • Background Color: Set a background color for the text container

Item Display Limits​

Set the maximum number of items that can be displayed simultaneously:

  • Value: 0-∞
  • Default: 3
  • Note: Setting a reasonable limit (3-5) is recommended for comparison views

Search Precision​

Determine how the widget matches items when receiving an identifier:

  • Exact Match: Item ID must precisely match the provided identifier
  • Partial Match: Item ID can contain the provided identifier as a substring

This can be set using the Exact search checkbox in General Settings group.

Configure the behavior of popup modals when enabled:

  • Auto-close Timeout: Set the duration (in seconds) before modals automatically close
    • Value: 0-∞
    • Default: 0 (modals remain open until manually closed)
    • Recommended: 120-300 for informational modals

Header Customization​

Customize the appearance of the widget header:

Visual Properties​

  • Background Color: Set the header's background color using built-in color picker.
  • Dimensional Settings:
    • For horizontal tables: Adjust the cell height
    • For vertical tables: Adjust the cell width

Typography Settings​

Full control over text appearance:

  • Font Family: Select from system fonts or custom font stacks
  • Font Size: Set the text size (in pixels, em, or rem)
  • Font Weight: Choose from normal, bold, or specific weight values
  • Font Color: Set the text color
  • Letter Spacing: Adjust character spacing
  • Text Shadow: Add optional shadow effects
  • Text Alignment: Control both vertical and horizontal text positioning

Field Display Configuration​

Control how individual data fields appear:

Visual Properties​

  • Background Color: Set the background color for field cells
  • Spacing: Configure the gap between items (in pixels)
  • Dimensional Settings:
    • For horizontal tables: Adjust the cell height
    • For vertical tables: Adjust the cell width
  • Padding: Set internal padding within field cells (in pixels)

Typography Settings​

Apply consistent text styling across fields:

  • Font Family: Select from system fonts or custom font stacks
  • Font Size: Set the text size
  • Font Style: Choose from normal, italic, or oblique
  • Font Color: Set the text color
  • Letter Spacing: Adjust character spacing
  • Text Shadow: Add optional shadow effects
  • Text Alignment: Control both vertical and horizontal text positioning

Table Layout Options​

Configure the overall table structure:

  • Orientation: Choose between horizontal or vertical table layouts
  • Scrollbar Color: Customize the color of scrollbars when content overflows
  • Border Properties:
    • Border color selection
    • Border width adjustment (in pixels)

Special Field Type Configurations​

Image Field Settings​

Available when image fields are defined with the image prefix.

Configure how images appear within the widget:

  • Sizing Mode: Choose between percentage or pixel-based sizing
  • Size Dimensions: Set the width and height values
  • Object Fit: Control how images fill their containers (cover, contain, fill, etc.)
  • Border Radius: Adjust corner rounding of images (in pixels or percentage)

Available when gallery fields are defined with the gallery prefix.

Control multi-image galleries:

  • Navigation: Enable or disable navigation buttons
  • Slideshow: Toggle automatic image rotation
  • Slide Timeout: Set the duration between slide transitions (in seconds)
  • Object Fit: Control how gallery images fill their containers

Icon Field Settings​

Available when icon fields are defined with the icon prefix.

Customize the appearance of icons:

  • Color: Set the icon color
  • Size: Control the icon dimensions (in pixels)
  • Style: Select from available icon styles (outlined, filled, etc.)

QR Code Field Settings​

Available when QR code fields are defined with the qr prefix.

Fine-tune generated QR codes:

  • Overlay Image: Add an optional central image to the QR code
  • Dots Customization:
    • Style selection (rounded, square, etc.)
    • Color configuration
  • Corner Elements:
    • Corner dots style and color
    • Corner square style and color
Last updated on