Horizontal layout: Example

This guide is an example of how you can adapt the appearance in the App Designer to suit your requirements using nesting for different elements.

In the example, you will see how many tasks are linked with a contact. The tasks are listed by priority. For this, we have inserted a Group element into a contact data record, into which we can display the business metrics clearly using the horizontal layout.

Do the following to recreate this display:

Inserting element groups and a horizontal layout

  1. At the required point, insert the Group element.
  2. Click Extend group and select Horizontal layout.
  3. The horizontal layout is inserted.
  5. Click the white area below the Extend group button to open the settings for the group.
  6. In the Header field enter the title you wish to use, for instance, Tasks by priority
  7. Click Close to save your settings.

Adding the first business metric

  1. Click Extend column and select Business metric.
  2. Define the desired settings for the business metric. In the example, you will see all the linked tasks which are priority A displayed in the first business metric field. The following settings were used to do this:

  3. Field

    Setting

    Data source type

    Aggregation

    Heading

    A

    Data record type

    Tasks

    Aggregation function

    Number of data records

    Data source

    Linked data records

    Automatic update (in minutes)

    Never

    Background color

    #B71C1C

  5. Using these settings, all the linked tasks will be displayed, independent of their priority.

  6. Now, you need to change the settings for the correct filtering of the priorities. Click the newly inserted business metric to open the settings.
  8. Click Edit behind the data source.
  9. The Aggregation window will open.
  10. Click Adjust filter.
  11. The Default mode window will open.
  12. Enter the Priority is equal to A filter condition and click Apply.
  13. Finally, click Apply in the Aggregation window.
  14. Consequently, the business metric will be changed and you will only see how many tasks with priority A are remaining. You can now close the Business metric window.

Inserting a second business metric

  1. Click Add column.
  2. Click the newly inserted Extend column button and then select Business metric.
  4. The settings will be almost the same as those you used when inserting the first business metric value, apart from the fact that you are adding a different header and color.

  5. Field

    Setting

    Data source type

    Aggregation

    Heading

    B

    Data record type

    Tasks

    Aggregation function

    Number of data records

    Data source

    Linked data records

    Automatic update (in minutes)

    Never

    Background color

    #E65100

  7. Using these settings, all the linked tasks will be displayed, independent of their priority.

  8. Now, you need to change the settings for the correct filtering of the priorities. Use the same steps as you did for the first business metric, until you get to the filter condition, when you should enter Priority is equal to B
  9. Now you have inserted 2 business metrics:

Inserting a third business metric

  1. Click Add column.
  2. Click the newly inserted Extend column button and then select Business metric.
  3. The settings will be almost the same as those you used when inserting the first business metric value, apart from the fact that you are adding a different header and color.

  4. Field

    Setting

    Data source type

    Aggregation

    Heading

    C

    Data record type

    Tasks

    Aggregation function

    Number of data records

    Data source

    Linked data records

    Automatic update (in minutes)

    Never

    Background color

    #1B5E20

  6. Using these settings, all the linked tasks will be displayed, independent of their priority.

  7. Now, you need to change the settings for the correct filtering of the priorities. Use the same steps as you did for the first business metric, until you get to the filter condition, when you should enter Priority is equal to C.
  8. Now you have inserted 3 business metrics:

  10. The business metrics are now displayed below one another and require lots of space. In the next step, we will show you how you can create a more compact view, by changing the column size for the B and C priorities.

Changing column size

  1. Click the white area between the second business metric and the Extend column button. The area is marked in yellow in the following image.
  3. The Column window will open
  4. Enter the following values:

  5. Field

    Setting

    Minimal column width

    300

    Maximal column width

    300

    Device classes

    No restrictions

    Hide automatically

    Default (activated)

  7. Click Close to save your settings.
  8. The settings are saved, but the order of the columns has not yet been changed. To change the order, you will have to change the width of the third columns first.
  9. Click the white area between the third business metric and the Extend column button.
  10. Enter the following values:

  11. Field

    Setting

    Minimal column width

    100

    Maximal column width

    100

    Device classes

    No restrictions

    Hide automatically

    Default (activated)

  13. Click Close.
  14. The setting is saved. The second and third columns are now displayed in one row.