Visual Layouts

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.

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.

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).

Canvas vs. Document Layouts

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

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.

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).

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"
    }
  }
}

 

Adding Custom Components to the Component Library

You can now easily create and reuse custom components for visual layouts directly within the Component Library.

How to Add a New Component

1. Open any existing component in the Component Library.
2. Click the “+” icon to add a new component.
3. Design your component using a combination of text, color, and other layout elements.
4. Once your component is configured, save it to the library.

Example Use Case

If your organization uses a standard header for all visual layouts, you can build the header once — including branding elements such as colors and text — and save it as a reusable component.

After saving, this new component will automatically appear in the Component Library list, making it easy to add it to any future visual layout without rebuilding it from scratch.

Why This Matters

• Consistency: Maintain a unified look across all layouts.
• Efficiency: Reuse standard elements without recreating them.
• Flexibility: Combine multiple elements into a single, easy-to-use component.