Customizing dashboard

Xpand Portal provides a wide variety of options to customize the feel and look of the portal home page, also referred to as dashboard:

After you add a layout block to a page, and then try to add an element to a layout block, you will see which elements are supported for that type of page.

Grid page

You can add grid pages to display lines with records that can be based on external source. This may be useful if a grid is used often and you want it to be available on the home page for quick access. You can add grid pages as part of a layout block or independently. If a grid page is not within a layout block, it will be a separate page, available from the navigation pane under the Home menu. If you want a grid page to be available directly on the dashboard, you must add it as part of a layout block.

To add a grid page to the dashboard

  1. In CMS, go to Contents, and expand the Dashboard page node, and then select the icon next to the Dashboard page node (note that the name of the node may be different in your configuration). To embed the grid page into a layout block, select the icon next to the layout block node, in which you want to add it. The layout block must already be created at this point. If you create a grid page under the Dashboard page node, the grid will be on a separate page accessible from the menu under the Home menu item.
  2. In the Create pane, select Grid page.
  3. Specify the grid page settings in a similar way to creating a grid page as a stand-alone page.
  4. 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.

Layout block

Layout blocks are used to host various other dashboard elements, such as cue tile, gauge tile, grid page, HTML block, image banner, series chart, video block, etc., including another embedded layout block.

