Header and breadcrumb configuration were not supported from v11.x to v12.1.x. Support was reintroduced starting from v12.2.x based on client requests.

In the v5.0 version, the headers and breadcrumbs on participant, visit & specimen pages are configurable based on the user requirement.

Headers and breadcrumbs are configurable on the following pages:

Participant
1. Detail
2. Add/edit
Visit
1. Detail
2. Add/edit
Specimen
1. Detail
2. Add/edit
3. Create Aliquots
4. Create Derivative
5. Specimen Collection

Example: Below example will configure the headers and breadcrumbs as below:

Participant page: Breadcrumbs(CP short title/ Participants list), Header (PPID on left, First Name & Last Name to the right)
Visit page: Breadcrumbs(Participants PPID), Header (Visit Name)
Specimen page: Breadcrumbs(CP short title/ Participants PPID / Visits Name ), Header (Specimen Label)

Note: On adding PHI data as a part of the headers, the values will not be displayed when users with no PHI access use the system.

[
  {
    "name": "common",
    "data": {
    "participantHeader" : {
      "leftTitle" : "<div ng-style=\"!!cpr.ppid && {'font-size': '18px', 'margin-top': '-10px'}\" ng-if=\"hasPhiAccess\"><div><br><b>{{cpr.participant.lastName}}, {{cpr.participant.firstName}} ({{cpr.ppid}})</b></br></div></div>",
      "rightTitle" : "<div v-if=\"hasPhiAccess\"><b>{{cpr.participant.lastName}}, {{cpr.participant.firstName}} ({{cpr.ppid}})</b></div>"
    },
    "visitHeader" : {
      "rightTitle" : "<div ng-style=\"!!cpr.ppid && {'font-size': '20px', 'margin-top': '-15px'}\" ng-if=\"hasPhiAccess\"><div><br><b>{{cpr.participant.lastName}}, {{cpr.participant.firstName}} ({{cpr.ppid}})</b></br></div></div>"
    },
    "specimenHeader" : {
      "breadcrumb" : "<ul os-breadcrumbs><li><a ui-sref=\"cp-list-view({cpId: cpr.cpId})\">{{cp.shortTitle}}</a></li><li><a ui-sref=\"participant-detail.overview({cprId: cpr.id})\">{{cpr.ppid}}</a></li><li><a ui-sref=\"visit-detail.overview({visitId: visit.id, eventId: visit.eventId})\">{{visit.name}}</a></li></ul>",
      "leftTitle" : "<div><span v-if=\"!specimen.label && !specimen.type\">Create Parent(s)</span><span>{{specimen.label}}</span></div>",
      "rightTitle" : "<div v-if=\"hasPhiAccess\"><b>{{cpr.participant.lastName}}, {{cpr.participant.firstName}} ({{cpr.ppid}})</b></div>"
    }
  }
 }
]

Added below is the screenshot of the participant overview page where the participant 'First Name' and 'MRN' are configured to be displayed in the header on the right side

The default breadcrumbs of the visit page is CP short title / PPID / Visits, whereas the breadcrumbs configured here do not have the visits list page navigation.

Important Compatibility Notes for v12.2.x

Templates using Angular-specific constructs are not supported in v12.2.x.

Unsupported constructs include:

ng-switch
ng-switch-default
userCtx
UI filters using pipes (|)

If unsupported Angular-specific syntax is used in the template configuration, it will display an below error message.

You can use the template configuration below, which is compatible with v12.2.x.

Field Type	Expression

Field Type

Expression

Fancy Control

(From 6.3 Onwards)
Use below expression to displays the value of fancy controls like the 'user', in the participant header.
"cpr.participant.extensionDetail.attrsMap.$$FC2_displayValue"

Here 'FC2' is the fancy control/field name.

{
  "name" : "common",
  "view" : null,
  "ctrl" : null,
  "data" : {
    "participantHeader" : {
      "breadcrumb" : "<ul os-breadcrumbs><li><a ui-sref=\"cp-list-view({cpId: cpr.cpId})\">{{cp.shortTitle}}</a></li><li><a ui-sref=\"participant-list({cpId: cpr.cpId})\">Participants</a></li></ul>",
      "leftTitle" : "{{cpr.participant.extensionDetail.attrsMap.$$FC2_displayValue}} <span ng-if=\"userCtx.hasPhiAccess\"></span>"
    }
  }
}

Configure headers & breadcrumbs

Important Compatibility Notes for v12.2.x