Components

This page provides a list of UI components that you can use when creating apps in App Builder.

Many component properties allow you to select from provided values. If you want to use an expression for a property’s value, click </> next to the property to use the code editor. For more information on using JavaScript in App Builder, see JavaScript Expressions.

Button

Button components have the following properties.

General

Label: The text that displays on the button.
Value: string or expression

Appearance

Intent: Controls the color of the button, with colors representing the purpose of the button.
Provided values: default, danger, success, warning
Is Primary: Designed to call user attention to the most important action(s) for a given page or workflow.
Provided values: on, off
Is Borderless: Removes the border from any button. On hover, it gets a background fill.
Provided values: on, off
Is Loading: Shows a loading indicator.
Provided values: on, off
Is Disabled: Applies disabled styling and removes interactions.
Provided values: on, off
Is Visible: Determines whether the component is visible to the end-user. In edit mode, all components remain visible.
Provided values: on, off

Events

Event: Value: click
Reaction: Values: custom, set component state, trigger query, open modal, close modal, open url, download file, set state variable value
State Function: fetch
Example: See events.

For more information on events, see Events.

Inspect data

Displays property and value pairs in JSON format.

Example

To view this component in context, see the Metrics Explorer & Monitors Builder app blueprint.

Callout value

Callout value components have the following properties.

General

Label: The text that displays at the top of the component.
Value: string or expression
Value: The value that the callout highlights.
Value: string or expression
Unit: The unit associated with the value.
Value: string or expression

Style

Style: The visual style of the component.
Provided values: default, success, warning, danger, blue, purple, pink, orange, yellow, red, green, gray, vivid blue, vivid purple, vivid pink, vivid orange, vivid yellow, vivid red, vivid green
Size: Responsively sizes the metric so that it is proportional to the sizing of the value.
Provided values: sm, md, lg, xl

Appearance

Is Loading: Shows a loading indicator.
Provided values: on, off
Is Disabled: Applies disabled styling and removes interactions.
Provided values: on, off
Is Visible: Determines whether the component is visible to the end-user. In edit mode, all components remain visible.
Provided values: on, off

Inspect data

Displays property and value pairs in JSON format.

Example

To view this component in context, see the EC2 Instance Manager app blueprint.

Checkbox

Checkbox components have the following properties.

General

Label

The text that displays at the top of the component.
Value: string or expression

Options

The list of checkboxes that a user can select from. The format is an array of objects where each object consists of a label and value key-value pair. The minimum number of options is 1.
Value: expression
Example:

${[
  {
      "label": "Staging",
      "value": "staging"
  },
  {
      "label": "Production",
      "value": "production"
  }
]}

Appearance

Is Multiline: Determines whether the checkbox text should wrap onto a new line or be truncated by an ellipsis.
Provided values: on, off
Is Disabled: Applies disabled styling and removes interactions.
Provided values: on, off
Is Visible: Determines whether the component is visible to the end-user. In edit mode, all components remain visible.
Provided values: on, off

Events

Event: Value: change
Reaction: Values: custom, set component state, trigger query, open modal, close modal, download file, set state variable value
State Function: fetch
Example: See events.

For more information on events, see Events.

Inspect data

Displays property and value pairs in JSON format.

Example

To view this component in context, see the Metrics Explorer & Monitors Builder app blueprint.

Container

Container components have the following properties.

Appearance

Is Visible: Determines whether the component is visible to the end-user. In edit mode, all components remain visible.
Provided values: on, off

Inspect data

Displays property and value pairs in JSON format.

Example

To view this component in context, see the Metrics Explorer & Monitors Builder app blueprint.

Custom chart

Custom chart components have the following properties.

General

Vega Specification: A string representing a valid Vega-Lite or Vega JSON specification.

Appearance

Is Loading: Shows a loading indicator.
Provided values: on, off
Is Visible: Determines whether the component is visible to the end-user. In edit mode, all components remain visible.
Provided values: on, off

Inspect data

Displays property and value pairs in JSON format.

Example

