Snapkit
This section explores how to create a custom user interface using snap-kit and DevRev.
Understanding the structure
The snap-kit JSON has a top-level structure with object
, body
, type
, and snap_kit_body
fields. The snap_kit_body
field contains information regarding snap-kit’s structure.
For example:
Snap-kit body
The snap_kit_body
field has the following properties:
snap_in_id
: A unique identifier for the snap-kit.snap_in_action_name
: The name of the action this snap-kit represents.body
: An object that holds the actual snap-kit content in the form ofsnaps
.
For example:
Body
The body
field contains an array of snaps
. Each snap can have a type
, and depending on the type, it has different properties.
Snaps
The following snap types are supported:
Base types
User interface elements
Form elements
- Checkboxes
- Input
- List Input
- Static Select
- Multi Static Select
- Radio Buttons
- Toggle Button
- Upload Input
Layout elements
Data pickers
Action payloads
Snap-kit generates payloads when a user interacts with an actionable snap. The payload is sent to the backend and can be used to perform actions. The following snaps generate payloads:
- Button
- Checkboxes
- Input and all its types (Plain Text Input, Number Input, Email Input, Rich Text Input)
- List Input and all its types (String List Input, Number List Input, Email List Input)
- Static Select
- Multi Static Select
- Radio Buttons
- Toggle Button
- Upload Input
- Form
- Part Picker
- Tag Picker
- User Picker
Base Payload
All actionable snaps share the same base payload structure. The base payload has the following structure:
Base Types
Many elements share the same base properties. The base types these elements inherit from are described below.
Snap
A snap is the base type that all other snaps inherit from.
Properties
type
(required): Type of snapblock_id
(optional): A unique identifier for the snap. If not provided, a random ID is generated.
Action
Base interface for action components.
Action types
There are two types of action:
- Remote action: It triggers a backend API and is handled by the backend.
- Client action: It triggers a client-side action and is handled by the client.
Properties
action_id
(required): An identifier for the action. It should be unique in the snap.action_type
(optional): Indicates whether the backend or client handles the action. This is mandatory to pass if you have an action to be performed. Possible values:"remote"
,"client"
.
Inherited properties
Inherited from Snap:
type
(required): Type of snap.block_id
(optional): A unique identifier for the snap. If not provided, a random ID is generated.
Focusable
Base interface for focusable components.
Properties
focus_on_load
(optional): Indicates whether the component should be focused on load or not. Only 1 item can have the property set to true in the snap. Defaults tofalse
.
Placeholder
Base interface for components that can have a placeholder.
Properties
placeholder
(optional): A Plain Text element that defines the placeholder text shown on the element.
Disabled
Base interface for components that can be disabled.
Properties
disabled
(optional): Indicates whether the element is disabled.
Hideable
Base interface for components that can be hidden.
Properties
hidden
(optional): Indicates whether the element is hidden.
Layout
Controls how the layout is displayed. Similar to flexbox
.
Properties
direction
(optional): The direction of the layout. Similar toflex-direction
. Possible values:"row"
,"column"
.alignment
(optional): The alignment of the layout. Similar toalign-items
. Possible values:"start"
,"center"
,"end"
,"baseline"
,"stretch"
.justify
(optional): The justification of the layout. Similar tojustify-content
. Possible values:"start"
,"center"
,"end"
,"between"
,"around"
,"evenly"
.
User interface elements
Button
A button that can be clicked to trigger an action. Works with Actions and Form blocks.
Properties
text
(required): The text to be displayed on the button.style
(optional): The style of the button. Defaults to"default"
. Possible values:"default"
,"primary"
,"destructive"
.value
(required): The value associated with the button. It’s sent along with the interaction payload.href
(optional): If the button is a link, this is the URL it links to.disabled
(optional): Disables the input and prevents changes to the value.disabled_text
(optional): The text that’s shown on hover if the component is disabled.
Inherited properties
Inherited from Snap:
type
(required): The type of the button component, should be set to"button"
.block_id
(optional): A unique identifier for the snap. If not provided, a random ID is generated.
Inherited from Action:
action_id
(required): An identifier for the action and is unique in the snap.action_type
(optional): Indicates whether the action is handled by the backend or client. This is mandatory to pass if you have an action to be performed. Possible values:"remote"
,"client"
.
Example
Button variants are displayed in a row using the Card snap.
Action payload
Inherits type
, action_id
, action_type
and timestamp
from Base Payload, type
is set to "button"
.
Example payload
Divider
A divider component is used to separate blocks.
Properties
The divider component does not have any properties of its own.
Inherited properties
Inherited from Snap:
type
(required): The type of the divider component, should be set to"divider"
.block_id
(optional): A unique identifier for the snap. If not provided, a random ID is generated.
Example
Divider is used in a form to separate a name input and a multi-select input.
Image
An image block that displays an image. Works with Content blocks.
Properties
image_url
(required): The URL of the image.alt_text
(required): The alt text to be displayed when the image can’t be displayed. This shouldn’t contain any markup.fill_container
(optional): Whether the image should stretch to fill the container while maintaining its aspect ratio.
Inherited properties
Inherited from Snap:
type
(required): The type of the image component, should be set to"image"
.block_id
(optional): A unique identifier for the snap. If not provided, a random ID is generated.
Example
Image used in a card, with default display mode (fill_container
not set).
Image used in a card, with fill_container
set.
Plain text
A plain text element is used to define unformatted text.
Properties
text
(required): The plain text content.
Inherited properties
Inherited from Snap:
type
(required): The type of the element, should be set to"plain_text"
.block_id
(optional): A unique identifier for the snap. If not provided, a random ID is generated.
Example
Rich text
A rich text element is used to define formatted text.
Properties
text
(required): The rich text content.
Inherited properties
Inherited from Snap:
type
(required): The type of the element, should be set to"rich_text"
.block_id
(optional): A unique identifier for the snap. If not provided, a random ID is generated.
Example
Table
A table element used to present JSON structured data.
Properties
rows
(required): The values to be displayed in the table. The data should be provided as a JSON object, where each cell is a plaintext SnapKit component.columns
(required): Columns are defined as an array of objects, where each object has two parameters: an optional header and a required field key, which defines which field from rows is shown in the defined column. If a key is not used, it means that the associated data from rows will not be displayed in the table. The order of keys also defines the order in which values from rows are shown in the table.
Inherited properties
Inherited from Snap:
type
(required): The type of the element, should be set to"table"
.block_id
(optional): A unique identifier for the snap. If not provided, a random ID is generated.
Example
Table
A table element used to present JSON structured data.
Properties
rows
(required): The values to be displayed in the table. The data should be provided as a JSON object, where each cell is a plaintext SnapKit component.columns
(required): Columns are defined as an array of objects, where each object has two parameters: an optional header and a required field key, which defines which field from rows is shown in the defined column. If a key is not used, it means that the associated data from rows will not be displayed in the table. The order of keys also defines the order in which values from rows are shown in the table.
Inherited properties
Inherited from Snap:
type
(required): The type of the element, should be set to"table"
.block_id
(optional): A unique identifier for the snap. If not provided, a random ID is generated.
Example
Form elements
Plain text option
Plain text options are a commonly shared component of different form elements. It’s used to define an option in a form element.
text
(required): A Plain Text element representing the option.value
(required): A value assigned to the option.description
(optional): An optional Plain Text element describing the option.
Checkboxes
A component that provides a group of checkboxes that allow a user to choose multiple items from a list of options. Works with Input Layout and Actions blocks.
Properties
options
(required): A list of options that appears in a stack of checkboxes, of type Plain Text Option.initial_options
(optional): The initially selected options.
Inherited properties
Inherited from Snap:
type
(required): The type of the checkbox group component, should be set to"checkboxes"
.block_id
(optional): A unique identifier for the snap. If not provided, a random ID is generated.
Inherited from Action:
action_id
(required): An identifier for the action. Should be unique in the snap.action_type
(optional): Indicates whether the action is handled by the backend or client. This is mandatory to pass if you have an action to be performed. Possible values:"remote"
,"client"
.
Inherited from Focusable:
focus_on_load
(optional): Indicates whether the component should be focused on load or not. Only 1 item can have the property set to true in the snap. Defaults tofalse
.
Inherited from Disabled:
disabled
(optional): Indicates whether the element is disabled.
Example
Action payload
Inherits type
, action_id
, action_type
, and timestamp
from Base Payload, type
is set to "checkboxes"
.
Example payload
Input
There are 4 supported input types:
- Plain Text Input
- Number Input
- Email Input
- Rich Text Input
Properties
The input component does not have any properties of its own. See specific variants below for their properties.
Inherited properties
Inherited from Snap:
type
(required): Type of the input component. Should be set according to the input type, see below.block_id
(optional): A unique identifier for the snap. If not provided, a random ID is generated.
Inherited from Action:
action_id
(required): An identifier for the action. Should be unique in the snap.action_type
(optional): Indicates whether the action is handled by the backend or client. This is mandatory to pass if you have an action to be performed. Possible values:"remote"
,"client"
.
Inherited from Focusable:
focus_on_load
(optional): Indicates whether the component should be focused on load or not. Only 1 item can have the property set to true in the snap. Defaults tofalse
.
Inherited from Placeholder:
placeholder
(optional): A Plain Text element that defines the placeholder text shown on the element.
Inherited from Disabled:
disabled
(optional): Indicates whether the element is disabled.
Plain text input
A plain-text input, similar to the HTML <input>
tag, creates a field where a user can enter freeform data. It can appear as a single-line field. Works with Input Layout blocks.
Inherited properties
Inherited from Snap:
type
(required): The type of the input component, should be set to"plain_text_input"
.
Additional properties
initial_value
(optional): The initial value in the input when it’s loaded.multiline
(optional): Indicates whether the input should allow multiple lines of text. Defaults tofalse
.min_length
(optional): The minimum text length, can’t be greater thanmax_length
.max_length
(optional): The maximum text length, can’t be less thanmin_length
.resize
(optional): Indicates whether the input should be resizable. Defaults tofalse
.
Example
Action payload
Inherits type
, action_id
, action_type
and timestamp
from Base Payload, type
is set to "plain_text_input"
.
Example payload
Number input
A number input, similar to the HTML <input>
tag, creates a field where a user can enter numbers. Works with Input Layout blocks.
Inherited properties
Inherited from Snap:
type
(required): The type of the input component, should be set to"number_input"
.
Additional properties
initial_value
(optional): The initial value in the input when it’s loaded.min_value
(optional): The minimum value, can’t be greater thanmax_value
.max_value
(optional): The maximum value, can’t be less thanmin_value
.
Example
Action payload
Inherits type
, action_id
, action_type
, and timestamp
from Base Payload, type
is set to "number_input"
.
Example payload
Email input
An email input, similar to the HTML <input>
tag, creates a field where a user can enter email. Works with Input Layout blocks.
Inherited properties
Inherited from Snap:
type
(required): The type of the input component, should be set to"email_text_input"
.
Additional properties
initial_value
(optional): The initial value in the input when it’s loaded.
Example
Action payload
Inherits type
, action_id
, action_type
and timestamp
from Base Payload, type
is set to "email_text_input"
.
Example payload
Rich text input
A rich text input shows a rich text editor where the user can enter formatted text (Markdown). Works with Input Layout blocks.
Inherited properties
Inherited from Snap:
type
(required): The type of the input component, should be set to"rich_text_input"
.
Additional properties
initial_value
(optional): The initial value in the input when it’s loaded.
Example
The following video shows the rich text input in action.
Action payload
Inherits type
, action_id
, action_type
and timestamp
from Base Payload, type
is set to "rich_text_input"
.
Example payload
List input
There are 3 supported list input types:
- String List Input
- Number List Input
- Email List Input
Properties
The list input component does not have any properties of its own. See specific variants below for their properties.
Inherited properties
Inherited from Snap:
type
(required): Type of the list input component. Should be set according to the list input type, see below.block_id
(optional): A unique identifier for the snap. If not provided, a random ID is generated.
Inherited from Action:
action_id
(required): An identifier for the action. Should be unique in the snap.action_type
(optional): Indicates whether the action is handled by the backend or client. This is mandatory to pass if you have an action to be performed. Possible values:"remote"
,"client"
.
Inherited from Placeholder:
placeholder
(optional): A Plain Text element that defines the placeholder text shown on the element.
Inherited from Disabled:
disabled
(optional): Indicates whether the element is disabled.
String list input
A string list input allows users to enter a list of text items. Works with Input Layout blocks.
Inherited properties
Inherited from Snap:
type
(required): The type of the input component, should be set to"string_list"
.
Additional Properties
min_items
(optional): The minimum number of items that can be added. Defaults to 1.max_items
(optional): The maximum number of items that can be added.multiline
(optional): Indicates whether the input should allow multiple lines of text. Defaults tofalse
.min_item_length
(optional): The minimum text length of the inputs, can’t be greater thanmax_item_length
.max_item_length
(optional): The maximum text length of the inputs, can’t be less thanmin_item_length
.initial_values
(optional): The initial values in the inputs when they are loaded. This is an array of strings. Ifmin_items
ormax_items
are set, the length of the array should be within the range.
Example
Standard string list input with a minimum of 1 item, maximum of 3 items, minimum item length set to 3 and maximum item length set to 15.
Multiline string list input with a minimum of 1 item and a maximum of 2 items.
Action payload
Inherits type
, action_id
, action_type
and timestamp
from Base Payload, type
is set to "string_list"
.
Example payload
Standard string list input.
Multiline string list input.
Number List Input
A list of numbers input allows users to enter a list of numeric items. Works with Input Layout blocks.
Inherited properties
Inherited from Snap:
type
(required): The type of the input component, should be set to"number_list"
.
Additional Properties
min_items
(optional): The minimum number of items that can be added.max_items
(optional): The maximum number of items that can be added.min_item_value
(optional): The minimum value of the inputs, can’t be greater thanmax_item_value
.max_item_value
(optional): The maximum value of the inputs, can’t be less thanmin_item_value
.initial_values
(optional): The initial values in the inputs when they are loaded. This is an array of strings. Ifmin_items
ormax_items
are set, the length of the array should be within the range.
Example
Action payload
Inherits type
, action_id
, action_type
and timestamp
from Base Payload, type
is set to "number_list"
.
Example Payload
Email List Input
A list of email input allows users to enter a list of emails. Works with Input Layout blocks.
Inherited properties
Inherited from Snap:
type
(required): The type of the input component, should be set to"email_list"
.
Additional Properties
min_items
(optional): The minimum number of items that can be added.max_items
(optional): The maximum number of items that can be added.initial_values
(optional): The initial values in the inputs when they are loaded. This is an array of strings. Ifmin_items
ormax_items
are set, the length of the array should be within the range.
Example
Action payload
Inherits type
, action_id
, action_type
and timestamp
from Base Payload, type
is set to "email_list"
.
Example Payload
Static select
A select menu that allows a user to choose one item from a list of options. Works with Input Layout and Actions blocks.
Properties
options
(required): A list of options that appear in the menu, of type Plain Text Option.initial_selected_option
(optional): The initial option that’s selected when the element is loaded. A single option that exactly matches one of the options withinoptions
.
Inherited properties
Inherited from Snap:
type
(required): Type of the static select component, should be set to"static_select"
.block_id
(optional): A unique identifier for the snap. If not provided, a random ID is generated.
Inherited from Action:
action_id
(required): An identifier for the action. Should be unique in the snap.action_type
(optional): Indicates whether the action is handled by the backend or client. This is mandatory to pass if you have an action to be performed. Possible values:"remote"
,"client"
.
Inherited from Focusable:
focus_on_load
(optional): Indicates whether the component should be focused on load or not. Only 1 item can have the property set to true in the snap. Defaults tofalse
.
Inherited from Placeholder:
placeholder
(optional): A Plain Text element that defines the placeholder text shown on the element.
Inherited from Disabled:
disabled
(optional): Indicates whether the element is disabled.
Example
A static select snap with 4 options.
Action payload
Inherits type
, action_id
, action_type
, and timestamp
from Base Payload, type
is set to "static_select"
.
Example Payload
Multi static select
A select menu that allows a user to choose multiple items from a list of options. Works with Input Layout and Actions blocks.
Properties
options
(required): A list of options that appear in the menu, of type Plain Text Option.initial_selected_options
(optional): The initial options that are selected when the element is loaded. Each of them should exactly match one of the options withinoptions
.max_selected_items
(optional): The maximum number of items that can be selected.
Inherited properties
Inherited from Snap:
type
(required): The type of the multi-static select component, should be set to"multi_static_select"
.block_id
(optional): A unique identifier for the snap. If not provided, a random ID is generated.
Inherited from Action:
action_id
(required): An identifier for the action. Should be unique in the snap.action_type
(optional): Indicates whether the action is handled by the backend or client. This is mandatory to pass if you have an action to be performed. Possible values:"remote"
,"client"
.
Inherited from Focusable:
focus_on_load
(optional): Indicates whether the component should be focused on load or not. Only 1 item can have the property set to true in the snap. Defaults tofalse
.
Inherited from Placeholder:
placeholder
(optional): A Plain Text element that defines the placeholder text shown on the element.
Inherited from Disabled:
disabled
(optional): Indicates whether the element is disabled.
Example
A multi-static select snap with 4 options.
Action payload
Inherits type
, action_id
, action_type
, and timestamp
from Base Payload, type
is set to "multi_static_select"
.
Example Payload
Radio button
List of radio inputs that allow a user to choose one item from a list of options. Works with input layout and actions blocks.
Properties
options
(required): A list of options that appear in a stack of radio inputs, of type plain text option.initial_selected_option
(optional): The initial option that’s selected when the element is loaded. A single option that exactly matches one of the options withinoptions
.
Inherited properties
Inherited from Snap:
type
(required): Type of the radio button group component, should be set to"radio_buttons"
.block_id
(optional): A unique identifier for the snap. If not provided, a random ID is generated.
Inherited from Action:
action_id
(required): An identifier for the action. Should be unique in the snap.action_type
(optional): Indicates whether the action is handled by the backend or client. This is mandatory to pass if you have an action to be performed. Possible values:"remote"
,"client"
.
Inherited from Focusable:
focus_on_load
(optional): Indicates whether the component should be focused on load or not. Only 1 item can have the property set to true in the snap. Defaults tofalse
.
Inherited from Disabled:
disabled
(optional): Indicates whether the element is disabled.
Example
A radio button snap with 3 options.
Action payload
Inherits type
, action_id
, action_type
and timestamp
from Base Payload, type
is set to "radio_buttons"
.
Example Payload
Toggle button
Toggles allow users to quickly switch between two possible states. Works with Input Layout and Actions blocks.
Properties
initial_value
(optional): The initial value of the toggle (a boolean).description
(optional): A Plain Text element that defines the description shown below the toggle.
Inherited properties
Inherited from Snap:
type
(required): The type of the toggle button component, should be set to"toggle"
.block_id
(optional): A unique identifier for the snap. If not provided, a random ID is generated.
Inherited from Action:
action_id
(required): An identifier for the action. Should be unique in the snap.action_type
(optional): Indicates whether the action is handled by the backend or client. This is mandatory to pass if you have an action to be performed. Possible values:"remote"
,"client"
.
Inherited from Focusable:
focus_on_load
(optional): Indicates whether the component should be focused on load or not. Only 1 item can have the property set to true in the snap. Defaults tofalse
.
Inherited from Disabled:
disabled
(optional): Indicates whether the element is disabled.
Example
Action payload
Inherits type
, action_id
, action_type
and timestamp
from Base Payload, type
is set to "toggle"
.
Example Payload
Upload input
A component that allows a user to upload a file. Works with Input Layout and Actions blocks.
Properties
upload_button
(required): A button that can be clicked to upload files.min_files
(optional): The minimum number of files that can be uploaded.max_files
(optional): The maximum number of files that can be uploaded.initial_artifacts_ids
(optional): The initial artifacts that are selected when the element is loaded. A list of DONv2 IDs.
Inherited properties
Inherited from Snap:
type
(required): Type of the upload input component, should be set to"upload"
.block_id
(optional): A unique identifier for the snap. If not provided, a random ID is generated.
Inherited from Action:
action_id
(required): An identifier for the action. Should be unique in the snap.action_type
(optional): Indicates whether the action is handled by the backend or client. This is mandatory to pass if you have an action to be performed. Possible values:"remote"
,"client"
.
Inherited from Focusable:
focus_on_load
(optional): Indicates whether the component should be focused on load or not. Only 1 item can have the property set to true in the snap. Defaults tofalse
.
Inherited from Placeholder:
placeholder
(optional): A Plain Text element that defines the placeholder text shown on the element.
Inherited from Disabled:
disabled
(optional): Indicates whether the element is disabled.
Example
Action payload
Inherits type
, action_id
, action_type
and timestamp
from Base Payload, type
is set to "upload"
.
Example Payload
Layout Elements
Actions
Used when you want the user to interact without filling out a form. Similar to the Form block but without a submit button. It contains an array of elements
.
Properties
elements
(required): An array of elements. See the list of allowed elements below.disable_on_action
(optional): A boolean indicating whether all elements in the actions block should be disabled when one of the elements is interacted with. When the action is completed, the elements are re-enabled. Defaults tofalse
. A use case for enabling this is if you have multiple actions that shouldn’t be executed concurrently or are incompatible with each other. An example of this would be a snap-in for selecting a meal for a company event. When the user selects a meal, the other meal options should be disabled until the order is placed. After that, the Snap-kit can be updated with the information about the selection.
Inherited properties
Inherited from Snap:
type
(required): The type of the actions component, should be set to"actions"
.block_id
(optional): A unique identifier for the snap. If not provided, a random ID is generated.
Inherited from Layout:
direction
(optional): The direction of the layout. Similar toflex-direction
. Possible values:"row"
,"column"
.alignment
(optional): The alignment of the layout. Similar toalign-items
. Possible values:"start"
,"center"
,"end"
,"baseline"
,"stretch"
.justify
(optional): The justification of the layout. Similar tojustify-content
. Possible values:"start"
,"center"
,"end"
,"between"
,"around"
,"evenly"
.
Allowed elements
The elements
array can contain the following Snaps:
- Button
- Checkboxes
- Radio Buttons
- Actions
- Static Select
- Multi Static Select
- Divider
- Tag Picker
- User Picker
- Part Picker
- Toggle Button
- Upload Input
Example
The following video shows the behavior of the Actions block with disable_on_action
set to true
.
Card
A card is a container for various types of content. It contains an array of elements
.
Properties
elements
(required): An array of elements. See the list of allowed elements below.title
(optional): The title of the card.is_collapsible
(optional): Whether the card is collapsible or not. Defaults tofalse
.default_collapsed
(optional): Whether the card is collapsed by default or not. Defaults tofalse
.
Inherited properties
Inherited from Snap:
type
(required): The type of the card component, should be set to"card"
.block_id
(optional): A unique identifier for the snap. If not provided, a random ID is generated.
Inherited from Layout:
direction
(optional): The direction of the layout. Similar toflex-direction
. Possible values:"row"
,"column"
.alignment
(optional): The alignment of the layout. Similar toalign-items
. Possible values:"start"
,"center"
,"end"
,"baseline"
,"stretch"
.justify
(optional): The justification of the layout. Similar tojustify-content
. Possible values:"start"
,"center"
,"end"
,"between"
,"around"
,"evenly"
.
Allowed elements
The elements
array can contain the following Snaps:
Example
Default and collapsible card example.
Content
A content
block is used to hold various types of content. It contains an array of elements
.
Properties
elements
(required): An array of elements. See the list of allowed elements below.
Inherited properties
Inherited from Snap:
type
(required): The type of the content component, should be set to"content"
.block_id
(optional): A unique identifier for the snap. If not provided, a random ID is generated.
Inherited from Layout:
direction
(optional): The direction of the layout. Similar toflex-direction
. Possible values:"row"
,"column"
.alignment
(optional): The alignment of the layout. Similar toalign-items
. Possible values:"start"
,"center"
,"end"
,"baseline"
,"stretch"
.justify
(optional): The justification of the layout. Similar tojustify-content
. Possible values:"start"
,"center"
,"end"
,"between"
,"around"
,"evenly"
.
Allowed elements
The elements
array can contain the following Snaps:
Example
Form
A form block that collects information from users.
Properties
elements
(required): An array of elements. See the list of allowed elements below.submit_action
(required): A button that can be clicked to submit the form.
Inherited properties
Inherited from Snap:
type
(required): The type of the form component, should be set to"form"
.block_id
(optional): A unique identifier for the snap. If not provided, a random ID is generated.
Inherited from Action:
action_id
(required): An identifier for the action. Should be unique in the snap.action_type
(optional): Indicates whether the action is handled by the backend or client. This is mandatory to pass if you have an action to be performed. Possible values:"remote"
,"client"
.
Inherited from Layout:
direction
(optional): The direction of the layout. Similar toflex-direction
. Possible values:"row"
,"column"
.alignment
(optional): The alignment of the layout. Similar toalign-items
. Possible values:"start"
,"center"
,"end"
,"baseline"
,"stretch"
.justify
(optional): The justification of the layout. Similar tojustify-content
. Possible values:"start"
,"center"
,"end"
,"between"
,"around"
,"evenly"
.
Allowed elements
The elements
array can contain the following Snaps:
Example
A form composed of plain text inputs, number inputs, checkboxes, radio buttons, static select, and multi-static select snaps.
Action payload
Inherits type
, action_id
, action_type
and timestamp
from Base Payload, type
is set to "form"
.
Example payload
Input layout
A layout that holds the elements that the user can interact with in a form. Works with Form blocks.
Properties
element
(required): The input element. See the list of allowed elements below.label
(optional): A Plain Text element that defines the label shown above the input element.hint
(optional): A Plain Text element that defines the hint shown below the label.optional
(optional): A boolean that indicates whether the input element may be empty when a user submits the modal. For toggle, if this value isfalse
, then it needs to be always toggled (needs to be true). Defaults tofalse
.disabled
(optional): Disables the input and prevents changes to the value.disabled_text
(optional): The text that’s shown on hover if the component is disabled.
Inherited properties
Inherited from Snap:
type
(required): Type of the input layout component, should be set to"input_layout"
.block_id
(optional): A unique identifier for the snap. If not provided, a random ID is generated.
Inherited from Hideable:
hidden
(optional): Indicates whether the element is hidden. You can use this to pass values to the backend without showing them to the user.
Allowed element types
- Input
- Checkboxes
- Radio Buttons
- Static Select
- Multi Static Select
- User Picker
- Part Picker
- Tag Picker
- Toggle Button
- Upload Input
Example
Data pickers
Part picker
A component that provides a list of parts that allows a user to choose multiple parts from a list. Works with Input Layout and Actions blocks.
Properties
initial_parts_selected_options
(optional): The initially selected parts, a list of DONv2 IDs.max_selected_items
(optional): The maximum number of parts that can be selected.allowed_part_types
(optional): A list of part types that are selectable from the list of parts in the dropdown. Possible values:"capability"
,"component"
,"custom_part"
,"enhancement"
,"feature"
,"linkable"
,"microservice"
,"product"
,"runnable"
.
Inherited properties
Inherited from Snap:
type
(required): Type of the part picker component, should be set to"part_picker"
.block_id
(optional): A unique identifier for the snap. If not provided, a random ID is generated.
Inherited from Action:
action_id
(required): An identifier for the action. Should be unique in the snap.action_type
(optional): Indicates whether the action is handled by the backend or client. This is mandatory to pass if you have an action to be performed. Possible values:"remote"
,"client"
.
Inherited from Disabled:
disabled
(optional): Indicates whether the element is disabled.
Example
Part picker snap with 2 selected parts.
Action payload
Inherits type
, action_id
, action_type
, and timestamp
from Base Payload, type
is set to "part_picker"
.
Example payload
Tag picker
A component that provides a list of tags that allow a user to choose multiple tags from a list. Works with Input Layout and Actions blocks.
Properties
initial_tags_selected_options
(optional): The initially selected tags, a list of DONv2 IDs.max_selected_items
(optional): The maximum number of tags that can be selected.
Inherited properties
Inherited from Snap:
type
(required): Type of the tag picker component, should be set to"tag_picker"
.block_id
(optional): A unique identifier for the snap. If not provided, a random ID is generated.
Inherited from Action:
action_id
(required): An identifier for the action. Should be unique in the snap.action_type
(optional): Indicates whether the action is handled by the backend or client. This is mandatory to pass if you have an action to be performed. Possible values:"remote"
,"client"
.
Inherited from Focusable:
focus_on_load
(optional): Indicates whether the component should be focused on load or not. Only 1 item can have the property set to true in the snap. Defaults tofalse
.
Inherited from Placeholder:
placeholder
(optional): A Plain Text element that defines the placeholder text shown on the element.
Inherited from Disabled:
disabled
(optional): Indicates whether the element is disabled.
Example
Tag picker snap with 1 selected tag.
Action payload
Inherits type
, action_id
, action_type
, and timestamp
from Base Payload, type
is set to "tag_picker"
.
Example payload
User picker
A component that provides a list of users that allow a user to choose multiple users from a list. Works with Input Layout and Actions blocks.
Properties
user_types
(optional): The types of users that are allowed to be selected. Defaults to["rev_user", "dev_user"]
. Possible values:"rev_user"
,"dev_user"
,"sys_user"
.initial_rev_users_selected_options
(optional): The initially selected customers, a list of DONv2 IDs.initial_dev_users_selected_options
(optional): The initially selected dev users, a list of DONv2 IDs.initial_sys_users_selected_options
(optional): The initially selected sys users, a list of DONv2 IDs.max_selected_items
(optional): The maximum number of users that can be selected.
Inherited properties
Inherited from Snap:
type
(required): Type of the user picker component, should be set to"user_picker"
.block_id
(optional): A unique identifier for the snap. If not provided, a random ID is generated.
Inherited from Action:
action_id
(required): An identifier for the action. Should be unique in the snap.action_type
(optional): Indicates whether the action is handled by the backend or client. This is mandatory to pass if you have an action to be performed. Possible values:"remote"
,"client"
.
Inherited from Focusable:
focus_on_load
(optional): Indicates whether the component should be focused on load or not. Only 1 item can have the property set to true in the snap. Defaults tofalse
.
Inherited from Placeholder:
placeholder
(optional): A Plain Text element that defines the placeholder text shown on the element.
Inherited from Disabled:
disabled
(optional): Indicates whether the element is disabled.
Example
User picker snap with 1 selected user.
Action payload
Inherits type
, action_id
, action_type
, and timestamp
from Base Payload, type
is set to "user_picker"
.
Example Payload
Example snap-kit
In this updated JSON, the divider
component is added to create a visual separation. The checkboxes
component allows for selecting multiple options. The part_picker
component allows for selecting parts, and the tag_picker
component allows for selecting tags. You can customize the options, initial selections, and other values according to your requirements.