Heading (ALPHA)
Responsive Widgets are in alpha and available by invitation only on Business and Enterprise plans. Behavior and properties may change. To request access, open a support ticket and name the feature Responsive Widgets (ALPHA).
The Heading widget shows a title or a section heading. It has the same properties as the Paragraph widget, but it starts with a larger font size.
Widget type: WDS_HEADING_WIDGET
Content properties
These properties appear in the Content tab of the property pane.
General
Text string
Sets the text the widget shows. Default: Header. You can bind data to it, for example {{AnvilTable1.selectedRow.name}}.
Line clamp (max lines) number
Sets the largest number of lines the widget shows. Text past that line is cut off. When you set a line clamp, users can hover over the text to see all of it. The value must be 1 or more. Leave it empty to show all lines.
Visible boolean
Controls whether the widget is visible. Default: on.
Animate loading boolean
Controls the loading animation of the widget. Default: on.
Style properties
These properties appear in the Style tab of the property pane.
General
Font size string
Sets the size of the text. Options: Body, Subtitle, Title, Heading (default).
Values for code: body, subtitle, title, heading.
When you pick Body in the property pane, the widget turns into a Paragraph widget.
Text formatting
Text color string
Sets a custom color for the text. This overrides the theme color.
Alignment string
Sets the horizontal alignment of the text. Options: left (default), center, right.
Values for code: left, center, right.
Emphasis string
Makes the text bold, italic, or both.
Values for code: bold, italic. To use both, include both words, for example bold,italic.
Reference properties
Reference properties let you read the widget's state in bindings and code, for example {{Heading1.isVisible}}. You cannot set them directly.
text string
The text the widget shows.
Example:
{{Heading1.text}}
value string
The same value as text.
Example:
{{Heading1.value}}
isVisible boolean
Shows whether the widget is visible.
Example:
{{Heading1.isVisible}}
Methods
Methods let you change the widget's properties from code, for example in a JS Object.
setVisibility (param: boolean): Promise
Shows or hides the widget.
Example:
Heading1.setVisibility(false)
setText (param: string): Promise
Sets the text the widget shows.
Example:
Heading1.setText("Monthly report")
setTextColor (param: string): Promise
Sets the text color.
Example:
Heading1.setTextColor("#1570ef")
setDisabled (param: boolean): Promise
Sets the isDisabled value. The Heading widget has no Disabled property and does not change how it looks or works.
Example:
Heading1.setDisabled(true)
setRequired (param: boolean): Promise
Sets the isRequired value. The Heading widget has no Required property and does not change how it looks or works.
Example:
Heading1.setRequired(true)