For an example showing how to use this component, see Custom charts.

Date range picker

Date range picker components have the following properties.

General

Default timeframe: The default timeframe that the date picker displays.
Provided values: past 5 minutes, past 30 minutes, past 1 hour, past 4 hours, past 1 day

Appearance

Is Visible: Determines whether the component is visible to the end-user. In edit mode, all components remain visible.
Provided values: on, off

Events

Event: Value: change
Reaction: Values: custom, set component state, trigger query, open modal, close modal, download file
State Function: fetch
Example: See events.

For more information on events, see Events.

Inspect data

Displays property and value pairs in JSON format.

Example

To view this component in context, see the Metrics Explorer & Monitors Builder app blueprint.

File input

File input components have the following properties.

General

Accepted File Types: Determines which file types the file input component accepts.
Values: .csv, .json

Appearance

Is Visible: Determines whether the component is visible to the end-user. In edit mode, all components remain visible.
Provided values: on, off

Events

Event: Value: change
Reaction: Values: custom, set component state, trigger query, open modal, close modal, download file, set state variable value
State Function: fetch
Example: See events.

For more information on events, see Events.

Inspect data

Displays property and value pairs in JSON format.

Integration logo

Integration logo components have the following properties.

General

Integration Id: Specifies which integration logo icon to display.
Value: string or expression
Examples: datadog, amazon-s3, postgres, okta

Appearance

Horizontal Alignment: Controls the horizontal positioning of the logo within the component.
Provided values: align left, align center, align right
Vertical Alignment: Controls the vertical positioning of the logo within the component.
Provided values: align top, align center, align bottom
Is Visible: Determines whether the component is visible to the end-user. In edit mode, all components remain visible.
Provided values: on, off
Is Loading: Shows a loading indicator.
Provided values: on, off

Inspect data

Displays property and value pairs in JSON format.

Form

Form components have the following properties.

General

Title: The title of the form.
Value: string or expression
Default value: The default value that the app populates in the form. To populate a specific field, you can use JSON notation, such as {"org":"frontend"} to populate the org field with the value frontend.
Value: string or expression

Fields

Each item represents a field in the form. Fields each have one of the following types: textInput, select, textArea, or text.

Fields have some or all of the following properties depending on their field type:

Field name: The unique identifier for a field. You can use this identifier to reference the field in an expression.
Value: string or expression
Label: The label that displays above the field.
Value: string or expression
Content: The content that displays in a text field.
Value: string or expression
Options: The options available in a select field. Options must be an array of objects, with a const key for the option value and an optional title key for the option label.
Value: Each object’s label and value can be a string or expression.
You can populate each object using the GUI (default), or toggle Raw to use raw JSON input to provide the entire array of objects.
Placeholder text: The text that displays in a textInput or textArea field when no value is entered.
Value: string or expression
Is Disabled: Applies disabled styling and removes interactions.
Provided values: on, off
Is Visible: Determines whether the field is visible in the form.
Provided values: on, off
Is Required: Determines whether the field is required in order to submit the form.
Provided values: on, off

Appearance

Is Visible: Determines whether the component is visible to the end-user. In edit mode, all components remain visible.
Provided values: on, off
Is Disabled: Applies disabled styling and removes interactions.
Provided values: on, off

Events

Event: Value: submit, change, validate
Reaction: Values: custom, set component state, trigger query, open modal, close modal, download file, set state variable value
State Function: setValue
Example: form0.setValue({name: 'node-group-1'}) sets the value of the form0 component to {name: 'node-group-1'}.

For more information on events, see Events.

Inspect data

Displays property and value pairs in JSON format.

JSON input

JSON input components have the following properties.

General

Label: The text that displays at the top of the component.
Default value: The default JSON value that the component displays.

Appearance

Is Read Only: Determines whether the component is read only.
Provided values: on, off
Is Visible: Determines whether the component is visible to the end-user. In edit mode, all components remain visible.
Provided values: on, off

Events

Event: Value: change
Reaction: Values: custom, set component state, trigger query, open modal, close modal, download file, set state variable value
State Function: fetch
Example: See events.

