The Action Row component allows users to perform any Action while providing them with specific information about what they can do. There are three elements to the Action Row component:
Content: You can select Column Values, User Profile Values, or Custom Values to add text, labels, and/or images to the component. This element is where you can add some context for users so they know what will happen when they click on the component. For example, if you add the Open Link action to the component to send users to your website, you could use the content element to display “Visit our website.” Users will immediately know what result they’ll achieve by clicking on the component.
Options: Design options to customize how the text and image (if used) are displayed.
Action: Setting up the action you want users to perform.
Adding and Configuring the Action Row Component
In the Layout Editor, select the tab you want to edit.
Click on the plus (+) symbol in the Components panel and add the Action Row component.
From the panel on the right of the Layout Editor, customize the Content. There are two text fields—Text and Label—and one Image field available. You can use them all or leave any blank if you don’t need them. You can select Column Values, User Profile Values, or Custom Values to display in the content section.
Next, select from the Options to customize how to display your content. For the Text Style, you can choose between Title and Field. For the Image Style you can choose Square or Circle.
Finally, configure the Action you want users to take from this component.
Use Cases for the Action Row Component
The Action Row component is extremely versatile, allowing you to use it in different ways. You can use it as a single component for users to perform one action, or use multiple Action Row components together, appearing one after another in your app, for users to perform multiple actions.
Each Action Row component is configured independently of any other Action Row components on the screen. So, if you use multiple Action Row components together, you can configure them with the same action (e.g. Open Link) or use a different action for each one.
Here are some potential options:
Create a Table of Contents for Navigation: Using the Go to Tab action, you can send users to different tabs in your app from a screen.
Create a list of important links: Using the Open Link action, you can send users to different external links in the app browser.
Create multiple options for a screen: Using multiple Action Row Components, you can allow users to perform different actions that are relevant to the data on the screen. For example, for a recipe app, you can use the Show Detail Screen action to display nutrition information for the recipe in the first Action Row Component. Then, you can use the Copy to Clipboard action to copy the ingredient list to the user’s device clipboard. Finally, you can use the Share Link action to enable users to share the recipe with others.