Detail Page Layout and Dynamic Tabs

For certain types of documents, you can change the look and behavior of their detail page.

Many document types have an out-of-the-box layout, so their detail page works fine without any layout configuration. This default layout can be changed, and you can re-configure it based on your needs – for example, add a tab with a dashboard to visualize historical data for a specified customer.

However, for Custom Forms, you define the Steps and Tabs for the detail page from scratch.

Figure 1. Model of the detail page layout

The detail page consists of Steps (sub-screens) and each Step can have multiple Tabs. Certain document types allow only one Step.

Each Tab can can hold one of the common predefined items like Workflow, Attachments, etc., but can also contain a custom dashboard with some visualizations.

Dynamic Tabs Availability in Pricefx Versions

from 8.1 (Godfather)
- Quotes
- Rebates
from 9.0 (Hurricane)
- Sales Compensation
- Custom Forms
from 10.0 (Bee's Knees)
- Agreements & Promotions
from 11.1 (Paper Plane)
- Action Item

Layout Types

There are two layout types – DynamicTabs and DetailLayout. You cannot choose which one to use, because they are predefined for each document type detail page.

Capability	DynamicTabs	DetailLayout

Capability	DynamicTabs	DetailLayout
Used in document types	Custom Form Standalone, Action Item	Quote, Rebates, Compensation, Agreements & Promotions
Supports Steps	yes	no
Supports Tabs	yes	yes
Tabs can be dynamically hidden	yes	yes
Rendering	Usually, Steps are rendered horizontally and Tabs vertically. But you can select the layout type too.	Tabs are rendered horizontally.

Widgets

Each Tab is rendered using one Widget.

Widgets / Tab Types

The list of available widgets:

actions – List of "to do" actions.
attachments – List of attached documents. The user can add additional ones.
configurationWizards – Displays the specified Configuration Wizard.
customForms – Displays the specified "embedded" Custom Form.
dashboard – Displays the specified dashboard.
details – Shows details of the document.
documents – Shows 3 tabs (list of attachments, links to related quotes or other entities). In a Custom Form, until version 11.3, it renders as a tab combining attachments and documents. Since version 12.0, the tab renders only documents – and for backwards compatibility you can use Advanced Property customFormUseMultiTabDocuments in migrated partitions to keep the old behavior.
externalApp – Uses iframe to show an external application.
header – Shows details of the document (e.g. quote header).
items – Shows a list of document items (e.g. quote line items).
messages – Shows messages (used as a chat between users cooperating on the document).
notes – Provides a place where users can write notes about the document.
records – Shows a list of Rebate Records and Rebate Record Groups generated from the Rebate Agreement line items.
visualConfiguration – Shows the Formula Designer (visual formula configurator). Supported by Custom Forms.
workflow – Shows workflow details – with a list of approval workflow steps.
workflowHistory – Shows workflow history details.

Supported Widget Types

When configuring the layout of the detail page, you can use only those widgets, which are supported by the type of document you are configuring.

Here is the overview of supported widgets by document types.

Widget	Quote	Agreements and Promotions	Rebate Agreements	Compensation Plan	Custom Form Standalone	Action Item

Widget	Quote	Agreements and Promotions	Rebate Agreements	Compensation Plan	Custom Form Standalone	Action Item
customForms	yes	yes	yes	yes	yes	yes
dashboard	yes	yes	yes	yes	yes	yes
messages	yes	yes	yes	yes	yes	yes
notes	yes	yes	yes	yes	yes	yes
documents	yes	yes	yes	yes	yes	yes
attachments	yes	yes	yes	yes	yes	yes
actions	yes	yes	yes	yes	yes	-
workflow	yes	yes	yes	yes	yes	-
workflowHistory	yes	yes	yes	yes	yes	-
header	yes	yes	yes	yes	-	-
items	yes	yes	yes	yes	-	-
externalApp	yes	yes	yes	yes	-	-
details	-	-	-	-	yes	yes
configurationWizards
records	rationWizards	-	-	-	-	yes
records	-	-	yes	-	-	-

Widget Parameters

Some widgets can also have additional parameters, which influence their look and behavior.

details tab has the following parameters:
- "renderOutputsAs" : "inline" – to render the complex results not as a link, but directly their content. For example, instead of showing a link to open a chart, it renders the chart right away in the results area.
  { "name" : "My CFO config", "tabs" : [ { "name" : "Details", "type" : "details", "parameters" : { "renderOutputsAs" : "inline" } } ] }
items tab
- "renderOutputsAs" : "inline" – The same as the details tab.
- "hideSiderPanel": true – Hides the sider panel with Input Parameters and Calculations. Only the Items table is displayed.
- "flexibleLayout": true – Allows users to move the sider panel from the right side to the bottom part of the screen and vice versa.
- "defaultPlacement": "bottom" – Decides where the sider panel is displayed initially.
- "siderAlwaysWithTabs": true – Details, Input Parameters and Calculations in the sider panel are displayed in columns if there is enough screen space by default. Use this configuration to keep them always in tabs.

Configuration

The Steps and Tabs are defined as a JSON text, which is placed to the field configuration of the following types:

Syntax, all options and a full description of this configuration is available in the provided JSON Schema:

Download schema from version 6.0
download schema from version 9.1
Download latest (or upcoming) schema version

Samples

Quote detail page tabs sample configuration (using schema 6.0) – it still needs the "default" step.

{
  "default": {
    "name": "default",
    "tabs": {
      "header": {
        "name": "header",
        "type": "header"
      },
      "<items>": {
        "name": "items",
        "type": "items"
      },
      "<dashboard>": {
        "name": "<dashboard>",
        "type": "dashboard",
        "typeReference": "CustomerInsights_CustomerDetailView",
        "parameterMapping": {
          "Customer": "customerId",
          "Time Filter": "L12M"
        }

      }
    }
  }
}

Sample of a dynamic condition for disableCheck and hiddenCheck.

{
  "operator": "and",
  "criteria": [
    {
      "fieldName": "planStatus",
      "operator": "inSet",
      "value": [
        "DRAFT",
        "OFFER"
      ],
      "_constructor": "AdvancedCriteria"
    },
    {
      "operator": "or",
      "criteria": [
        {
          "fieldName": "planStatus",
          "operator": "inSet",
          "value": [
            "DRAFT",
            "OFFER"
          ],
          "_constructor": "AdvancedCriteria"
        },
        {
          "fieldName": "planStatus",
          "operator": "inSet",
          "value": [
            "DRAFT",
            "OFFER"
          ],
          "_constructor": "AdvancedCriteria"
        }
      ],
      "_constructor": "AdvancedCriteria"
    }
  ],
  "_constructor": "AdvancedCriteria"
}

Translation Keys

This is a list of default translation keys, which you can use in the JSON tabs layout configuration:

sfdc_entity_tabs_header (sfdc_quotes_tabs_header)
sfdc_entity_tabs_items (sfdc_quotes_tabs_items)
sfdc_entity_tabs_attachments (sfdc_quotes_tabs_attachments)
dynamicTab_workflow (sfdc_entity_tabs_workflow)
sfdc_entity_tabs_workflowHistory (sfdc_quotes_tabs_workflowHistory)
dynamicTab_messages (sfdc_entity_tabs_messages)
main_rebateRecordsTitle
dynamicTab_actions
dynamicTab_notes
dynamicTab_dashboard (common_dashboard)
dynamicTab_documents