Creating detail pages

A detail page is a page that displays detailed information about a record in the form of card with tabs. A detail page may also have lines. In CMS, detail pages can be identified by the icon. Detail pages are normally created as child pages to a grid page. Content of grid pages (field sets, grid, etc.) is enclosed into layout blocks or simple content pages as child pages to the detail page.

To create a grid page, you need to create several elements:

  • Detail page - the detail page itself that will host all other detail page elements, and link it with the parent grid page.
  • Layout blocks or simple content pages that will host the content of the grid page.
  • Layout block content elements (only what you need):
    • A header with field sets and/or extended field sets. A field set represents a set of fields that will be displayed in one column. If you want fields to be presented in several columns (useful when you have a lot of fields on the header), you need to create several field sets as child pages to the parent layout block.
    • Lines (grid). You can create a grid page for the detail page lines in the same way as an independent grid page; only in this case, you can create this grid page as a child page to the parent layout block within the grid page tree structure.
    • Extended field set. On detail (card) pages layout blocks, in addition to normal fields sets, you can add an extended field set. For fields in an extended field set, you can configure additional data types, which are not available in the standard field set. Extended field sets can be added along with normal field sets within the same layout block if necessary.
    • Layout block elements

A detail page can be available as a separate page, which is opened when the portal member edits the records on a grid page using the Edit action, or it can be embedded directly into a grid page where it will be shown in a separate layout block.

