List Controls - Cards

You have been using the table grid control to fetch data from sources like Sheets, APIs and have seen how to use some custom actions to further make the table grid an interactive and handy control for displaying data. There can be scenarios like say providing a contact list in your apps, news feeds, detailed employee cards,s and so on. For that, you can use the List control from Studio. The List controls have an enhanced look and feel with features to add images, customize, or create a great user experience for a user accessing it on mobile or desktop likewise.

Studio provides the List controls in the Controls section. There are different types of cards that are basically designed to provide the tabulated data in layouts as per the usage. For example, a News Card for news feeds with a look that makes it easy to read the headlines, a single user card that can provide a list of say contacts, employees, task list, and so on. It also allows you to provide a detailed view and enabled detailing at the user level. Each of these cards can have some specific differentiating properties, but most features are similar for all.

Properties

UI properties

  • Label: Label is the text that is displayed above the container box and helps the user to understand what the control represents in the micro-app.

  • Properties: These properties help you customize the Label by changing the text size, weight( Light, Normal, Bold, Extra Bold, X Extra Bold), alignment (Left, Center, Right, Justified) and color of the label.

  • Type: The Type field is automatically generated depending upon the type of control used as noted above for the different layouts. For the list controls it will be ‘dhq_card_grid’.

  • Unique Name: A Unique Name is used to uniquely identify a control in your App. Every control that is added on the screen gets an auto-generated Unique Name based on the Label name given to the control.

  • Tooltip: This allows you to add the Tooltip text that would provide a hint to the user for providing input. The Tooltip icon would be visible if you switch on the Show tooltip icon toggle property available below.

  • Description: Is the description that you can add for your controls. The Description would only be visible if you switch on the Show Description toggle property available below.

  • Show Tooltip Icon: This allows you to toggle switch ON or OFF to show or hide the tooltip icon where the tooltip text would appear.

  • Show Description: This allows you to toggle switch ON or OFF to show or hide the Description text.

  • Hidden: The hidden option helps you to hide the control from the user. This might help to perform some computation you don’t want the user to see or if you want to show certain fields only when a specific condition is met/not met.

  • Caching: When the caching option is selected and if a LOOKUP formula is applied to this control, the value that the LOOKUP returns will be cached and the user will be able to see this value in the field even when the user accesses the microapp later with no connectivity. This option is required when you want your app to be accessible in offline mode as well and when getting the latest data from the sheets is not critical.

  • Hide Label: This option hides the label of the field from the view.

  • Trigger dependents: When you Disable Trigger Dependents, it helps you to reduce or optimize the unnecessary evaluation of the dependent control’s formula. For a detailed explanation refer to this article here. By default, Trigger dependents is enabled. However, in complex apps by switching it off, you would limit the evaluation in the dependent control and in turn ensure quicker response times.

Properties

  • Theme: Is the color theme to be used for the selected card

  • Layout: You can set the layout as a Card or List. If the card layout is selected you would then set the Card properties.

Card properties

These card properties are available only when you choose the Layout type as Card.

  • Max Width: Is the max-width to be set for the individual Cards

  • Spacing: Is the spacing between the two cards

Cards in Row

  • On Desktop: Specifies the number of cards to be displayed in a row on Desktop screen

  • On iPad/ tablet: Specifies the number of cards to be displayed in a row on iPad / tablet screen

Display properties

This includes the different components that would be displayed on the card. You can enable or disable displaying the Header, Cover Image, Title, and Detailed View. If you toggle switch ON the Detailed view, then a detailed view icon appears in the right-hand corner of the card. Simply click the icon against any of the records, the data for the selected row would be displayed in the detail view.

When you toggle switch ON the respective component the properties for each are then activated/displayed.

  • Headers: The Headers are the field name from the source. You can set the Font size, Font weight and the Font color.

  • Detailed view: This allows you to switch ON or OFF to show data in the Detailed view of your sheet data. Whenever you click any of the records it would display the row data as a detailed view.
    detailed view prop

