Customizing Journey Timeline

Important

Prerequisites: You need to enable profiles in UCS.

Customizing Journey Timelines

All customization can be done in a few steps:

1. Edit the <Context_Services_HOME>/files/configprofileconfig.json file that contains all information relative to the displayed data of the timeline UI.
2. Read further sections explaining how you can create new data to be displayed for both states and profiles, then edit the profileconfig.json file.
3. Be sure to restart your Context Services application after you saved your edits.

Important

Make sure to save this file in UTF-8.If you remove the profileconfig.json file, then Journey Timeline loads the default settings.

Customizing Profiles

You can edit the information displayed in the GLOBAL_PROFILE_EXTENSIONS section of the profileconfig.json file:

• Add or remove information in mapping and CustomerProperties section.
• Edit icons and color for customerName, EmailAddress, and PhoneNumber fields.
• Add or remove search menu items in the searchOptions section.

"GLOBAL_PROFILE_EXTENSIONS":{
    "mapping":{"Phone Number": "PhoneNumber", "Email":"EmailAddress", "Customer ID":"customer_id", "Anonymous ID": "Anonymous ID", "Country": "Country", "AddressState": "State", "Title":"Title", "City":"City", "Language":"Language"},
    "searchOptions":{"Phone Number": "PhoneNumber", "Email":"EmailAddress", "Customer ID":"customer_id", "Anonymous ID": "Anonymous ID"},
    
    "ExtraQueryOptions": {"include_profile":"yes"},

    "CustomerProperties": [{"label":"customer_id", "value":"Customer ID", "showInTable":"no", "primaryKey":"yes"},
                           {"label":"LastName", "value":"Last Name"},
                           {"label":"FirstName", "value":"First Name"},
                           {"label":"PhoneNumber", "value":"Phone"},
                           {"label":"EmailAddress", "value":"Email"},
                           {"label":"Country", "value":"Country"},
                           {"label":"AddressState", "value":"State"},
                           {"label":"Title", "value":"Title"},
                           {"label":"City", "value":"City"},
                           {"label":"Language", "value":"Language"}],

                           
    "customerName": {"icon":"fonticon icon-person", "color": "#2E69DB"},
    "EmailAddress": {"icon":"fonticon icon-email", "color":"#555D66"},
    "PhoneNumber": {"icon":"fonticon icon-phone", "color":"#A6AAAF"}
  }

Customizing Display for States

The UI displays name and state information about states in the timelines and details panels. You can expand this information by configuring which JSON extension your wish to display in the "STATE_EXPRESSIONS" section of the profileconfig.json file as explained below.

Mapping with extension

To add a JSON extension, to a service, state, or task, all you need to do is to specify the JSON extension value when creating or updating your resources with a REST query. For instance, you can define a new CRMData state extension with a simple POST query at state completion:

POST http://localhost:8080/genesys/1/cs/services/711982/states/5362/end
{ 
        "service_id": 711982,
        "CRMData": {
            "caseNumber": “GF4GHL",
            "caseOwner": "Bogota 11:00 - 12:00"
        },
        "state_id": 2357138,
        "duration": 26,
        "state_type": “Support Ticket",
        "started": {
            "timestamp": "2015-04-08T11:50:46.287Z",
            "media_type": "mobile",
            "application_id": 5000
        },
        "completed": {
            "timestamp": "2015-04-08T11:50:46.313Z"
        }
    }

In the above code snippet, the CRMData extension contains two fields: caseNumber and caseOwner:

"CRMData": {
   "caseNumber": "GF4GHL",
   "caseOwner": "Bogota 11:00 - 12:00"
        }

To display the CRMData extension in the state boxes of the UI, edit profileconfig.json and find the "STATE_EXPRESSIONS" section. This is where you can add an html expression used to display your extension information.

"STATE_EXPRESSIONS":{
     "CRMData": <state expression>
}

The expression can include standard html elements and angular expression mapped with the extension fields, available in the additionalInfo object.

• If your extension is not an object, you can access its value by calling additionalInfo.values.
• If your extension is an object, you can access field values by calling additionalInfo.values.<field_name>.

For instance, the fields of CRMData are available in additionalInfo.value.caseOwner and additionalInfo.value.caseNumber variables. The following code snippet shows how to display these fields in the state boxes of the UI.

"STATE_EXPRESSIONS":{
     "CRMData": "<p> {{additionalInfo.value.caseOwner}}'s case number is {{additionalInfo.value.caseNumber}} </p>"
}