To create a new detail page

  1. In CMS, go to Content.
  2. Select the content node, and then select a grid page for which you want to create a detail page.
  3. Select the icon of the selected node (the icon appears when you point to the node title). Alternatively, select and hold (or right-click) the selected node, and then select Create.
  4. Select Detail page in the Create dialog window that appears.

  5. If you have at least one content template of the detail page type, the created template(s) will be available for selection to use as a basis for the new page. Otherwise, this step is not shown. You can select Blank in case you don't want to use a template.
  6. On the header, enter the page name that will be used to identify it in CMS.

  7. On the General tab, fill in general settings.
    • Title - Specifies the title that will be displayed in the header of the created page.
    • Subtitle - Specifies the subtitle that will be displayed in the header of the created page.
    • 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.
    • Width settings - Specifies the adaptive grid width settings for the detail page per device. The width is automatically adjusted depending on the device the page is opened from.
    • 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.
  8. On the Data source tab, specify the source of data for this grid page. If the source of data is external, portal integration must be set up and configured with the corresponding external system.
    • Entity - Specifies the table data from which data will be retrieved for this page. This table may represent any entity to suit your business needs. The list of available entities depends on the system your portal is integrated with.
    • Filters - Specifies the filter(s) which can be used to narrow down the records that will be retrieved 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.
      • To add an individual filter, select the icon, select Filters, and the configure filter settings:
        • Type – Specifies the type of the filter:
          • AND – Use this type to find records in the data source that meet the criteria in both the current clause and the previous clause.
          • OR – Use this type to find records in the data source that meet the criteria in either the current clause or the 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 specify constant value or use a method to retrieve data. Select the icon and configure the type of value and its settings:
          • Constant value – Specify 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.
          • Value-from member field name – Specify a field from the portal member settings, the value from which will be used as a filter.
          • Value from parent entity field – Specify a field from a parent entity on the portal, the value from which will be used as a filter during lookup.
          • Address field – Specify the name of a query string parameter (the part of a uniform resource locator (URL) which assigns values to specified parameters), which will be used a condition for the field value in this filter.
          • Date-time value – Specify a date-time value that will be used as a filter to retrieve data.
          • Field – Specify a field from the current entity (an entity, to which the field that you are configuring lookup settings for belongs to) 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.
      • To add a groups filters, select the icon, select  Filters group, and the configure filter group settings:
        • Type – Specifies the type of the filter group:
          • AND – Use this type to find records in the data source that meet the criteria in both the current clause and the previous clause.
          • OR – Use this type to find records in the data source that meet the criteria in either the current clause or the previous clause.
        • Filters in group – Specifies filters that will belong to this filter group. The Type setting above will be applied to the whole group of filters. Select the icon to add a new filter to the group, and configure its settings in a similar way you configure settings for individual filters.

    • Redirect Conditions - Specifies the rules that will be used to redirect the member to another page, page element or external URL if the configured conditions are met. This is optional. Select the icon to add a redirect condition:
      • Enabled - Specifies whether this redirect condition is enabled.
      • Title - Specifies the title of a page or UI element on a page to which redirection is performed.
      • Filters - Specifies the fields the values of which will be used as conditions to identify whether to redirect the member to another page or page element. E.g. To meet a condition, the value of a certain field must be equal to a certain value. Select the icon to add filters or filter groups.
      • Destination - Specifies the page, page element or external URL to which the member will be redirected when trying to open the detail page. Select the icon and select the destination type:
        • Internal - Specifies an internal destination to which the member will be redirected when trying to open the detail page if the condition is met.
          • Redirect-to page - Specifies an internal page or page element to which the member will be redirected when trying to open the detail page if the condition is met.
          • Query string - Specifies the query string that contains the address field the value from which will be compared with the value of the field specified as the field filter to define whether the data retrieval conditions are met. This setting can also be useful if you use the breadcrumbs on the page and want the breadcrumb trail to be available on the detail page after you are redirected to this detail page from another page. In this case, to take the breadcrumb from another page, for example, add the following query string: id=[[UniqueId]]&bc=[[breadCrumbLink]] 
        • External - Specifies an external page to which the member will be redirected when trying to open the detail page if the condition is met.
          • Redirect-to external URL - Specifies the URL of an external page to which the member will be redirected when trying to open the detail page if the condition is met.
  9. On the Permissions tab, configure member group permissions for this grid page. These permissions define visibility of fields, toolbar commands (actions) and JavaScript events that will be available on the page for members depending on the member group(s) they belong to. Select the icon to create a new permissions set. You can create several permissions sets to these page settings tailored to specific member groups according to your business needs. A portal member will have access to a page feature only if this member is assigned to a member group for which this feature is enabled and allowed.

      Note

    Normally, fields on a detail page are enclosed as field sets into layout blocks. Therefore, permissions for fields availability must also be configured in the settings for field sets.

  10. Optionally, can configure data masking in case you want to hide sensitive data in certain fields. On the Permissions tab, go to Data masking settings, select the  icon to add a new data masking rule set, and then fill in the fields as described below:
    1.  Data masking rules Specifies sets of criteria that must be fulfilled for data in the fields below to be masked in order to protect sensitive information. Select the  icon to add a new rule where you specify filters or filter groups that will be used as criteria that must  be met to mask data.

        Note

      At least one data masking rule must be configured, otherwise, data masking won't work. 

    2. Masked fields - Specifies the fields the data in which will be masked if the criteria in the data masking rules are fulfilled.
    3. Data masking symbol - Specifies the symbol that will be displayed instead of every character in the field value in case the field value must be hidden according to the data masking criteria. If a field meets the data masking criteria but is empty, no data masking symbol will be shown (i.e., the field will remain empty). The data masking pattern setting defines which types of characters will be hidden by this data masking symbol. For example: *
    4. Data masking pattern - Specifies a regular expression that defines which characters in the field value will be hidden in case the field value must be hidden according to the data masking criteria. For example, if you want to hide any single character that is a letter or a digit (but keep any other symbol, such as @), use the following expression: [a-zA-Z0-9] where [ ]: indicates a character set (meaning any character that matches any of the characters), a-z: represents all lowercase letters from 'a' to 'z', A-Z: represents all uppercase letters from 'A' to 'Z', and 0-9: represents all digits from '0' to '9'.

  11. 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.
  12. Go to the settings of the parent grid page, for the records of which this detail page should be opened upon selecting the icon, and set the Detail page setting on the Grid tab to the created detail page.

Creating a detail page is the initial stage of page configuration. Now you need to add layout block(s) to it, and then add content to the layout block(s), such as field sets, extended field sets, grid, or layout block elements.