For more information on events, see Events.

Inspect data

Displays property and value pairs in JSON format.

Modal

Modal components have the following properties.

General

Title: The title of the modal.
Value: string or expression

Appearance

Size: The scale of the modal.
Provided values: sm, md, lg
Is Visible: Determines whether the component is visible to the end-user. In edit mode, all components remain visible.
Provided values: on, off

Events

Event: Values: toggleOpen, close, open
Reaction: Values: custom, set component state, trigger query, open modal, close modal, download file, set state variable value
State Functions: fetch
Example: See events.; setIsOpen
Example: modal0.setIsOpen(true) sets the state of modal0 to open.

For more information on events, see Events.

Inspect data

Displays property and value pairs in JSON format.

Example

To view this component in context, see the Metrics Explorer & Monitors Builder app blueprint.

Number input

Number input components have the following properties.

Label: The text that displays at the top of the component.
Value: string or expression
Default value: The default value that the app populates in the input box.
Value: number or expression that evaluates to a number
Placeholder text: The text that displays when no value is entered.
Value: string or expression

Validation

Min: The minimum value the number input accepts.
Value: number or expression that evaluates to a number
Max: The maximum value the number input accepts.
Value: number or expression that evaluates to a number

Appearance

Is Disabled: Applies disabled styling and removes interactions.
Provided values: on, off
Is Visible: Determines whether the component is visible to the end-user. In edit mode, all components remain visible.
Provided values: on, off

Events

Event: Value: change
Reaction: Values: custom, set component state, trigger query, open modal, close modal, download file, set state variable value
State Functions: fetch
Example: See events.; setValue
Example: numberInput0.setValue(3) sets the value of the numberInput0 component to 3.

For more information on events, see Events.

Inspect data

Displays property and value pairs in JSON format.

Example

To view this component in context, see the ECS Task Manager app blueprint.

Radio

Radio components have the following properties.

General

Label

The text that displays at the top of the component.
Value: string or expression

Options

The list of radio button options that a user can select from. The format is an array of objects where each object consists of a label and value key-value pair.
Value: expression
Example:

${[
  {
      "label": "Staging",
      "value": "staging"
  },
  {
      "label": "Production",
      "value": "production"
  }
]}

Default value

The value that is selected when the radio loads.
Value: string or expression

Appearance

Is Disabled: Applies disabled styling and removes interactions.
Provided values: on, off
Is Visible: Determines whether the component is visible to the end-user. In edit mode, all components remain visible.
Provided values: on, off

Events

Event: Value: change
Reaction: Values: custom, set component state, trigger query, open modal, close modal, download file, set state variable value
State Functions: fetch
Example: See events.; setValue
Example: radioButtons0.setValue("production") sets the value of the radioButtons0 component to "production".

For more information on events, see Events.

Inspect data

Displays property and value pairs in JSON format.

Search

Search components have the following properties.

General

Default value: The default value that the app populates in the search box.
Value: string or expression
Placeholder text: The text that displays when no value is entered.
Value: string or expression

Appearance

Size: The scale of the search component.
Provided values: sm, md, lg
Is Loading: Shows a loading indicator.
Provided values: on, off
Is Visible: Determines whether the component is visible to the end-user. In edit mode, all components remain visible.
Provided values: on, off

Events

Event: Values: change, submit
Reaction: Values: custom, set component state, trigger query, open modal, close modal, download file, set state variable value
State Functions: fetch
Example: See events.; setValue
Example: search0.setValue("search query") sets the value of the search0 component to "search query".

For more information on events, see Events.

Inspect data

Displays property and value pairs in JSON format.

Example

To view this component in context, see the EC2 Instance Manager app blueprint.

Select

Select components have the following properties.

General

Label

The text that displays at the top of the component.
Value: string or expression

Placeholder text

The text that displays when no value is entered.
Value: string or expression

Options

The list of select options that a user can select from. The format is an array of objects where each object consists of a label and value key-value pair.
Value: expression
Example:

