Skip to main content

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

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 show the tasks in the list by selecting the Configure the list settings to automatically show task information from the foreign key relationship option.
  5. Select SAVE.

Filter data items

Don't use this filter to restrict users' access to data items. Data could still be accessed, for example, by using an API. Instead, use the model's access controls to control access to data. See our knowledge base article, Add an access control policy.

  1. Select the Filter data items option and under the Filter data items section, select the plus icon under either:
    • Meet ALL of the following conditions (and) - Hide the data items when the property value meets every condition you add.
    • Meet ANY of the following conditions (or) - Hide the data item when the value meets just one condition.
  2. From the Property list, select the model's property whose value you want to apply the condition. 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. For a date range property, you can add two properties, one for the start date and one for the end date.
  3. From the Criteria list, select the condition you want the value to meet for the data item to be hidden.
  4. In the Value box, enter the value that you want the condition to apply for the data item to be hidden.

Be careful when selecting properties. You can't use a property with a large amount of text, such as a Description if any property values exceed the limit for using a property as a filter. You can try to shorten the property values and try the next day again.

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 lookup properties, you can select the lookup options added to the model property.

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.

Sort your data items

  1. Select the Sort data items option.
  2. From the Property list, select the property by which you want to sort.
  3. From the Order list, select if you want to sort the properties in either "Ascending" or "Descending" order.
  4. Select CONTINUE.

Design your list

Configure your layout

  1. From the Layouts list, select how you want your list to show.
    • Row
      Row.png
    • Grid
      Grid.png
    • Mini grid
      MiniGrid.png
    • Map

      Note

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

      Map.png
    • Timeline

      Note

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

      Timeline.png
  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.
    GridorList.png

Configure your features

  1. From the Features list, select what elements you want in your list.
  2. If you want to show how many items are in your list, shown next to your list title, select the Show item count option.

General content settings

Add an action button

Optionally, add a button that opens one of the pages in your tenant or an external URL:

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 the plus icon (+).
  2. In the Title box, type in the text 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 - regular - Loads the Target list with pages from your Applaud tenant and opens the selected page in the same browser tab.
    • Open page - modal - Loads the Target list with pages from your Applaud tenant and opens the selected page in a modal window.
    • URL - same tab - You must type in the Target box the full website address. The entered webpage opens in the same tab taking the user out of the Applaud platform.
    • URL - new tab - You need to type in the full website address in the Target box, and the entered webpage opens in a new tab in the user's browser with the new external website.
  4. From the Target list, if you choose an "Open page" option from the Type of action list, select a page from the list of available pages in your Applaud tenant, or if you selected the "URL" option, enter 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 your selected color.

Show or hide the title and header bar

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

  • If you don't want a title on your block, clear the Show the title and header bar option.

Preferred width

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.

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

  • Automatic - Spans the width of the column on the page depending on the layout option you selected.
  • Full-width - This 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.

Background color

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 preconfigured color nearest to the one you want and then tweak it to what you want using the sliders.

ColorPicker.png





 		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 It 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 primary 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.
    RGBA.png
  • HSLA - Sets the color based on HSLA (hue, saturation, lightness, alpha) values.
    HSLA.png

Hide block

  • 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.
  • If you want only to show a certain number of items in the list at a time, select the Limit default number of list items option, and in the Items per page box, enter the number of items to want to limit the list to. You can expand the view to see the rest of the list by selecting "Show more" at the bottom of the list.
  • 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.
  • 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:
    • Hide when ALL of the following conditions are met (and) - hide this block when the selected data meets every condition you add.
    • Hide when ANY of the following conditions are met (or) - hide the block when the selected data meets just one of several conditions.
    1. Under the relevant section, select the plus icon (+).
    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.

Export

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 export data from the list, select Enable.
  2. Under the Exportable properties 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 filter you want the user to be able to export. You can create filters on the model's access control page, see our knowledge base article, Create a new filter.
    • By default, the lookup and foreign key values are shown in the export, if you want to view their ids, you can select the Include id values for lookup and foreign keys option.

Update

When you're happy with your list, select UPDATE.

See more:

Reference:

Sections in this article