Last modified: Nov 10, 2024

Common Component Properties

Description of common property definitions used by components

The following list is autogenerated from this JSON schema file and provides a brief description of all the available common component properties.

Type: string
Description: The HTML autocomplete attribute lets web developers specify what if any permission the user agent has to provide automated assistance in filling out form field values, as well as guidance to the browser as to the type of information expected in the field.
Enum: [on, off, name, honorific-prefix, given-name, additional-name, family-name, honorific-suffix, nickname, email, username, new-password, current-password, one-time-code, organization-title, organization, street-address, address-line1, address-line2, address-line3, address-level4, address-level3, address-level2, address-level1, country, country-name, postal-code, cc-name, cc-given-name, cc-additional-name, cc-family-name, cc-number, cc-exp, cc-exp-month, cc-exp-year, cc-csc, cc-type, transaction-currency, transaction-amount, language, bday, bday-day, bday-month, bday-year, sex, tel, tel-country-code, tel-national, tel-area-code, tel-local, tel-extension, url, photo]
Type: object
Description: Data model bindings for component
Required: simpleBinding

PropertyTypeDescription

simpleBinding

stringData model binding for components connection to a single field in the data model
Type: object
Description: Text resource bindings for a component.
Required: title

PropertyTypeDescription

description

stringThe description text for the component

help

stringThe help text for the component

shortName

stringThe short name for the component (used in validation messages) (optional). If it is not specified, 'title' text is used.

tableTitle

stringThe text shown in column title when component is used in repeating group (optional). If it is not specified, 'title' text is used.

title

stringThe title/label text for the component
See: tableColumnOptions
Required: component

PropertyTypeDescription

component

stringThe ID of the component to be rendered in the cell
See: tableColumnOptions
Required: text

PropertyTypeDescription

text

stringThe text or text resource ID to be rendered in the cell

PropertyTypeDescription

lg

gridValueGrid breakpoint at 1280px
See: gridValue

md

gridValueGrid breakpoint at 960px
See: gridValue

sm

gridValueGrid breakpoint at 600px
See: gridValue

xl

gridValueGrid breakpoint at 1920px
See: gridValue

xs

gridValueGrid breakpoint at 0px
See: gridValue
Required: cells

PropertyTypeDescription

readOnly

booleanA boolean indicating if the row should be a read only row (yellow background)

cells

arrayAn array of cells to be rendered in the row

header

booleanA boolean indicating if the row should be a header row

PropertyTypeDescription

innerGrid

gridPropsOptional grid for inner component content like input field or dropdown. Used to avoid inner content filling the component width.
Example(s): {xs: 12}
See: gridProps

labelGrid

gridPropsOptional grid for the component label. Used in combination with innerGrid to align labels on the side.
Example(s): {xs: 12}
See: gridProps
Type: integer
Examples: 12

PropertyTypeDescription

addButton

booleanBoolean or expression indicating whether add new button should be shown or not under the table.

alertOnDelete

booleanBoolean value indicating if warning popup should be displayed when attempting to delete a row

alwaysShowAddButton

booleanBoolean value indicating whether add new button should be shown or not under the table when a group is open.

deleteButton

booleanBoolean or expression indicating whether delete button should be shown or not for a given row

editButton

booleanBoolean or expression indicating whether edit button should be shown or not for a given row

filter

arrayConditions for filtering visible items in repeating group

mode

stringMode for how repeating group table is displayed in edit mode
Enum: [hideTable, likert, showAll, showTable, onlyTable]

multiPage

booleanBoolean value indicating if form components in edit mode should be shown over multiple pages/views.

openByDefault

Boolean or string indicating if group should be opened by default. If no items exist: 'first', 'last', and true adds a new item. If items exist already, true does not open anything, but 'first' opens the first item, and 'last' opens the last item in the group.

saveAndNextButton

booleanBoolean or expression indicating whether save and go to next button should be shown or not in addition to save and close button

saveButton

booleanBoolean or expression indicating whether save button should be shown or not for a given row

PropertyTypeDescription

key

stringKey representing field in data model to check.

value

stringValue to check against.

PropertyTypeDescription

groupReference

objectReference to the group that is being displayed in the panel. Used for referencing another repeating group context.
groupReference.groupstringGroup reference. Can be either the group id or the group data model binding.
Example(s): the-group-id,some.model.theGroup

iconAlt

stringAlternative text for the icon. Only applicable if iconUrl is provided. Can be plain text or a text resource reference.

iconUrl

stringUrl of the icon to be shown in panel. Can be relative if hosted by app or full if referencing a cdn or other hosting.
Example(s): fancyIcon.svg,https://cdn.example.com/fancyIcon.svg

showIcon

booleanBoolean value indicating if the icon should be shown.

variant

stringChange the look of the panel.
Enum: [info, warning, success]
Description: Boolean value or expression indicating if the component should be hidden. Defaults to false.
Default: false
Type: string
Description: The component ID. Must be unique within all layouts/pages in a layout-set. Cannot end with <dash><number>.
Type: object
Description: A collection of settings for how the component label should be rendered.

PropertyTypeDescription

optionalIndicator

booleanControls whether the text that is indicating that a field is optional should be displayed.
Type: object
Examples: {some.source.field: key1}
Required: label,value

PropertyTypeDescription

label

stringThe option label. Can be plain text or a text resource binding.

value

stringThe option value.
Type: string
Description: Reference to connected options by id.
Type: object

PropertyTypeDescription

breakAfter

stringPDF only: Value or expression indicating whether a page break should be added after the component. Can be either: 'auto' (default), 'always', or 'avoid'.
Example(s): auto,always,avoid

breakBefore

stringPDF only: Value or expression indicating whether a page break should be added before the component. Can be either: 'auto' (default), 'always', or 'avoid'.
Example(s): auto,always,avoid
Type: object
Required: alternatives,default

PropertyTypeDescription

alternatives

arrayList of page sizes the user can choose from. Make sure to test the performance of the largest number of items per page you are allowing.

default

numberThe pagination size that is set to default.
Description: Boolean or expression indicating if the component should be presented as read only. Defaults to false. <br /> <i>Please note that even with read-only fields in components, it may currently be possible to update the field by modifying the request sent to the API or through a direct API call.<i/>
Default: false
Description: Boolean or expression indicating if the component should be rendered as a summary. Defaults to false.
Default: false
Description: Boolean or expression indicating if the component is required when filling in the form. Defaults to false.
Default: false
Description: Boolean or number. True = feature on (default), false = feature off (saves on focus blur), number = timeout in milliseconds (400 by default)
Default: true
Type: object
Description: Column options for specified header.

PropertyTypeDescription

alignText

stringChoose text alignment between 'left', 'center', or 'right' for text in table cells. Defaults to 'left' for text and 'right' for numbers.
Enum: [left, center, right]

textOverflow

Use this property to controll behaviour when text is too large to be displayed in table cell.
textOverflow.lineWrapbooleanToggle line wrapping on or off. Defaults to true
textOverflow.maxHeightnumberDetermines the number of lines to display in table cell before hiding the rest of the text with an elipsis (...). Defaults to 2.
Type: array
Description: An array of actions that should be triggered when data connected to this component changes.