Skip to content

Story Board Page Configuration

User Guide: Story Board Page Configuration

This guide provides step-by-step instructions for configuring pages in StoryBoard AI. It details how users can set up sections, manage content interactions, and utilize various configuration tabs effectively.

1. Accessing Page Configuration

  • Navigation: From the main menu, go to Setup : Story Boards > Story Board All Pages.
  • Click on the cogwheel icon in any section to open the configuration window.
  • The configuration window contains six tabs: Component, Block, Container, Context Wrapper, Component Emitter, and Component Listener.

2. Component Tab (Primary Configuration for a Section)

  • This is the main configuration tab where the user selects a Component Type and provides configuration values.
  • Component Type: Select from various options such as charts, tables, KPIs, images, narratives, etc. The available fields change based on the selection.
  • Section Title: This is a user-friendly name for referencing the section in global parameters and collaboration.

3. Block Tab (Titles & Descriptions)

  • This tab allows adding titles and descriptions to a section.
  • Block Title: Formatted text to display as the section’s title.
  • Block Description: Optional additional description text.
  • Overlay Title & Configuration: If a background image is used, overlay text can be configured with position, size, opacity, and margins.

4. Container Tab (Styling & Appearance)

  • This tab controls the appearance of the container within the section.
  • Options include:
  • Adding/removing borders.
  • Adjusting padding and alignment.
  • Selecting background color or image.
  • Setting image transparency.
  • Applying shadow effects and rounded corners.

5. Context Wrapper Tab (Enhanced Contextual Details)

  • Wrapper: This enables a title/description overlay over content (e.g., a chart or table).
  • Context Modal: If enabled, users can create groups of contextual information such as:
  • Drill-down data.
  • Definitions or additional insights.
  • StoryBoard Pages as reference tabs.
  • Tabs & Pages: Users can add multiple tabs and associate StoryBoard Pages for contextual details.

6. Component Emitter (Interacting Sections - Publisher)

  • Purpose: Defines a section that sets values for other sections to react.
  • Emitter Types:
  • onClick: Value is set when the user clicks on a specific element.
  • onChange: Value is set when the data changes due to user action, filters, or other interactions.
  • Configuration Options:
  • Section Identifier: Unique name to identify the emitter.
  • Capture Method:
    • Full Object (entire row data).
    • Specific Key (targeted data from the row).
  • Raw Value & Value Key Name: Defines user-friendly names for captured values.
  • Multiple Actions: Users can define different actions and capture multiple values.

7. Component Listener (Interacting Sections - Subscriber)

  • Purpose: Configures a section to listen and react to changes from an Emitter.
  • Listener Type: Currently supports onChange (reacting to value changes).
  • Configuration Options:
  • Section Identifier: Matches the identifier set in the Emitter to link the sections.
  • Target Variable: Leave blank (reserved for future functionality).
  • Construct Object: Set to True to enable data mapping.
  • Object Key: Specifies the field in the target section that will be updated.
  • State Reference: Maps the target field to the value emitted by the Emitter (case-sensitive).

8. Best Practices for Page Configuration

  • Primary Setup Focus: Most configuration is done in the Component Tab.
  • Title & Description: Can be added via Block Tab or Context Wrapper.
  • Emitter & Listener Usage:
  • Only for sections interacting within the same page.
  • Ensure consistent Section Identifiers between Emitters and Listeners.
  • Use Clear Naming Conventions: Avoid generic names like test or section1 for clarity.

9. Summary

  • Component Tab: Define core content.
  • Block Tab: Add titles/descriptions.
  • Container Tab: Style the container.
  • Context Wrapper: Enable overlays and contextual information.
  • Emitter & Listener: Configure section interactions (if required).

This guide ensures seamless configuration of StoryBoard Pages, allowing users to create interactive, visually appealing, and highly functional reports.