Skip to main content

Design your hierarchical list

Hierarchical layout

  1. Under the Hierarchical layout section, from the Hierarchical relationship list, choose the relationship that you want.
  2. From the Has children icon list, you can either accept the default icon or choose your own.
  3. From the Features list, select the features you would like to include. You need to configure each feature you select.

Configure your features

Text

  1. Under the Text section, from the Title list, select the property to populate the main element of your block.
  2. From the Subtitle list, select the property to populate text that appears under the main title element of your block. This text is less prominent than the title text.

Primary action

If you selected to display a list of the tasks linked by the foreign key to the model, you wouldn't see these options. Applaud sets these for standard models automatically, for example, the Task model. The Primary action links to whatever the standard task links to, either the task details or another place configured in the task workflow.

To choose what happens when you select the record itself, under the Primary action section, from the Link To options:

  • If you want to open a page you've created, select the Applaud Cloud Page option.
    1. From the Page list, select the page that you want to open.
    2. From the Link target list, select if you want the page to open:
      • In the current window - Opens in the same browser tab.
      • In a new window - Opens in a new browser tab.
      • In a modal - Opens in a dialog box.
  • If you want to open another page external to your Applaud tenant, select the External Hyperlink option.
    1. In the Hyperlink box, type in the website address of the page that you want to open.
    2. From the Link target list, select if you want the page to open:
      • In the current window - Opens in the same browser tab.
      • In a new window - Opens in a new browser tab.
      • In a modal - Opens in a dialog box.

        In this example, we created a new page with a form content block linked to the same model. Then we selected to link to the new page and open it in a modal when you select the record card in the list.

        PrimaryAction.png

Secondary actions

To add action links to a context menu for each record:

  1. In the Title box, type in the text for your link label.
  2. From the Link to list, select the page you want to open.
  3. From the Link target list, select if you want the page to open:
    • In the current window - Opens in the same browser tab.
    • In a new window - Opens in a new browser tab.
    • In a modal - Opens in a dialog box.
  4. You can add an icon to your link from the Icon list, search by typing a description of the icon you want to use, and select it from the list.

Avatar

  1. From the Image property list, select the property you want to use.
  2. From the Placeholder text list, select what you want to appear in place of no avatar being present.

Chips

  1. Under the Chips section, from the Property list, select the property that you want to show.
  2. From the Condition list, select if you want the chip to show if the property is true or is false.
  3. In the Text box, type in the text you want to appear on your chip.
  4. From the Color picker, choose the color of your chip.

General content settings for your block

Action buttons

  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 - 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 available pages in your Applaud tenant or type the complete 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.
  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.

Hide or show this block using filters

Show or hide this content block when certain conditions are met. For example, show to a manager but hide from a non-manager. You can base these filters on anything, such as job role, department, or location.

  1. Select the Hide or show this block using filters option.
  2. Under the Conditions section:
    • Hide when ALL of the following conditions are met (and) - If you want to hide this block when the selected data meets every condition you add, add a condition under this section.
    • Hide when ANY of the following conditions are met (or) - If you want to hide the block when the selected data meets just one of several conditions, add your conditions under this section.
  3. From the Property list, select the model's property.
  4. From the Criteria list, select the condition you want the property value to meet for the block to be hidden.
  5. In the Value box, enter the property's value you want the condition to meet for the block to be hidden.
  • For lookup properties, you can select a lookup option.
  • 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.

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.

  1. Color palette
    A chart of preconfigured colors. Scroll down to see more colors. Not available in the call-to-action content block.
  2. Color gradient panel
    A mixture of two linear color gradients. Once you select a color from the palette, you can use this panel to pick the color you want.
  3. Sample color
    Shows the color you've chosen, and that will be applied.
  4. Hue slider
    A linear gradient of colors. You can choose the main hue you want.
  5. Opacity slider
    Controls the transparency of the color. Use it to brighten or darken your chosen color.
  6. Color mode
    If you know the HEX (Hexadecimal) code you want to use, you can enter it here. You also have the option to toggle to two other formats.
    RGBA - (red, green, blue, alpha) decimal values.

HSLA - (hue, saturation, lightness, alpha) values.

Export

Optionally, choose if you want to download an image of your organization chart.

  1. If you want a button to appear so that your users can download an image of the organizational chart. Under the Export section, select the Enable image export option.
  2. In the Export file name box, type in the filename you want to give your exported image.
  • When you are happy with your configuration, select UPDATE.

See more:

Reference:

Sections in this article