Visual Layout Creator

This guide introduces Visual Layouts, a powerful way to design and structure outputs from skills in Skill Studio using a flexible, JSON-based system. It replaces the legacy XML-based layout engine, offering significantly more developer support, customization, and maintainability.

Audience:
Skill developers and designers working in Skill Studio who need to create or manage visual outputs like charts, tables, and insights.

Prerequisites:

• Access to Skill Studio with the Visual Layouts permission enabled.
• Familiarity with basic HTML/CSS/JSON concepts.
• Optional: Understanding of Highcharts and data visualization principles.

Main Content

1. Motivation Behind Visual Layouts

Previously, output visuals were authored using an XML-based system with HTML content blocks (e.g., charts, insights, tables). While powerful, this system had drawbacks:

• Skill authors had to write and maintain raw HTML.
• There was no standardization or support for reuse.
• Developer support was limited due to non-standard implementations.

Visual Layouts address these challenges by:

• Enabling pixel-perfect, brand-matched outputs.
• Providing reusable components with declarative configuration.
• Supporting both flexibility and maintainability via JSON schema.

2. Accessing Visual Layouts

1. Open Skill Studio.
2. Navigate to the Visual Layouts icon at the bottom left.
3. Ensure you have the Visual Layouts user right enabled (Admin users see this by default).

3. Canvas vs. Document Layouts

Tip: Use Canvas for presentations; use Document for responsive, everyday outputs.

4. Creating a New Layout

1. Click the "+" button to create a new layout.
2. Choose either Canvas or Document.
3. Use the component panel (bottom-left) to add:
   • Headers
   • Tables
   • Charts
   • Markdown blocks
4. Customize each component via the Properties panel.

5. Containers: Structuring Your Layout

There are two types of containers:

• Flex Container: Arranges items using flexbox principles.
• Card Container: Grid layout with adjustable rows/columns.

Use containers to:

• Group related elements.
• Align items horizontally or vertically.
• Apply shared styles (e.g., borders, padding, shadows).

6. Customizing Components

Each component supports:

• A unique Properties tab for easy customization.
• An Inspect tab to directly edit the component’s JSON.

Advanced customizations (e.g., Highcharts options not in UI) can be added via the Inspect tab.

Example:

{
  "chartOptions": {
    "yAxis": {
      "gridLineColor": "#FF8888"
    }
  }
}