A set of options which each perform a Behavior.
decision {
title = "Decision title"
options {
option {
title = "Top up"
description = "Get started by adding money to your balance"
media = Media.Avatar.build {
content { uri { uri = "urn:wise:icons:plus" } }
}
behavior = ActionBehavior.build {
action {}
}
}
option {
title = "Connect your bank account"
description = "Move money with ease by connecting another account"
media = Media.Avatar.build {
content { uri { uri = "urn:wise:icons:bank" } }
}
behavior = ActionBehavior.build {
action {}
}
}
}
}When to use
- When the only (or primary) way for a user to progress is to choose between a set of options. For example, choosing a country, or the type of document they wish to verify with.
When not to use
- When each option represents an entity which is being managed, consider using a List Layout instead. For example, managing a list of bank cards or recipients.
| Property | Type | Required | Description |
|---|---|---|---|
analyticsId | String | No | An optional identifier to be used in analytics tracking. |
control | String | No | Specify a particular control to use to represent the layout. If the control is unknown, it will be ignored. |
margin | Size | No | The vertical margin to apply after this component. Defaults to md. |
options | Array<DecisionLayout.Option> | Yes | Array of options. |
| Array<String> | No | An optional list of identifiers used to configure renderers.
|
| String | No | Title for the decision block.
|
type | String | Yes | It must be decision. |
An option is a single entry in the decision that the user can choose.
| Property | Type | Required | Description |
|---|---|---|---|
| No | The action to perform when selected. ⚠️ Deprecated - Please use 'behavior' instead | |
| String | No | Additional information to be displayed to the user.
|
| String | No | An optional identifier to be used in analytics tracking.
|
| Yes | Behavior to be performed when the button is pressed.
| |
description | String | No | A user-facing description. |
disabled | Boolean | No | If true, user interaction is disabled. Defaults to false. |
icon | Icon | No | An icon to represent the option. |
image | Image | No | An image to represent the option. |
| No | An alert that will be displayed inline with the item.
| |
| Array<String> | No | Keywords to look for when filtering decisions
|
| No | A media object (avatar, icon, image) which the client can use to represent this option.
| |
| No | An object containing two strings representing two user-facing values. One being clearly more important than the other.
| |
| String | No | An optional identifier used to configure renderers.
⚠️ Deprecated - Please use 'tags' instead |
| Array<String> | No | An optional list of identifiers used to configure renderers.
|
title | String | Yes | A user-facing title. |
filtered
Allows client-side filtering of the options in the decision
decision {
title = "Recent Purchases"
control = "filtered"
options {
option {
title = "Invoice for Consulting"
description = "Down Under LTD"
supportingValues {
value = "100 AUD"
}
media = Media.Avatar.build {
content { uri { uri = "urn:wise:countries:au:image" } }
}
behavior = ActionBehavior.build {
action {
url = "/au-currency"
}
}
}
option {
title = "TV License"
description = "British Broadcasting Network"
supportingValues {
value = "50 GBP"
}
media = Media.Avatar.build {
content { uri { uri = "urn:wise:countries:gb:image" } }
}
behavior = ActionBehavior.build {
action {
url = "/gbp-currency"
}
}
}
option {
title = "Enchantment Table"
description = "Mooshroom Industries"
supportingValues {
value = "30 USD"
}
media = Media.Avatar.build {
content { uri { uri = "urn:wise:countries:us:image" } }
}
behavior = ActionBehavior.build {
action {
url = "/us-currency"
}
}
}
option {
title = "Mjölnir"
description = "B&S Manufacturing"
supportingValues {
value = "10 NOR"
}
media = Media.Avatar.build {
content { uri { uri = "urn:wise:countries:no:image" } }
}
behavior = ActionBehavior.build {
action {
url = "/no-currency"
}
}
}
}
}spotlight
Enables spotlight styling for the decision options, to be used with the related spotlight tags. Spotlight should be used when options navigate the user to features they can configure. Related tags: SPOTLIGHT_ACTIVE, SPOTLIGHT_INACTIVE
with-avatar
Displays all option images in an Avatar. Note that when using media this has no effect.