${[
  {
      "label": "Staging",
      "value": "staging"
  },
  {
      "label": "Production",
      "value": "production"
  }
]}

Default value

The value that is selected when the select loads.
Value: string or expression

Is Multiselect

Determines whether the user can select more than one option at a time.
Provided values: on, off

Appearance

Is Disabled: Applies disabled styling and removes interactions.
Provided values: on, off
Is Visible: Determines whether the component is visible to the end-user. In edit mode, all components remain visible.
Provided values: on, off

Events

Event: Value: change
Reaction: Values: custom, set component state, trigger query, open modal, close modal, download file, set state variable value
State Functions: fetch
Example: See events.; setValue
Example: select0.setValue("staging") sets the value of the select0 component to "staging".

For more information on events, see Events.

Inspect data

Displays property and value pairs in JSON format.

Example

To view this component in context, see the Metrics Explorer & Monitors Builder app blueprint.

Tab

Tab components have the following properties.

Tabs

A list of tab views. Use the + (plus) to add additional views.

Style

Style: The coloring style used for the tab component.
Provided values: Default, purple, pink, orange, red, green
Alignment: The way the tabs are aligned within the tab component.
Provided values: Horizontal (→), vertical (↓)
Impact: Controls whether the selected tab’s background is fully colored or only a small band at the bottom is colored.
Provided values: High, low

Appearance

Hide Tabs: Controls whether the tab markers are displayed.
Provided values: on, off
Hide Body: Controls whether the body of the tabs are displayed.
Provided values: on, off
Is Visible: Determines whether the component is visible to the end-user. In edit mode, all components remain visible.
Provided values: on, off

Events

Event: Value: change
Reaction: Values: custom, set component state, trigger query, open modal, close modal, download file, set state variable value
State Functions: fetch
Example: See events.; setTabIndex
Example: tab0.setTabIndex(0) sets the value of the tab0 component to the first tab.

For more information on events, see Events.

Inspect data

Displays property and value pairs in JSON format.

Table

Table components have the following properties.

General

Title: A title for the table. Select Markdown for custom formatting.
Value: string
Data source: The array of objects to display in a table.
Values: query, demo data, components

Columns

Each column of data from the data source is represented here and has the following properties:

Label: The text that displays at the top of the column.
Value: string or expression
Data path: JSON path to access values nested within objects and arrays of a given column.
Value: string or expression
Formatting: The type of format that the column takes on.
Provided values: string, link, status pill, date / time, markdown, tags, percent bar, number, score bar, avatar
Sortable: Determines whether the user can sort by the column.
Copyable: Determines whether the user can click to copy the contents of the column.
Provided values: on, off
Filterable: Determines whether a filter option is available for the column.
Provided values: on, off

Some columns have additional properties based on their Formatting property.

Pagination

Has summary: Determines whether to display a pagination summary directly above the table.
Provided values: on, off
Page size: Number of rows per page to display.
Value: number or expression that evaluates to a number
Total count: Total number of rows to display in the table.
Value: number or expression that evaluates to a number
Type: Determines the type of pagination.
Provided values: client side, server side

Sorting

Select the column and direction for default table sorting.
Column: The column to sort by.
Value: column name
Direction: The direction to sort.
Provided values: ascending, descending

Row actions

Adding a row action adds an Actions column to the table, which contains user-defined action buttons. Rows can have multiple actions. Actions have the following properties:

Label: The text that displays on the action button.
Value: string or expression
Primary: Designed to call user attention to the most important action(s) for a given page or workflow.
Provided values: on, off
Borderless: Removes the border from any button. On hover, it gets a background fill.
Provided values: on, off
Disabled: Applies disabled styling and removes interactions.
Provided values: on, off
Level: Controls the color of the button according to its intent.
Provided values: default, danger, success, warning
Reactions: The reactions the button triggers. A button can have multiple reactions.
Provided values: download file, open modal, close modal, open side panel, close side panel, open URL, set component state, set state variable value, toast notification, trigger action, custom
Some reaction types have additional properties.
State Function: fetch
Example: See events.

