Record Page Layout

Updated 

The Record Page Builder offers the functionality to add new sections and tabs into a Record Page. The standard default layout for Record Pages is located in the Global Record Pages.

Here are some other frequently utilized configurations for Record Page Layouts that may require setup:

1. Adding a Coaching Widget in the Case Analytics Page

A screenshot of a chatDescription automatically generated
Sample allComponents Layout

"allComponents": { ​    "1": { ​      "langVsTranslatedFieldValues": null, ​      "id": "1", ​      "templateId": "@sprinklr/widget/Layout", ​      "persistedId": null, ​      "name": null, ​      "order": 0, ​      "children": [ ​        "1a1", ​        "1a2" ​      ], ​      "props": { ​        "pageTemplate": "TWO_COLS_PINNED_LEFT", ​        "leftColSpan": 8, ​        "rightColSpan": 15 ​      }, ​      "context": null, ​      "uiEvents": null, ​      "formLayout": null, ​      "tableLayout": null, ​      "buttons": null, ​      "valueSource": null, ​      "evaluatedValue": null, ​      "translations": null ​    }, ​    "1a1a": { ​      "langVsTranslatedFieldValues": null, ​      "id": "1a1a", ​      "templateId": "@sprinklr/widget/CaseQualityAudit", ​      "persistedId": null, ​      "name": "ONE", ​      "order": 0, ​      "children": null, ​      "props": { ​        "height": "calc(100vh - 64px - 12px - 8px - 224px)", ​        "title": "Audit Results" ​      }, ​      "context": null, ​      "uiEvents": null, ​      "formLayout": null, ​      "tableLayout": null, ​      "buttons": null, ​      "valueSource": null, ​      "evaluatedValue": null, ​      "translations": null ​    }, ​    "1a1b": { ​      "langVsTranslatedFieldValues": null, ​      "id": "1a1b", ​      "templateId": "@sprinklr/widget/RecordCoachingWidget", ​      "persistedId": null, ​      "name": "ONE", ​      "order": 0, ​      "children": null, ​      "props": { ​        "title": "Coaching Widget" ​      }, ​      "context": null, ​      "uiEvents": null, ​      "formLayout": null, ​      "tableLayout": null, ​      "buttons": null, ​      "valueSource": null, ​      "evaluatedValue": null, ​      "translations": null ​    }, ​    "1a1": { ​      "langVsTranslatedFieldValues": null, ​      "id": "1a1", ​      "templateId": "@sprinklr/widget/Layout", ​      "persistedId": null, ​      "name": "ONE", ​      "order": 0, ​      "children": [ ​        "1a1a", ​        "1a1b" ​      ], ​      "props": { ​        "pageTemplate": "HEADER_BODY" ​      }, ​      "context": null, ​      "uiEvents": null, ​      "formLayout": null, ​      "tableLayout": null, ​      "buttons": null, ​      "valueSource": null, ​      "evaluatedValue": null, ​      "translations": null ​    }, ​    "1a2a": { ​      "langVsTranslatedFieldValues": null, ​      "id": "1a2a", ​      "templateId": "@sprinklr/widget/UniversalCaseOverview", ​      "persistedId": null, ​      "name": "ONE", ​      "order": 0, ​      "children": null, ​      "props": { ​        "height": "138px", ​        "title": "Case Overview" ​      }, ​      "context": null, ​      "uiEvents": null, ​      "formLayout": null, ​      "tableLayout": null, ​      "buttons": null, ​      "valueSource": null, ​      "evaluatedValue": null, ​      "translations": null ​    }, ​    "1a2b": { ​      "langVsTranslatedFieldValues": null, ​      "id": "1a2b", ​      "templateId": "@sprinklr/widget/ConversationTimeline", ​      "persistedId": null, ​      "name": "ONE", ​      "order": 0, ​      "children": null, ​      "props": { ​        "height": "calc(100vh - 64px - 86px - 10px - 12px)", ​        "title": "Conversation", ​        "collapsibleTimeConfig": [ ​          { ​            "value": 1, ​            "unit": "HOURS" ​          } ​        ], ​        "filterIdsToShow": [ ​          "fanMsgSentiment", ​          "workflowTags", ​          "score_exp", ​          "message" ​        ], ​        "markersConfig": [ ​          { ​            "type": "STANDARD", ​            "id": "FIRST_RESPONSE_TIME" ​          }, ​          { ​            "type": "STANDARD", ​            "id": "NEGATIVE_SENTIMENT" ​          }, ​          { ​            "type": "STANDARD", ​            "id": "POSITIVE_SENTIMENT" ​          }, ​          { ​            "type": "STANDARD", ​            "id": "ASSIGN_TO_ACTIVITY" ​          } ​        ] ​      }, ​      "context": null, ​      "uiEvents": null, ​      "formLayout": null, ​      "tableLayout": null, ​      "buttons": null, ​      "valueSource": null, ​      "evaluatedValue": null, ​      "translations": null ​    }, ​    "1a2c": { ​      "langVsTranslatedFieldValues": null, ​      "id": "1a2c", ​      "templateId": "@sprinklr/widgets/QualityScoreBreakdown", ​      "persistedId": null, ​      "name": "TWO", ​      "order": 0, ​      "children": null, ​      "props": { ​        "title": "AI Score Breakdown", ​        "height": "calc(100vh - 64px - 10px - 33vh - 12px)" ​      }, ​      "context": null, ​      "uiEvents": null, ​      "formLayout": null, ​      "tableLayout": null, ​      "buttons": null, ​      "valueSource": null, ​      "evaluatedValue": null, ​      "translations": null ​    }, ​    "1a2d": { ​      "langVsTranslatedFieldValues": null, ​      "id": "1a2d", ​      "templateId": "@sprinklr/widget/CaseCsatTrend", ​      "persistedId": "SCORES_OVERVIEW", ​      "name": "TWO", ​      "order": 0, ​      "children": null, ​      "props": { ​        "title": "CSAT Trend", ​        "widgetId": "622ee514abe732275c368894", ​        "height": "33vh", ​        "removeIfEmpty": false, ​        "collapsible": false ​      }, ​      "context": null, ​      "uiEvents": null, ​      "formLayout": null, ​      "tableLayout": null, ​      "buttons": null, ​      "valueSource": null, ​      "evaluatedValue": null, ​      "translations": null ​    }, ​    "1a2": { ​      "langVsTranslatedFieldValues": null, ​      "id": "1a2", ​      "templateId": "@sprinklr/widget/Layout", ​      "persistedId": null, ​      "name": "TWO", ​      "order": 0, ​      "children": [ ​        "1a2a", ​        "1a2b", ​        "1a2c", ​        "1a2d" ​      ], ​      "props": { ​        "pageTemplate": "TWO_COLS_SEVENTY_THIRTY", ​        "minColWidth": 200, ​        "className": "" ​      }, ​      "context": null, ​      "uiEvents": null, ​      "formLayout": null, ​      "tableLayout": null, ​      "buttons": null, ​      "valueSource": null, ​      "evaluatedValue": null, ​      "translations": null ​    }, ​    "root": { ​      "langVsTranslatedFieldValues": null, ​      "id": "root", ​      "templateId": "@sprinklr/widget/Layout", ​      "persistedId": null, ​      "name": null, ​      "order": 0, ​      "children": [ ​        "1" ​      ], ​      "props": { ​        "pageTemplate": "ONE_REGION", ​        "className": "w-full" ​      }, ​      "context": null, ​      "uiEvents": null, ​      "formLayout": null, ​      "tableLayout": null, ​      "buttons": null, ​      "valueSource": null, ​      "evaluatedValue": null, ​      "translations": null ​  } 

2. Adding Multiple Tabs in Record Page

A screenshot of a computerDescription automatically generated​

"allComponents": { ​"1": { ​"langVsTranslatedFieldValues": null, ​"id": "1", ​"templateId": "@sprinklr/widget/Layout", ​"persistedId": null, ​"name": null, ​"order": 0, ​"children": [ ​"1A", ​"h" ​], ​"props": { ​"pageTemplate": "TWO_COLS_PINNED_LEFT", ​"leftColSpan": 5, ​"rightColSpan": 4 ​}, ​"context": null, ​"uiEvents": null, ​"formLayout": null, ​"tableLayout": null, ​"buttons": null, ​"valueSource": null, ​"evaluatedValue": null, ​"translations": null ​}, ​"1A1": { ​"langVsTranslatedFieldValues": null, ​"id": "1A1", ​"templateId": "@sprinklr/widget/ConversationTimeline", ​"persistedId": null, ​"name": "ONE", ​"order": 0, ​"children": null, ​"props": { ​"title": "Call Transcript", ​"height": "calc(100vh - 64px - 12px)", ​"filterIdsToShow": [ ​"fanMsgSentiment", ​"workflowTags", ​"score_exp", ​"message" ​], ​"markersConfig": [ ​{ ​"type": "CUSTOM_FIELD", ​"id": "detected_intent", ​"condition": { ​"filterType": "EXISTS", ​"field": "detected_intent" ​}, ​"colorCode": "#964B00" ​}, ​{ ​"type": "CUSTOM_FIELD", ​"id": "_c_648c2251e1ee0a7b5fc18ea5", ​"colorCode": "green" ​}, ​{ ​"type": "STANDARD", ​"id": "NEGATIVE_SENTIMENT" ​}, ​{ ​"type": "STANDARD", ​"id": "TRANSFER" ​}, ​{ ​"type": "STANDARD", ​"id": "HOLD_END" ​}, ​{ ​"type": "STANDARD", ​"id": "HOLD_START" ​} ​] ​}, ​"context": null, ​"uiEvents": null, ​"formLayout": null, ​"tableLayout": null, ​"buttons": null, ​"valueSource": null, ​"evaluatedValue": null, ​"translations": null ​}, ​"1A": { ​"langVsTranslatedFieldValues": null, ​"id": "1A", ​"templateId": "@sprinklr/widget/Layout", ​"persistedId": null, ​"name": "ONE", ​"order": 0, ​"children": [ ​"1A1" ​], ​"props": { ​"pageTemplate": "HEADER_BODY", ​"className": "h-full" ​}, ​"context": null, ​"uiEvents": null, ​"formLayout": null, ​"tableLayout": null, ​"buttons": null, ​"valueSource": null, ​"evaluatedValue": null, ​"translations": null ​}, ​"2A1": { ​"langVsTranslatedFieldValues": null, ​"id": "2A1", ​"templateId": "@sprinklr/widgets/QualityScoreBreakdown", ​"persistedId": null, ​"name": "ONE", ​"order": 0, ​"children": null, ​"props": { ​"title": "AI Score Breakdown", ​"height": "calc(100vh - 64px - 12px - 8px - 350px)" ​}, ​"context": null, ​"uiEvents": null, ​"formLayout": null, ​"tableLayout": null, ​"buttons": null, ​"valueSource": null, ​"evaluatedValue": null, ​"translations": null ​}, ​"2A2": { ​"langVsTranslatedFieldValues": null, ​"id": "2A2", ​"templateId": "@sprinklr/widget/CaseCsatTrend", ​"persistedId": "SCORES_OVERVIEW", ​"name": "ONE", ​"order": 0, ​"children": null, ​"props": { ​"title": "CSAT Trend", ​"widgetId": "622ee514abe732275c368894", ​"removeIfEmpty": false, ​"height": "350px" ​}, ​"context": null, ​"uiEvents": null, ​"formLayout": null, ​"tableLayout": null, ​"buttons": null, ​"valueSource": null, ​"evaluatedValue": null, ​"translations": null ​}, ​"2A3": { ​"langVsTranslatedFieldValues": null, ​"id": "2A3", ​"templateId": "@sprinklr/widget/CaseAnalysis", ​"persistedId": null, ​"name": "TWO", ​"order": 0, ​"children": null, ​"props": { ​"height": "calc(100vh - 64px - 12px - 8px - 350px)", ​"title": "Case Analysis", ​"metricConfigs": [ ​{ ​"type": "STANDARD_FIELD", ​"metric": "CREATION_TIME" ​}, ​{ ​"type": "STANDARD_FIELD", ​"metric": "SENTIMENT" ​}, ​{ ​"type": "STANDARD_FIELD", ​"metric": "CSAT_SCORE" ​}, ​{ ​"type": "CUSTOM_FIELD", ​"metric": "detected_intent", ​"name": "Detected Intent" ​}, ​{ ​"type": "CUSTOM_FIELD", ​"metric": "_c_64886e0a37a8a71c72b79bf2", ​"name": "Product Group" ​}, ​{ ​"type": "CUSTOM_FIELD", ​"metric": "_c_64886d0d37a8a71c72b59bc9", ​"name": "Product" ​}, ​{ ​"type": "CUSTOM_FIELD", ​"metric": "_c_648c2251e1ee0a7b5fc18ea5", ​"name": "DSAT" ​} ​] ​}, ​"context": null, ​"uiEvents": null, ​"formLayout": null, ​"tableLayout": null, ​"buttons": null, ​"valueSource": null, ​"evaluatedValue": null, ​"translations": null ​}, ​"2A4": { ​"langVsTranslatedFieldValues": null, ​"id": "2A4", ​"templateId": "@sprinklr/widget/Reporting", ​"persistedId": null, ​"name": "TWO", ​"order": 0, ​"children": null, ​"props": { ​"collapsible": true, ​"title": "Time Utilisation", ​"widgetId": "648af3c437a8a71c727c289c", ​"removeIfEmpty": false, ​"height": "350px" ​}, ​"context": null, ​"uiEvents": null, ​"formLayout": null, ​"tableLayout": null, ​"buttons": null, ​"valueSource": null, ​"evaluatedValue": null, ​"translations": null ​}, ​"2A": { ​"langVsTranslatedFieldValues": null, ​"id": "2A", ​"templateId": "@sprinklr/widget/Layout", ​"persistedId": null, ​"name": "THREE", ​"order": 0, ​"children": [ ​"2A1", ​"2A2", ​"2A3", ​"2A4" ​], ​"props": { ​"pageTemplate": "TWO_COLS_FIFTY_FIFTY", ​"minColWidth": 200, ​"className": "pr-5" ​}, ​"context": null, ​"uiEvents": null, ​"formLayout": null, ​"tableLayout": null, ​"buttons": null, ​"valueSource": null, ​"evaluatedValue": null, ​"translations": null ​}, ​"h1": { ​"langVsTranslatedFieldValues": null, ​"id": "h1", ​"templateId": "@sprinklr/widget/Tabs/Tab", ​"persistedId": null, ​"name": null, ​"order": 0, ​"children": [ ​"2A" ​], ​"props": { ​"icon": "ticket", ​"title": "AI Analysis", ​"variant": "VERTICALLY_SHRINKED" ​}, ​"context": null, ​"uiEvents": null, ​"formLayout": null, ​"tableLayout": null, ​"buttons": null, ​"valueSource": null, ​"evaluatedValue": null, ​"translations": null ​}, ​"2B1A": { ​"langVsTranslatedFieldValues": null, ​"id": "2B1A", ​"templateId": "@sprinklr/widgets/QualityScoreBreakdown", ​"persistedId": null, ​"name": "ONE", ​"order": 0, ​"children": null, ​"props": { ​"title": "AI Score Breakdown", ​"height": "calc(100vh - 64px - 474px - 8px - 12px )" ​}, ​"context": null, ​"uiEvents": null, ​"formLayout": null, ​"tableLayout": null, ​"buttons": null, ​"valueSource": null, ​"evaluatedValue": null, ​"translations": null ​}, ​"2B1B": { ​"langVsTranslatedFieldValues": null, ​"id": "2B1B", ​"templateId": "@sprinklr/widget/CaseAnalysis", ​"persistedId": null, ​"name": "TWO", ​"order": 0, ​"children": null, ​"props": { ​"height": "calc(100vh - 64px - 474px - 8px - 12px )", ​"title": "Case Analysis", ​"metricConfigs": [ ​{ ​"type": "STANDARD_FIELD", ​"metric": "CREATION_TIME" ​}, ​{ ​"type": "STANDARD_FIELD", ​"metric": "SENTIMENT" ​}, ​{ ​"type": "STANDARD_FIELD", ​"metric": "CSAT_SCORE" ​}, ​{ ​"type": "CUSTOM_FIELD", ​"metric": "detected_intent", ​"name": "Detected Intent" ​}, ​{ ​"type": "CUSTOM_FIELD", ​"metric": "_c_64886e0a37a8a71c72b79bf2", ​"name": "Product Group" ​}, ​{ ​"type": "CUSTOM_FIELD", ​"metric": "_c_64886d0d37a8a71c72b59bc9", ​"name": "Product" ​}, ​{ ​"type": "CUSTOM_FIELD", ​"metric": "_c_648c2251e1ee0a7b5fc18ea5", ​"name": "DSAT" ​} ​] ​}, ​"context": null, ​"uiEvents": null, ​"formLayout": null, ​"tableLayout": null, ​"buttons": null, ​"valueSource": null, ​"evaluatedValue": null, ​"translations": null ​}, ​"2B1": { ​"langVsTranslatedFieldValues": null, ​"id": "2B1", ​"templateId": "@sprinklr/widget/Layout", ​"persistedId": null, ​"name": "ONE", ​"order": 0, ​"children": [ ​"2B1A", ​"2B1B" ​], ​"props": { ​"pageTemplate": "TWO_COLS_FIFTY_FIFTY", ​"minColWidth": 200 ​}, ​"context": null, ​"uiEvents": null, ​"formLayout": null, ​"tableLayout": null, ​"buttons": null, ​"valueSource": null, ​"evaluatedValue": null, ​"translations": null ​}, ​"2B2": { ​"langVsTranslatedFieldValues": null, ​"id": "2B2", ​"templateId": "@sprinklr/widget/CaseQualityAudit", ​"persistedId": null, ​"name": "ONE", ​"order": 0, ​"children": null, ​"props": { ​"height": "474px", ​"title": "Audit Results" ​}, ​"context": null, ​"uiEvents": null, ​"formLayout": null, ​"tableLayout": null, ​"buttons": null, ​"valueSource": null, ​"evaluatedValue": null, ​"translations": null ​}, ​"2B": { ​"langVsTranslatedFieldValues": null, ​"id": "2B", ​"templateId": "@sprinklr/widget/Layout", ​"persistedId": null, ​"name": "THREE", ​"order": 0, ​"children": [ ​"2B1", ​"2B2" ​], ​"props": { ​"pageTemplate": "HEADER_BODY" ​}, ​"context": null, ​"uiEvents": null, ​"formLayout": null, ​"tableLayout": null, ​"buttons": null, ​"valueSource": null, ​"evaluatedValue": null, ​"translations": null ​}, ​"h2": { ​"langVsTranslatedFieldValues": null, ​"id": "h2", ​"templateId": "@sprinklr/widget/Tabs/Tab", ​"persistedId": null, ​"name": null, ​"order": 1, ​"children": [ ​"2B" ​], ​"props": { ​"icon": "user", ​"title": "Manual Evaluation", ​"variant": "VERTICALLY_SHRINKED" ​}, ​"context": null, ​"uiEvents": null, ​"formLayout": null, ​"tableLayout": null, ​"buttons": null, ​"valueSource": null, ​"evaluatedValue": null, ​"translations": null ​}, ​"h": { ​"langVsTranslatedFieldValues": null, ​"id": "h", ​"templateId": "@sprinklr/widget/HorizontalTabs", ​"persistedId": null, ​"name": "TWO", ​"order": 0, ​"children": [ ​"h1", ​"h2" ​], ​"props": { ​"className": "mb-4", ​"showShadowOnScroll": true ​}, ​"context": null, ​"uiEvents": null, ​"formLayout": null, ​"tableLayout": null, ​"buttons": null, ​"valueSource": null, ​"evaluatedValue": null, ​"translations": null ​}, ​"root": { ​"langVsTranslatedFieldValues": null, ​"id": "root", ​"templateId": "@sprinklr/widget/Layout", ​"persistedId": null, ​"name": null, ​"order": 0, ​"children": [ ​"1" ​], ​"props": { ​"pageTemplate": "ONE_REGION", ​"className": "w-full" ​}, ​"context": null, ​"uiEvents": null, ​"formLayout": null, ​"tableLayout": null, ​"buttons": null, ​"valueSource": null, ​"evaluatedValue": null, ​"translations": null ​} ​}