Layouts

Customize page contents
By default, Pages show the contents of the directory in the codebase they're associated with, but you can also specify a custom layout in your index.airplane.yaml file. This allows you to compose tasks together and build some simple dashboards. For example, this dashboard:
Can be configured with the following layout:
yaml
Copied
1
name: Team inspector
2
description: Inspect teams
3
icon: 🔨
4
actions:
5
- label: Create team
6
task: create_team
7
layout:
8
- type: markdown
9
value: |
10
**Be careful** - this tool has the power to create teams and revenue!
11
- type: section
12
columns:
13
- type: task
14
slug: get_total_revenue
15
autoRun: true
16
- type: task
17
slug: get_top_team
18
autoRun: true
19
- type: task
20
slug: list_teams
21
autoRun: true

Blocks

Custom layouts use a block-based model. Each entry in the layouts field corresponds to a block, and blocks are rendered in order, top to bottom. In order to show content side by side, use the section block type, which is a composite of other blocks. Configuration for each block must specify the type, as well as type-specific configuration fields. Supported block types include heading, markdown, section, and task.

Heading

Heading blocks are used to show headings of various sizes. Specify the heading text in the value field, and the heading size in the level field. level may be heading1, heading2, or heading3.
yaml
Copied
1
layout:
2
- type: heading
3
level: heading1
4
value: User Details

Markdown

Arbitrary markdown can be rendered in a markdown block. Specify the markdown content in the value field.
yaml
Copied
1
layout:
2
- type: markdown
3
value: |
4
This text is ***really important***.

Section

Use Section blocks to render content side by side. A section may contain a maximum of three blocks, specified in the columns field, and the blocks are rendered side by side at equal width.
yaml
Copied
1
layout:
2
- type: section
3
columns:
4
- type: markdown
5
value: This is shown on the left
6
- type: markdown
7
value: This is shown on the right

Task

Tasks can be put on a page by specifying the slug field and optionally its paramValues. By default, the task's parameter form is shown, with parameters pre-filled according to paramValues.
yaml
Copied
1
layout:
2
- type: task
3
slug: update_revenue
4
paramValues:
5
revenue: 50
You can configure the task to automatically run on page load by setting autoRun to true. When autoRun is true, the task loading state will be shown as it runs, and the output will be shown once it finishes, respecting the configured output display.
yaml
Copied
1
layout:
2
- type: task
3
slug: get_top_team
4
autoRun: true
When a task finished executing, a refresh button will appear in the bottom right, enabling you to re-run the task. autoRun tasks will execute again right away, whereas non-autoRun tasks will be taken back to the task form.

Reference

Heading
type
REQUIRED
"heading"

Specify that the type is heading to use this block.

value
REQUIRED
string

The heading title.

level
REQUIRED
"heading1" | "heading2" | "heading3"

The size of the heading.

Markdown
type
REQUIRED
"markdown"

Specify that the type is markdown to use this block.

value
REQUIRED
string

Markdown content.

Section
type
REQUIRED
"section"

Specify that the type is section to use this block.

columns
REQUIRED
Block[]

The block definitions that comprise this Section block. Must have 2 or 3 elements, and not contain other Section blocks.

Task
type
REQUIRED
"task"

Specify that the type is task to use this block.

slug
REQUIRED
string

The task slug.

autoRun
optional
boolean

Set this to true to run the task on page load.

paramValues
optional
object

The parameters that the task should run with if autoRun is true, or the pre-filled parameters if autoRun is false.