Add a list block

Prerequisites

• Create a model with the data you need. See our knowledge base article, Create a new model.
• Open an existing page or create a new one. See our knowledge base article, Add a new page and header.
• You might want to create a form so you can add data to your model. See our knowledge base article, Add a Form block.

Procedure

1. Add a list block to your page:
   1. On your page, select ADD CONTENT , and in the Content dialog box, select the List block.
   2. Scroll down and in the Title box, give your list a meaningful name.
   3. From the Model list, select the model whose data you want to appear in the list.
   4. If you select a model linked to the Task model by a foreign key, you can choose to show the tasks in the list by selecting the option, Configure the list settings to automatically show task information from the foreign key relationship.
   5. Select SAVE.
2. Optionally, filter data items. Otherwise, select CONTINUE.
   1. To restrict the user's data in this block, select the Filter data items option. The options vary, depending on the property that you have chosen.
      1. Under the Filter data items section, if you want to hide the selected data when it meets every condition you add, add a condition under the Meet ALL of the following conditions (and) section. Otherwise, if you want to hide the selected data when it meets just one of several conditions, add your conditions under the Meet ANY of the following conditions (or) section. Under the relevant section, select .
      2. From the Property list, select the model's property. For a date range property, you can add two properties, one for the start date and one for the end date.

         Tip

         To pass is the Object ID so that the data is relevant, you can choose the settings:

         • Property: "Id"
         • Criteria: "is any of"
         • Value: "objected"

         For example, you choose the "Id" Property "is any of" the Value "objectId" to only view data based on the signed-in user, or change to "is not any of" to prevent the user from viewing data based on the signed-in user.

      3. From the Criteria list, select the condition you want the property value to meet for the block to be hidden.
      4. In the Value box, enter the property's value that you want the condition to meet for the block to be hidden.

         Tip

         • For lookup properties, you can select a lookup option entered when you added the property to the model.
         • For foreign key properties, you can select any values against the default label property of the linked model. However, if there is nothing to select, there might not be any values for the property.
   2. To make sure your list is sorted in the way you want, select the Sort data items option.
      1. From the Property list, select the property you want to sort by.
      2. From the Order lit, select if you want to sort the properties in either "Ascending" or in the "Descending" order.
   3. Select CONTINUE.
3. Design how you want your list to look and what features you want.
   1. From the Layouts list, select how you want your list to be laid out.
      • Row
        
      • Grid
        
      • Mini grid
        
      • Map

        Note

        You need to set the Google Maps API Key on the Settings page. See our knowledge base article, Google Maps API Key.

        
      • Timeline

        Note

        To use the timeline, you need to sort your data items by date in the order you want.

        
   2. If you select more than one layout from the Default layout list, select which one you want to show when the user first opens the page. For example, if you select grid and list layouts, the user can toggle between a grid and a list with the icons.
      
   3. From the Features list, select what elements you want in your list.
   4. If you want to show how many items are in your list, shown next to your list title, select the Show item count option.
4. Configure your list's features you selected:
   • Text
   • Timeline
   • Avatar / icon / image
   • Primary action
   • Secondary actions
   • Chips
   • Stepper
   • Searching, sorting, and filtering
   • On-screen guidance
   • Grouping
   • Sub list
   • Form block
