Skip to main content

Add a hierarchical block to your page

Prerequisites

  • Create a model with the data you need. See our knowledge base article, Create a new model.
    • Make sure that the model you want to use, has a foreign key property that relates back to itself.
  • Open an existing page or create a new one. See our knowledge base article, Add a new page and header.

Procedure

Add a hierarchical block to your page

  1. On your page, select ADD CONTENT, and in the Content dialog box, select the Hierarchical block.
  2. Scroll down and in the Title box, type in a meaningful name. For example, "Org chart."
  3. From the Model list, select the model whose data you want to use.
  4. Select SAVE.

Choose your data

Title

The Title box contains the label shown to users as a filter when the search shows results across multiple models.

Filter data items

If you want to restrict the records to a filter, you can select the Filter data items option.

  1. To only show the organization chart cards for people with a property value that meets every condition, add a condition under the Meet ALL of the following conditions (and) section. Otherwise, if you want to hide the people when the selected data meets just one of several conditions, add your conditions under the Meet ANY of the following conditions (or) section.
  2. From the Property list, select the property by which you want to filter.

    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.

      1. From the Criteria lists, select the condition by which you want the property value to meet.
      2. In the Value box, either select or type the value you want the condition to meet.
        • 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.

Sort data items

If you would like to sort by the property, for example by the first name. Select the Sort data items option.

      1. From the Property list, select the property you want to sort by. For example, the first name.
      2. From the Order list, select to sort by either Ascending or Descending.
      3. Optionally, add more sorting options.

Design 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 that you want to appear on your chip.
  4. From the Color picker, choose the color of your chip.

Customize 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.

Finish

When you are happy with your configuration, select UPDATE.

See more:

Reference:

Sections in this article