This article is part of Custom screens: Server side rendering.
Overview
There are several types of supported components, each with its own specific UI & interaction model. Common to all component definitions is the field component_type which, as its name suggests, identifies the type of the component.
Let’s explore available component types below.
Labeled box
A simple row item with two values: title and content:
Data model example
{
"component_type": "labeled_box",
"title": "Tips this month",
"content": "$17.23",
}
Details
component_type=labeled_boxtitleis optionalcontenthas to be present & non-emptyif
contentis not set, the component will not rendertitle,contentare limited to 500 characters eachtitle,contentcan render on multiple lines, no line limitno supported interactions, not clickable
List item
A simple row item that has its contents justified horizontally and is, optionally, clickable. Clicking a list item always opens a new custom screen.
Other variations
Data model structure & example
{
"component_type": "list_item",
"title": "Tips this month",
"content": "$134.09",
"parameters": {
"page_id": "MONTH_TIPS_PAGE",
"month": "march" "year": "2022"
}
}
Details
component_type=list_itemtitlehas to be present & non-empty. If not set, the component will not rendertitleis limited to 500 characterscontentis optionalcontentis limited to 10 characterstitle,contentcan render on multiple lines, no line limitparameters→ request parameters to be passed when this item is clicked. If present, the item is considered tappableIf tappable, opens a new custom screen when tapped
When tapped, contents of
parameterswill be sent to your custom screens endpoint. your endpoint can then decide how to build the custom screen to-be-opened, based on the contents ofparametersIf tappable, the arrow icon is shown on the right side
Web URL
An item that opens a given URL in a web view. Visually, it's the same as the List item.
Data model structure & example
{
"component_type": "web_url",
"title": "Talk to an agent",
"content": "Open",
"url": "https://www.motiontools.com/chat_support"
}
Details
component_type=web_urltitle&contentscarry the same requirements & restrictions as for theurlis required and must be a valid URLWhen clicked, the URL is opened in an in-app WebView. The WebView also allows the option to open the link in Chrome/ Safari, depending on whether the app runs on iOS or Android.
If a Custom screen contains a single WebUrl Component: When the custom screen opens, the apps will not render the single WebUrl Component but instead directly open the WebView & load the associated
url