MotionTools

This article is part of <b><a href="https://help.motiontools.io/en/articles/10476927">Custom screens: Server side rendering</a></b>.

There are several types of supported components, each with its own specific UI &amp; interaction model. Common to all component definitions is the field <code>component_type</code> which, as its name suggests, identifies the type of the component.

Let’s explore available component types below.

<a href="#h_01GDGW30MRVQZ690BVAK5EJ53T">Labeled box</a>

- <a href="#h_01GDGW30MRVQZ690BVAK5EJ53T">Labeled box</a>
- <a href="#h_01GDGVYR69G3D0D0542XT4WY7Z">List item</a>
- <a href="#h_01GDGW39K1FESNCAMV7AK40GZ4">Web URL</a>

A simple row item with two values: <code>title</code> and <code>content</code>:

{
  "component_type": "labeled_box",
  "title": "Tips this month",
  "content": "$17.23",
}

<code>component_type</code> = <code>labeled_box</code>

<code>content</code> has to be present &amp; non-empty

if <code>content</code> is not set, the component will not render

<code>title</code>, <code>content</code> are limited to 500 characters each

<code>title</code>, <code>content</code> can render on multiple lines, no line limit

- <code>component_type</code> = <code>labeled_box</code>
- <code>title</code> is optional
- <code>content</code> has to be present &amp; non-empty
- if <code>content</code> is not set, the component will not render
- <code>title</code>, <code>content</code> are limited to 500 characters each
- <code>title</code>, <code>content</code> can render on multiple lines, no line limit
- no supported interactions, not clickable

A simple row item that has its contents justified horizontally and is, optionally, clickable. Clicking a list item always opens a new custom screen.

list_item_title_only_not_tappable_h1bydt.png

{
  "component_type": "list_item",
  "title": "Tips this month",
  "content": "$134.09",
  "parameters": {
      "page_id": "MONTH_TIPS_PAGE",
      "month": "march"            "year": "2022"
  }
}

<code>component_type</code> = <code>list_item</code>

<code>title</code> has to be present &amp; non-empty. If not set, the component will not render

<code>title</code> is limited to 500 characters

<code>content</code> is limited to 10 characters

<code>parameters</code> → request parameters to be passed when this item is clicked. If present, the item is considered tappable

If tappable, opens a new custom screen when tapped

When tapped, contents of <code>parameters</code> will 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 of <code>parameters</code>

If tappable, the arrow icon is shown on the right side

- <code>component_type</code> = <code>list_item</code>
- <code>title</code> has to be present &amp; non-empty. If not set, the component will not render
- <code>title</code> is limited to 500 characters
- <code>content</code> is optional
- <code>content</code> is limited to 10 characters
- <code>title</code>, <code>content</code> can render on multiple lines, no line limit
- <code>parameters</code> → request parameters to be passed when this item is clicked. If present, the item is considered tappable
- If tappable, opens a new custom screen when tapped
- When tapped, contents of <code>parameters</code> will 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 of <code>parameters</code>
- If tappable, the arrow icon is shown on the right side

An item that opens a given URL in a web view. Visually, it's the same as the <a href="#h_01GDGVYR69G3D0D0542XT4WY7Z">List item</a>.

Talk to an agent

<code>component_type</code> = <code>web_url</code>

<code>title</code> &amp; <code>contents</code> carry the same requirements &amp; restrictions as for the

<code>url</code> is required and must be a valid URL

When 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 &amp; load the associated <code>url</code>

- <code>component_type</code> = <code>web_url</code>
- <code>title</code> &amp; <code>contents</code> carry the same requirements &amp; restrictions as for the
- <code>url</code> is required and must be a valid URL
- When 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 &amp; load the associated <code>url</code>

Reference: Custom screens components

Create a custom design with text, images, and links

Overview

Labeled box

Data model example

Details

List item

Other variations

Data model structure & example

Details

Web URL

Data model structure & example

Details