The default look of the control provides a row format. However, with the Detailed View enabled, the Detailed view icon is displayed against each row.

The following detailed view properties can also be set.

  • Show Key Value Map: This would display the selected row as a key-value map instead of the default grid (as seen in above screenshot).

  • Customize By switching on Customize, you can customize the columns shown in the detailed view. By default all columns are shown, however, you can select a limited number as well if you want to give a quick look at the data.

  • Select column: When you enable Customize property above, you can then select the columns to be displayed in the Detailed view.
    detailview def1

  • Cover Image: If you have a file upload field in the sheet with file type uploaded being an Image, then that Field would be automatically taken as Cover image.

    • Column name: Select the image/file upload column that would be taken as the cover image.
    • Position: Is the position of the image in the card. It can be set as left, right, top, or bottom.
    • Full size: Whether the image would be displayed full size.
    • Object Fit: Specifies how the image would fit the container, as cover or contain.
    • Width: Is the default width to be used for the Cover image.
    • Max Height: Specifies the maximum Height for any image. Smaller images will appear as-is while the larger images would be fit into the maximum size specified.
    • On Error: Specifies the action in case of an error, either hide the image or show the default placeholder icon.
    • Border Radius: If the image is not a full-size image, you can specify the border-radius so that the border would appear curved to extent of the specified radius.

In case you do not specify the Cover image but have selected the Image / File upload field from the sheet as part of the display fields, then the image simply appears in the list of fields as seen below.

Title properties

This is used to specify the column that would appear as a Title for the Card. For example a product name, a contact name, a restaurant name and so on.

  • Column Name: Select the column name that would be used as the title.

  • Font Size: Is the Font size for the Title text

  • Font weight: Being the title, you can specify a separate Font weight so that it appears with an impact.

  • Font Color: Color of the title text.

Data Properties

Here you specify the Font Size, Font Weight, and the Font color of the remaining columns/ fields that you are displaying the data.

Spacing between properties: Is the space between two data columns.

Height: Specifies whether you can set the height manually or it would be set automatically as per the data.

Pagination: This allows you to enable pagination for your data. When you allow pagination some more properties would be added to your list of properties. You can have Limit Offset based pagination or Cursor Based Pagination.

pagination types

Typically for connectors that support Cursor-based pagination like that for Airtable, you would have to make sure that you select type as Cursor Based Pagination and use the OFFSET key from the respective Connector. For more details on cursor-based pagination, refer to this article here.

  • Rows per page: This allows you to set the index value of the default selected row.

Actions

A very useful feature with these list controls is the different actions available like search, download, refresh, filter, and quick filter.

You need to simply toggle switch ON the different action buttons. When you toggle switch ON the search bar, you can customize the Placeholder text.

When you switch ON Download, you would get the option to add a default file name for the downloaded file.

On Card Click

You can define the action to be taken when you have a Card Click event.

You can either just Select a card or Navigate with selection. If you select Navigate with selection, you would have to define the page to navigate to, the transition type, and whether Navigation would be with or without validation.

Actions

You can add actions that would be applicable to all the cards. Say, for example, you might have a task list or a leave request which has come to you for approval. The list can have an Approve and Reject action button applied so that for each of the records that you see you can take the necessary further action.

Now once the action buttons are added you need to ensure that you add the action flows on the click events of the specific actions.

Types of list controls

There are a few subtle differences in the appearance of each type of these cards. However the properties would remain the same. In case you compare the Gallery card and Gallery Card with Actions, they would virtually be the same. Only addition in the Gallery Card with Actions is a few default actions are provided right at the time of adding it to your screen. But you can even add the actions to the Gallery Card, there is no restriction to adding the actions as required.

Following are the different types of cards available:

How to use List Controls?

Under the Controls Menu, you can see the List control section, where all the available list controls are listed out. Select the control that you want and it gets added to the Designer.

Once you add the respective type of control, bind the source of data for the list control, it could be a sheet, a connector, query-string, etc as per your use case. Also, make sure that you add the Actions or Action buttons and the respective action click events with the necessary action flows.