5. Customize General content settings for your list block:
   1. Optionally, add a button that opens one of the pages in your tenant or an external URL:

      Note

      Actions adhere to the model's access control policies. So if a user doesn't have the "Create" permission, any buttons that allow you to add a record are hidden from that user.

      1. Under General content settings, next to Action buttons* select, .
      2. In the Title box, type in the text that you want to appear on your button.
      3. Under the Type of action section, from the Opens in: list, select what and how you want the button to open.
         • Open page - Loads the Target list with pages from your Applaud tenant.
         • URL - You need to type in the full website address in the Target box.
         • Regular / Same tab - Takes the user away from the current page to the new page.
         • Modal - Keeps the user on the page but opens a dialog box with the new page contained in it.
         • New tab - Opens a new tab in the user's browser with the new external website.
      4. From the Target list, select a page from the list of available pages in your Applaud tenant or type the full URL address, for example, https://www.google.com.
      5. From the Icon list, select an icon for your button and from the Color picker, select a color for your button.
      6. From the Weight list, select how you want your button to appear:
         • Normal - The button appears with a colored rectangle background with black text.
         • Light - The button doesn't have a background, and the text is the color you selected.
      7. From the Hide/show based on a model property list, select a property, and then from the Condition list, select either the Hide if true option or the Show if true option.
   2. If you don't want a title on your block, clear the Show the title and header bar option.

      Caution

      Hiding the title and header bar also hides any action buttons you may have included.

   3. To configure how wide you want your block, from the Preferred width list, select an option:

      Note

      These options are affected by your Page layout options, which you configure in the Page settings dialog. See our knowledge base article, Configure your page settings.

      • Automatic - Spans the width of the column on the page depending on what page layout option you have selected.
      • Full-width - Spans the width of all columns but doesn't go beyond the margins on either side of the page unless you select the Edge-to-edge option.
      • Two-third - If you have a three-column page layout, this spans across two of the columns. If you have a two-column page layout set, this spans just beyond the first column, but further blocks won't appear above the advert in the second column, only below it.
      • Half-width - If you have the three-column page layout, this spans across a column and a half. If you have a two-column page layout, this spans one column.
   4. To set the Background color of your block, select the color of your choice. The color picker shows a list of preconfigured colors with 100% opacity or fully opaque.

      Tip

      You can select a pre-configured color nearest to the one you want and then tweak it to what you want using the sliders.

      	1. Color palette	A chart of preconfigured colors.
      	2. Color gradient panel	The color gradient panel shows a mixture of two linear color gradients, your chosen color, and black. The color you choose reflects in the color gradient panel instantly showing where your selected color appears on the panel. You can choose a lighter or darker version of the chosen color from the panel.
      	3. Sample color	Shows the color you've chosen, and that will be applied.
      	4. Hue slider	This slider has a linear gradient of colors. You can choose the main hue you want.
      	5. Opacity slider	Controls the transparency of the color.
      	6. Color mode	This switches between the color value modes: HEX - Sets the color based on a Hexadecimal code value. RGBA - Sets the color based on RBGA (red, green, blue, alpha) decimal values. HSLA - Sets the color based on HSLA (hue, saturation, lightness, alpha) values.

   5. If you want to prevent this block from being displayed on specific devices from the Hide on list, select those conditions where you want to hide this block.
   6. If you want to prevent this block from being displayed when there are no items in the list, select the Hide this block when there are no items to show option.
   7. Restrict or allow viewing further by adding custom filters to your block. You can base these filters on anything such as role type, department, or location. Select the Hide or show this block using filters option and set your Conditions.

      If you want to hide this block when the selected data meets every condition you add, add a condition under the Hide when ALL of the following conditions are met (and) section. Otherwise, if you want to hide the block when the selected data meets just one of several conditions, add your conditions under the Hide when ANY of the following conditions are met (or) section.

      1. Under the relevant section, select .
      2. From the Property list, select the model's property.
      3. From the Criteria list, select the condition you want the property value to meet for the block to be hidden.
      4. In the Value box, enter the property's value you want the condition to meet for the block to be hidden.
   8. If you want to configure your list block to have finite pagination, so your users don't have to scroll through all list items to see content beneath it, select the Limit default number of list items option, and in the Items per page box, type in how many list items you want to show on each page. Then, the user sees a Show more button at the end of a list block. When they select it, the page loads more list items beneath the current items. The same number of new items load as you specify here, and the Show more button continues to show until there are no more results to display.
6. Choose if you want to add an Export button to your list, so when a user selects Export, Applaud sends them an email with a link to download the exported data.
   1. Under the Export section, if you want to let your user to export data from the list, select Enable.
   2. Under the Exportable property section, select if you want to make:
      • All accessible - When a user selects Export, all the model properties are exported.
      • Use a filter to restrict the exportable properties - When a user selects Export, only the selected properties are included in the exported file.
        • From the Properties filter list, select the property you want the user to be able to export.
        • Alternatively, you can select to create a new one. This takes you to the Export page of the model so that you can add a new filter. See our knowledge base article, Exporting data from your model to update it.
7. When you're happy with your list, select UPDATE.

See more:

• About the list block

Reference:

• Content dialog box
• Settings: (List)