Cue tile (configuration)

A cue tile is an element of a grid, detail, or dashboard layout block that is used to provide a visual representation of aggregated data from a portal entity. For example, it can display the number of documents of certain type.

To add a cue tile to a page

  1. In the backoffice, go to Content and expand the node of a grid page, detail page, or dashboard (home) depending on where you want to add a cue tile.
  2. Select the icon next to the corresponding layout block node ( grid, detail, or home dashboard). Alternatively, select and hold (or right-click) the node, and then select Create.
  3. Select Cue tile.
  4. On the header, enter the cue tile name that will be used to identify it in the backoffice.
  5. On the General tab, fill in general settings as follows:
    1. Titles - Specifies the settings where you can configure the title of various elements on this page.
      • Title - Specifies the title that will be displayed in the header of the created page or page element.
      • Subtitle - Specifies the subtitle that will be displayed in the header of the created page or page element.
    2. Icon - Specifies the image that will be displayed in front of the title if specified. Adding an icon is optional. You can leave this setting empty (in this case, the default icon, chosen by the development team, will be used) or choose an icon from one of the available icon libraries.
    3. Responsive behavior - Specifies the settings that define how this page part or UI element responds to different viewport widths by adjusting its width and visibility at each responsive breakpoint.
    4. Hide element - Specifies that the element will be hidden for specific member groups. Select one or several member groups, for which this layout block element will be hidden. Alternatively, you can select the ~All~ checkbox to hide it for all member groups (without the necessity to select every member group's checkbox) or select the Hide element checkbox to have all member groups selected at once.
    5. Description - Specifies a description of this layout block element.
    6. Content-from page - Specifies the page the content of which will be displayed instead of the content of this page when this page is opened via a direct link. The URL in the address bar will remain that of the original page. For a page element, filling in this setting is not required.
    7. Redirect-to page - Specifies the page that will be displayed instead of this page when this page is opened via a direct link. The URL in the address bar will be that of the target page. For a page element, filling in this setting is not required.
    8. Module assignment & protection - Specifies settings that allow you to assign this content element (localization, page, etc.) to an internal module as well as to protect this element from certain operations (copying, changing, deletion). Select the Configure button to configure module assignment & protection or the Change button to edit existing configuration if it has already been configured.
  6. On the Data source tab, specify the portal entity that will be used as data source for this cue tile as well as necessary filter. If the source of data is external, portal integration must be set up and configured with the corresponding external system.
    1. Entity - Specifies the portal entity aggregated data from which will be retrieved for this cue tile. The list of available entities depends on the system your portal is integrated with.
    2. Filters - Specifies the filter(s) which can be used to narrow down the records that will be used from the specified entity by specified criteria. You can add filters individually, in groups, or in combination of individual filters and groups. Grouped clauses operate as a single unit separate from the rest of the query, similar to putting parentheses around a mathematical equation or logic expression. The AND or OR operator specified for the filter group applies to the whole group. Setting filters is optional and depends on what kind of data you want to be displayed on the page.
      1. To add an individual filter, select Add content, select Filters, and the configure filter settings:
        • Title - Specifies the title of the filter.
        • Logic – Specifies the logic of the filter:
          • AND – Use this type to find records in the data source that meet the criteria in both the current and previous clause.
          • OR – Use this type to find records in the data source that meet the criteria in either the current or previous clause.
        • Field – Specifies the field from the source entity the value of which will be used to filter records on the page.
        • Operator – Specifies a symbol that denotes a logical operation.
        • Value – Specifies the value of the field that will be used to filter records on the page. You can specify constant value or use a method to retrieve data. Select Add content and configure the type of value and its settings:
          • Constant value – Specifies a constant value that will be used as a filter condition during lookup. If the value of the specified field is equal (or more, or less, etc., depending on the operator) to this value, the filter condition will be met.
          • Date-time value – Specifies a date-time value that will be used as a filter to retrieve data.
          • Value-from member field name – Specifies a field from the portal member settings, the value from which will be used as a filter.
          • Value from parent entity field – Specifies a field from a parent entity on the portal, the value from which will be used as a filter during lookup.
          • Value from entity - Specifies the entity and field from this entity the value from which will be used as the filtering condition for records in the entity table.
          • Address field – Specifies the name of a query string parameter (the part of a uniform resource locator (URL) that assigns values to specified parameters), which will be used as a condition for the field value in this filter.
          • Field – Specifies a field from the current entity (an entity, to which the field that you are configuring lookup settings for belongs) the value from which will be used as a filter during lookup. This may be useful if you want to see value for the lookup entity that are related to the current entity.
        • Disable current filter – Use this switch to temporarily disable the filter for this page.
      2. To add a filter group, select Add content, select  Filters group, configure the filter group settings below, and then select Create:
        • Title - Specifies the title of the filter.
        • Logic– Specifies the logic of the filter group:
          • AND – Use this type to find records in the data source that meet the criteria in both the current and previous clause.
          • OR – Use this type to find records in the data source that meet the criteria in either the current or previous clause.
        • Filters in group – Specifies filters that will belong to this filter group. The Logic setting above will be applied to the whole group of filters. Select Add content to add a new filter to the group, and configure its settings in a similar way you configure settings for individual filters.
        • Disable current filter - Specifies whether the current filter is disabled on this page.
        • Disable empty filter - Use this switch to disable filters that are empty and cannot be applied.
  7. On the Tiles tab, add tiles that will display data. You can add several tiles to break down aggregated data into logical parts. For example, if your cue tiles show the number of sales documents from a table, you can add tiles for each type of sales document, such as Invoices, credit memos, etc.
    1. Tiles setup - Select Add content to add a tile, and specify its settings. There are two types of tiles that you can add: static or dynamic tile. (1) A static tile displays record statistics filtered by a specific field value; for every field value, you have to manually set up a tile. (2) A dynamic tile displays record statistics for all or specifically chosen multiple values of a selected field from the data source; for every unique value, tiles will be generated automatically. For example, you are configuring tiles to show how many quote documents you have. These documents may have various statuses, and you want the document statistics for each status to be displayed on a separate tile. With the help of dynamic tiles, you don’t have to manually configure a tile/gauge/chart bar for each status; you only need to configure a single dynamic tile, based on the document status, and Xpand Portal will add tiles for every status automatically.
      1. Static tile:
        • Title - Specifies the title of the tile that will be displayed on the dashboard.
        • Image - Specifies the image that will be displayed in the tile.
        • Background - Specifies the settings for the tile background:
          • Background image - Specifies the tile background image that will be used if the tile value is within the condition range.
          • Background color - Specifies the tile background color that will be applied if the tile value is within the condition range.
        • Responsive behavior - pecifies the settings that define how this page part or UI element responds to different viewport widths by adjusting its width and visibility at each responsive breakpoint.
        • Aggregations - Specifies how data is aggregated in this tile. Select one of the following options:
          •  Sum value - A sum of all values of a field will be calculated and displayed in the tile. Select a field the values of which will be summed up on all records.
          • Average value - The average of all values of a field will be calculated and displayed in the tile. Select a field the average values of which will be calculated on all records.
          •  Max. value - Specifies that the highest value of all values of a field will displayed.  You will need to select a field the value of which will be calculated.
          •  Min. value - Specifies that the lowest value of all values of a field will displayed. You will need to select a field the value of which will be calculated.

            Caution

            Aggregation methods other than the default one (counting of records) may impact performance.
        • Use parent layout height  - Specifies whether the tile height will be adjusted to fit the layout block height. This setting is only available for dynamic tiles and may be useful for multiple tiles aligned on one line.
        • Conditional formatting rules - Specifies rules that define formatting that will be applied to the tile title, value, background (color and image) on condition that the tile value is within the range specified in the condition. This is the same setting as conditional formatting rules for all tiles, but specific to this tile. If you set up conditional formatting rules both on the tile page (for all tiles) and on the tile levels, the conditional formatting rules on the tile page level (for all tiles) will have a higher priority.
        • Font color - Specifies the font color that will be applied to the tile text if the tile value is within the condition range.
        • Template - Specifies the settings for the template that the tile field is based on. 
          • Template - Specifies a predefined template that will be used to display this field.
          • Value template - Specifies the format for the value in the tile. For example, currency: $#= value.toLocaleString() #
        • Filters - Specifies filters that will be applied when retrieve value. You can add filters individually, in groups, or in combination of individual filters and groups. Select Add content to add an individual or a filter group.
      2. Dynamic tile:
        • Field - Specifies the field from the data source, the values from which will be used for creating tiles. For every unique value, a new tile will be automatically added. You can set a filter by specific field values.
        • Title - Specifies the title of the tile that will be displayed on the dashboard.
        • Image - Specifies the image that will be displayed in the tile.
        • Background - Specifies the settings for the tile background:
          • Background image - Specifies the tile background image that will be used if the tile value is within the condition range.
          • Background color - Specifies the tile background color that will be applied if the tile value is within the condition range.
        • Responsive behavior - pecifies the settings that define how this page part or UI element responds to different viewport widths by adjusting its width and visibility at each responsive breakpoint.
        • Aggregations - Specifies how data is aggregated in this tile. Select one of the following options:
          •  Sum value - A sum of all values of a field will be calculated and displayed in the tile. Select a field the values of which will be summed up on all records.
          • Average value - The average of all values of a field will be calculated and displayed in the tile. Select a field the average values of which will be calculated on all records.
          •  Max. value - Specifies that the highest value of all values of a field will displayed.  You will need to select a field the value of which will be calculated.
          •  Min. value - Specifies that the lowest value of all values of a field will displayed. You will need to select a field the value of which will be calculated.

            Caution

            Aggregation methods other than the default one (counting of records) may impact performance.
        • Use parent layout height  - Specifies whether the tile height will be adjusted to fit the layout block height. This setting is only available for dynamic tiles and may be useful for multiple tiles aligned on one line.
        • Conditional formatting rules - Specifies rules that define formatting that will be applied to the tile title, value, background (color and image) on condition that the tile value is within the range specified in the condition. This is the same setting as conditional formatting rules for all tiles, but specific to this tile. If you set up conditional formatting rules both on the tile page (for all tiles) and on the tile levels, the conditional formatting rules on the tile page level (for all tiles) will have a higher priority.
        • Font color - Specifies the font color that will be applied to the tile text if the tile value is within the condition range.
        • Max. number of tiles - Specifies the maximum number of tiles that can be created automatically. This is useful if the field that is used for creating tiles may have many unique values, and you don't want your dashboard to be overcluttered with tiles. By default, the limit is 20 tiles.
        • Template - Specifies the settings for the template that the tile field is based on. 
          • Template - Specifies a predefined template that will be used to display this field.
          • Value template - Specifies the format for the value in the tile. For example, currency: $#= value.toLocaleString() #
        • Filters - Specifies filters that will be applied when retrieve value. You can add filters individually, in groups, or in combination of individual filters and groups. Select Add content to add an individual or a filter group.
        • Sorting - Specifies how dynamic tiles will be sorted. Sorting by amount is based on the total number of records shown on every tile. Sorting by value is based on the alphabetical or numeric order of the value of the field that is used for creating tiles.
    2. Conditional formatting rules - Specifies rules that define formatting that will be applied to the tile title, value, background (color and image) on condition that the tile value is within the range specified in the condition. You can set up conditional formatting rules for all tiles or separately per tile. Conditional formatting for all tiles will have a higher priority over the rules set up for a specific tile. Using conditional formatting is optional. Select Add conditional formatting rules to add a new conditional formatting rule.
      An example of tiles with formatting applied as a result of conditional formatting rules:
      • Condition range - Specifies the range of values that serves as a condition for applying the formatting set up for this condition rule. If a tile value is within the condition range, the rule formatting is applied to the tile.
        • Lower bound value - Specifies the lowest allowed value for the condition to be met. If the field is empty, there is no lower bound limit (all values below the upper bound value meet the condition).
        • Upper bound value - Specifies the highest allowed value for the condition to be met. If the field is empty, there is no upper bound limit (all values above the lower bound value meet the condition).
      • Title template - Specifies the formatting template that will be applied to the tile title if the condition rule is met. You can use the variable #=title#: for the title. If not specified, the dynamic filter title will be displayed.
      • Value template - Specifies the formatting that will be applied to the tile value if the tile value is within the condition range. You can use the variable #=value#: for the title. If not specified, the dynamic filter value will be displayed.
      • Background color - Specifies the tile background color that will be applied if the tile value is within the condition range.
      • Background image - Specifies the tile background image that will be used if the tile value is within the condition range.
      • Font color - Specifies the font color that will be applied to the tile text if the tile value is within the condition range.
        An example of tiles with formatting applied as a result of conditional formatting rules:
  8. Select Save and publish to save the changes and publish them on the front end. Optionally, if you were editing the page, you can select Save and preview to preview how the page will look like on the front end.

Note

The layout settings of the parent layout block determine how this layout block element will be displayed on the page (on a tab, on top or below of other content elements, etc.).