To add a layout block to the dashboard

  1. In CMS, go to Contents, and expand the Dashboard page node.
  2. Click the icon next to the Dashboard page node. Alternatively, select and hold (or right-click) the node, and then select Create.
  3. In the Create pane, select Layout block.

    Note

    Alternatively, you can create a layout block for the dashboard as follows: select the  Dashboard page node, go to the Dashboard tab, select Create, and then select Layout block from the drop-down list.

  4. On the header, enter the layout block name that will be used to identify it in CMS.
  5. On the General tab, fill in general settings as follows:
    1. Title - Specifies the title of the layout block that will be displayed on the page. If you do not want any title for the layout block, leave this field empty.
    2. Subtitle - Specifies the subtitle of the layout block that will be displayed on the page under the title. If you do not want any subtitle for the layout block, leave this field empty.
    3. Icon - Specifies the image that will be displayed next to the layout block title.
    4. Width settings - Specifies the adaptive width settings for the layout block per device. The width is automatically adjusted depending on the device the page is opened from.
    5. Hide element - This setting hides the layout block from the dashboard or detail page. It can be configured per member group. In the layout block page settings, on the General tab, in the Hide element setting, select one or several member groups, for which this layout block will be hidden. Alternatively, you can select the ~All~ check box to hide it for all member groups (without the necessity to select every member group's check box) or select the Hide element check box to have all member groups selected at once.
    6. Background color - Specifies the color that will be used as solid filled background for the layout block.
    7. Border color - Specifies the color of the border of this layout block's UI element on the page.
    8. Background image - Specifies the image that will be used as background for the layout block.
    9. Navigate-to page - Specifies the portal page that will be displayed when the portal member edits a record on the layout block. For layout blocks, this setting is not mandatory.
    10. Content-from page - Specifies the portal page that will be displayed instead of the created page. The path on the address bar will be that of the original page. Use this setting only if you want to redirect the member to another existing portal page. For layout blocks, this setting is not mandatory.
    11. Redirect-to page - Specifies the portal page that will be displayed instead of the created page. The path on the address bar will be that of the target page. Use this setting only if you want to redirect the member to another existing portal page. For layout blocks, this setting is not mandatory.
    12. Protect or Sign (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 Layout settings tab, fill in layout settings as follows:
    • View type - Specifies how content in the child layout blocks is presented:
      • Default (or empty)- With the default view type, child layout blocks will be displayed on top of each other or side by side depending on the layout block width. If you are going to use this view, you need to create a layout block for every type of detail page content (field set, grid) as a child page under the detail page.

      • Accordion - With this view type, the child layout blocks are collapsed on top of each other when you open open the page.
      • DropDown - With this view type, one child layout block will be displayed at a time, and other child layout blocks will be selectable from a drop-down menu.
      • Tab - With this view type, child layout blocks are displayed on tabs. The tabs are displayed above the content.
      • Tab (bottom) - With this view type, child layout blocks are displayed on tabs. The tabs are displayed below the content.
      • Tab (left) - With this view type, child layout blocks are displayed on tabs. The tabs are displayed to the left of the content.
      • Tab (right) - With this view type, child layout blocks are displayed on tabs. The tabs are displayed to the right of the content.
      • Wizard (tab view) - An alternative method of presenting data on tabs. This view tab currently works as the Default view.
    • Enable quick link - Specifies whether the layout block caption will appear as a link on the page header to navigate between layout blocks from the header. The header link will be displayed only when the page with this layout block is opened.
    • Heights - Specifies settings that allow you to configure the minimum, standard, and maximum height of the view elements in pixels on this layout block.
    • Collapsing - Specifies the settings that allow you to control the default state of the layout block, add a button that allows members to expand or collapse it, and configure how it can be expanded/collapsed.
      • Enabled - Specifies that this set of settings is activated.
      • Dimension - Specifies in which dimension the layout block can be expanded or collapsed.
        • Button position - Specifies the place of the button that expands/collapses the layout block on the layout block header.
        • Promoted content position - Specifies the place of the promoted content on the layout block header. Promoted content is shown in addition to the title when the layout block is collapsed. Promoted content may include rich text or another embedded content block(s).
      • Default state - Specifies the state of the layout block that will be used by default on opening the page.
      • Show button on hover - Specifies that the button that collapses or expands the layout block is visible only when you hover over its position on the layout block header. If this setting is disabled, the button is always visible.
      • Collapsed state icon - Specifies the icon that will be used for the button that expands or collapses the layout block when it is in the collapsed state.
      • Expanded state icon - Specifies the icon that will be used for the button that expands or collapses the layout block when it is in the expanded state.
      • Smooth collapsing/expanding - Specifies that collapsing or expanding of the layout block is animated smoothly. If this setting is disabled, collapsing/expanding will appear to have abrupt movement.
      • Promoted content - Specifies rich text that will be shown as promoted content on the layout block header. Rich text allows you to incorporate various visual elements and enhancements such as different fonts, font sizes, colors, styles (bold, italic, underline), alignment, lists, hyperlinks, and even embedded images or multimedia content. For example, a piece of code that shows the formatted caption of a specific entity field and its value: <p><span style="background-color: #e9f0ff; display: inline-block; padding: 5px;">Shipment Date: [[shipmentdate]]</span></p> where [[shipmentdate]] is a variable that will be replaced with the value of the corresponding entity field.
        • Text - Specifies rich text that will be shown as promoted content on the layout block header. Rich text allows you to incorporate various visual elements and enhancements such as different fonts, font sizes, colors, styles (bold, italic, underline), alignment, lists, hyperlinks, and even embedded images or multimedia content.
        • Show vertically - Specifies rich text that will be shown as promoted content on the layout block header. Rich text allows you to incorporate various visual elements and enhancements such as different fonts, font sizes, colors, styles (bold, italic, underline), alignment, lists, hyperlinks, and even embedded images or multimedia content.
    • Maximizing - Specifies the settings that allow you to add buttons that fit the content of the layout block into a specific area.
      • Enable - Specifies that this set of settings is activated.
      • Mode - Specifies the area that the content of the layout block will fit into when the button of this setting set is used by the member on the layout block header:
        • Browser's content area - The layout block will be maximized to fit its content into the visible area of a browser web page.
        • Parent block's content area - The layout block will be resized to fit its content into the content area of the parent layout block if any.
        • Portal page content area - The layout block will be resized to fit its content into the content area of a portal page, which is the area between the header and the footer.
      • Show button on hover - Specifies that the button that resizes the layout block to fit its content into a specific area is visible only when you hover over its position on the layout block header. If this setting is disabled, the button is always visible.

    • Layout block style - Specifies the style that defines how the layout block content will be displayed on the page in relation to other layout blocks. By default, the layout block will occupy all available space from top to bottom taking into account the width settings. This can be useful when you want to display related grids on a single page where one grid would display records only for a selected record on the related grid (for grid relation to work, the grid's layout block must have a style applied here). For example:
      Two related grids (one under the other) with no records selected:

      With a record selected:

  7. 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.
  8. To add content to the layout block, add a child item or items, such as a Cue tile, Gauge tile, Grid page, HTML block, Image banner, Series chart, Video block or another embedded layout block.

To manage dashboard layout blocks

  1. Open the Dashboard page settings.
  2. Go to the Dashboard tab where you can do the following:
    • Unpublish a layout block - Select one or several dashboards from the list, and then select Unpublish to hide them from the front end.
    • Publish a layout block - Select a previously unpublished layout block, and then select Publish to make it available on the front end again.
    • Copy a layout block - Select an existing dashboard, and then select Copy to create a copy, and select a location of the portal where to copy. This is useful when you need to create a similar layout block with minor differences.
    • Delete a layout block - Select an existing dashboard, and then select Delete to move to the recycle bin.
    • Open the layout block settings - Select the name of a layout block to open its settings page.

Note

All these actions are also available from the Actions menu in the top right corner. Actions from the Actions menu are applied to pages or page elements that you select in the Content pane.

Layout block sorting

The order of layout blocks under the home page determines which layout blocks will be rendered on the dashboard page first. To rearrange the content of your dashboard, you can resort the layout blocks:

  1. In CMS, go to Contents, select the icon next the Dashboard page node.
  2. Select Do something else.

    Note

    Alternatively, you can select the Dashboard page node, and then select Actions in the top right corner or you can select and hold (or right-click) the node, and then select Create.

  3. Select Sort.
  4. Drag the layout blocks until they are in the desired order. Layout blocks with the lost sort order (higher on the list) will be displayed on the dashboard first unless other settings (such as permissions that can hide a dashboard element) are applied.
  5. 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.

Simple content page

This is a page with simple content, such as images, text, links, macros, etc. This content is not based on data source. You can use custom styles for this type of content. If you want simple content to be displayed directly on the dashboard, you must add it to a layout block in the form of HTML block.

To add a simple content page to the Home menu

  1. In CMS, go to Contents, and select the icon next to the Dashboard page node. Alternatively, select and hold (or right-click) the node, and then select Create.
  2. Select Simple content.
  3. On the header, enter the simple content page name that will be used to identify it in CMS.
  4. On the General tab, fill in general settings as follows:
    • Title - Specifies the title of the simple content page that will be displayed on the page.
    • Subtitle - Specifies the subtitle of the simple content page that will be displayed on the page under the title.
    • Browser tab title - Specifies the title of the web browser tab that will be displayed when the page is opened and the member point to the browser tab.
    • Hide header links - Use this switch to hide or make visible again the links, which can be added when you configure site localization, in the page header.
    • Show QR code – Use this switch to display a Quick Response (QR) code in the bottom right corner of the page. The QR code contains the link to this page. You can then publish the generated QR code wherever you need, which will open this page on the portal.
    • Menu settings
      • Menu item title -Specifies the title of the menu item, which will be displayed in the navigation pane for this page.
      • Hide menu item - Specifies whether the menu item for this page will be hidden, and for which member groups. Only members that were added to the members groups that you select here will have this menu item available in their navigation pane. If you leave this check box cleared, the menu item will be visible to all member groups.
      • Hide breadcrumb - Use this switch to hide or make visible again the page breadcrumb trail at the top of the page. A breadcrumb trail is used as a navigational aid to help portal members keep track and maintain awareness of their locations within the portal.
      • Menu item icon - Specifies the icon of the menu item for this page. Select the square and browse to the icon in the portal media library.
      • Menu item title color - Specifies the color of the menu item for this page.
      • Split menu - Specifies whether a split line will be displayed after the menu item of this page.
      • Compact menu - Specifies whether menu items will be displayed as icons in the main menu (navigation pane) for this page.
      • Hidden menu - Specifies whether the main menu (navigation pane) will be hidden when this page is opened. The navigation can always be accessed by selecting the corresponding icon at the top of the page.
    • Content-from page - Specifies the portal page that will be displayed instead of the created page. The path on the address bar will be that of the original page. Use this setting only if you want to redirect the member to another existing portal page. Select Add to add a page that will be displayed instead of the source page.
    • Redirect-to page - Specifies the portal page that will be displayed instead of the created page. The path on the address bar will be that of the target page. Use this setting only if you want to redirect the member to another existing portal page. Select Add to add a page that will be displayed instead of the source page.
    • 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.
  5. On the Content tab, in the Body Content field, enter the content of this HTML block and apply the formatting. For example, you can add text, images, links, macros.
  6. 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.

    Because this page is not in a layout block, it becomes available from the menu under the menu item that corresponds to the simple content page's parent node (the Dashboard page in this case).

Search page

A page with one or several grid pages that you can search through. if you want grid pages to be displayed directly on the dashboard, you must add them as Grid pages in a dashboard layout block. A Search page will be accessible from the menu.

To add a Search page to the Home menu

  1. In CMS, go to Contents, and select the icon next to the Dashboard page node.
  2. Select XSearch.Page.
  3. On the header, enter the simple content page name that will be used to identify it in CMS.
  4. On the General tab, fill in general settings as follows:
    • Title - Specifies the title of the simple content page that will be displayed on the page.
    • Subtitle - Specifies the subtitle of the simple content page that will be displayed on the page under the title.
      Browser tab title - Specifies the title of the web browser tab that will be displayed when the page is opened and the member point to the browser tab.
    • Hide header links - Use this switch to hide or make visible again the links, which can be added when you configure site localization, in the page header.
    • Show QR code – Use this switch to display a Quick Response (QR) code in the bottom right corner of the page. The QR code contains the link to this page. You can then publish the generated QR code wherever you need, which will open this page on the portal.
    • Menu settings
      • Menu item title -Specifies the title of the menu item, which will be displayed in the navigation pane for this page.
      • Hide menu item - Specifies whether the menu item for this page will be hidden, and for which member groups. Only members that were added to the members groups that you select here will have this menu item available in their navigation pane. If you leave this check box cleared, the menu item will be visible to all member groups.
      • Hide breadcrumb - Use this switch to hide or make visible again the page breadcrumb trail at the top of the page. A breadcrumb trail is used as a navigational aid to help portal members keep track and maintain awareness of their locations within the portal.
      • Menu item icon - Specifies the icon of the menu item for this page. Select the square and browse to the icon in the portal media library. When choosing an icon, select any icon library set except umbraco-icon because icons from this icon library are not meant to be used with front end elements – this may cause bugs and visual glitches.
      • Menu item title color - Specifies the color of the menu item for this page.
      • Split menu - Specifies whether a split line will be displayed after the menu item of this page.
      • Compact menu - Specifies whether menu items will be displayed as icons in the main menu (navigation pane) for this page.
        Hidden menu - Specifies whether the main menu (navigation pane) will be hidden when this page is opened. The navigation can always be accessed by selecting the corresponding icon at the top of the page.
    • Content-from page - Specifies the portal page that will be displayed instead of the created page. The path on the address bar will be that of the original page. Use this setting only if you want to redirect the member to another existing portal page. Select Add to add a page that will be displayed instead of the source page.
    • Redirect-to page - Specifies the portal page that will be displayed instead of the created page. The path on the address bar will be that of the target page. Use this setting only if you want to redirect the member to another existing portal page. Select Add to add a page that will be displayed instead of the source page.
    • 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.
  5. On the XSearch.Page.Tab tab, under sourceEntity, specify the portal entities and related grids that you want to available for searching on this search page. Select the icon to add a source entity.
    • Entity - Specifies the portal entity that defines which grids you will be able to add to the search page. If the source of data is external, portal integration must be set up and configured with the corresponding external system.
    • Related grid - Specifies the grid that will be added to the search page, the records of which portal members will be able to search. Grids available for selection depend on the specified portal entity. The grids must be already created.
  6. Select the icon again to add more grids for searching if necessary.
  7. 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.

Because this page is not in a layout block, it becomes available from the menu under the menu item that corresponds to the simple content page's parent node (the Dashboard page in this case).