Appearance

Scrollable: Determines what ways the table is scrollable in.
Provided values: both, vertical
Is Loading: Shows a loading indicator.
Provided values: on, off
Has text wrapping: Determines whether cell text wraps.
Provided values: on, off
Has subrows: Enables subrows for each row. Include the subRows property in the data source.
Provided values: on, off
Is searchable: Determines whether to add a search bar to the table.
Provided values: on, off
Show sort options: Adds a Sort button to the table that gives users sorting options.
Provided values: on, off
Show column options: Adds a Columns button to the table for displaying, hiding, or reorganizing table columns.
Provided values: on, off
Has date range filter: Adds a date range filter to the table.
Provided values: on, off
Is Visible: Determines whether the component is visible to the end-user. In edit mode, all components remain visible.
Provided values: on, off

Events

Event

Values: pageChange, tableRowClick

Reaction

Values: download file, open modal, close modal, open side panel, close side panel, set component state, set state variable value, toast notification, trigger action, custom

State Functions

fetch
Example: See events.

setSelectedRow
Examples:

table0.setSelectedRow(0) sets the selectedRow property of table0 to the first row.
table0.setSelectedRow(null) clears the selectedRow property.

setPageIndex
Example: table0.setPageIndex(0) sets the pageIndex property of table0 to the first page.

For more information on events, see Events.

Inspect data

Displays property and value pairs in JSON format.

Example

To view this component in context, see the Metrics Explorer & Monitors Builder app blueprint.

For examples showing how to use advanced features of tables, see Tables.

Text

Text components have the following properties.

General

Content: The content that the component displays.
Value: string or expression
Content type: Determines how to render the text. When Markdown is selected, the text component supports basic Markdown syntax, including images that you host elsewhere.
Provided values: plain text, Markdown

Appearance

Text alignment: Determines the horizontal alignment of the text within the component.
Provided values: align left, align center, align right
Vertical alignment: Determines the vertical alignment of the text within the component.
Provided values: align top, align center, align bottom
Is Visible: Determines whether the component is visible to the end-user. In edit mode, all components remain visible.
Provided values: on, off

Inspect data

Displays property and value pairs in JSON format.

Relationships

Displays data dependencies between table data and components in the app.

Example

To view this component in context, see the Metrics Explorer & Monitors Builder app blueprint.

Text area

Text area components have the following properties.

Label: The text that displays at the top of the component.
Value: string or expression
Default value: The value that is selected when the text area loads.
Value: string or expression
Placeholder text: The text that displays when no value is entered.
Value: string or expression

Appearance

Is Disabled: Applies disabled styling and removes interactions.
Provided values: on, off
Is Visible: Determines whether the component is visible to the end-user. In edit mode, all components remain visible.
Provided values: on, off

Events

Event: Values: change, submit
Reaction: Values: custom, set component state, trigger query, open modal, close modal, download file, set state variable value
State Functions: fetch
Example: See events.; setValue
Example: textArea0.setValue("text") sets the value of the textArea0 component to "text".

For more information on events, see Events.

Inspect data

Displays property and value pairs in JSON format.

Text input

Text input components have the following properties.

Label: The text that displays at the top of the component.
Value: string or expression
Default value: The value that is selected when the text input loads.
Value: string or expression
Placeholder text: The text that displays when no value is entered.
Value: string or expression

Appearance

Is Disabled: Applies disabled styling and removes interactions.
Provided values: on, off
Is Visible: Determines whether the component is visible to the end-user. In edit mode, all components remain visible.
Provided values: on, off

Events

Event: Values: change, submit
Reaction: Values: custom, set component state, trigger query, open modal, close modal, download file, set state variable value
State Functions: fetch
Example: See events.; setValue
Example: textInput0.setValue("text") sets the value of the textInput0 component to "text".

For more information on events, see Events.

Inspect data

Displays property and value pairs in JSON format.

Example

To view this component in context, see the Metrics Explorer & Monitors Builder app blueprint.