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

1. 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.
2. Choose your data:
   • The Title box contains the label shown to users as a filter when the search shows results across multiple models.
   • 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.

     3. From the Criteria lists, select the condition by which you want the property value to meet.
     4. 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.
   • 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.
3. Design your 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.
4. 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

     Note

     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.

              

   • 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 the 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.
5. Configure your general content settings:
   1. Optionally, add action buttons:
      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. 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.
   3. 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.

6. 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.
   3. When you are happy with your configuration, select UPDATE.

See more:

• About the hierarchical block

Reference:

• Content dialog box
• About the hierarchical block