Extend the Wrap Up UI

The Wrap Up UI is displayed to agents only for known customers.

The UI includes a Verify button for agents to confirm whether the customer information is correct. With Wrap Up extensibility, we can extend the Wrap Up UI in our application to add or remove standard or custom fields to the layout. You can also mark a standard or custom field required. You can display fields conditionally and make them required conditionally. You can configure a conditional Wrap Up UI layout based on attributes such as Application Classification, Channel, and Communication Direction.

Note: The Wrap Up UI is displayed only for known customers.

Duplicate the default rule and define conditions

This example will use the Wrap Up form.

1. In Visual Builder, create a new project or open an existing project.
2. Click the Dependencies tab, and add the required dependencies.
3. Click the Layouts tab.
4. Click Contacts in the explorer.
5. In the Dynamic Form list, click Contact Verify.
6. In the Display Logic area, click the Duplicate Rule icon to clone the default rule.
7. Enter a name for the duplicate rule then click the Duplicate button to create a copy of the rule and layout.
   Note: Default layouts from dependencies are read-only, you can't edit them.
8. In the newly copied layout, select Click to add condition to add any conditions you need for use of this rule and layout basing your conditions on the following:
   • Context
   • Fields
   • Responsive
   • User

   You can give multiple conditions, or you can add multiple rules based on your requirements.

Add standard fields to the Wrap Up UI

1. Click your newly created layout.
2. From the All Fields list, view the ready-go-use fields.
3. You can add new fields to the list by selecting the checkbox from the list.

Add custom fields to the Wrap Up UI

1. Create a custom field from Application Composer for the Contacts object and publish it.
2. In Visual Builder, open the Wrap Up header.
3. From the All Fields list, find your custom field and select it to add it to the Select field to display list.

Add data from the chat launch form or IVR to the Wrap Up UI

The data entered in chat launch form or collected in IVR will be available in engagement indata/outdata of the processevent API which can be accessed in this form using:componentContext.inData or componentContext.outData. For example: to see interaction ID in the call or chat header, use: [[ $componentContext.outData.SVCMCA_INTERACTION_ID ]] as the Value.

1. In the Contacts layouts, click the Fields tab.
2. Click the + Custom field.
3. Enter an ID and label, and then click Create.
4. Select the newly created field from the Fields list.
5. In the Properties area, click the Value field.

   Say you want to have the contact's job title to be seen. For example: [[ $componentContext.inData.SVCMCA_CONTACT_JOB_TITLE ]].

6. Select the variable that you want to see as this field or use fx(function) to write custom code
7. Now click the Rule Sets tab and add this field to your layout.
8. Preview or publish to see the newly created field and tagged values.

Delete a field from the Wrap Up UI

1. In the Layout workspace, note the list of fields.
2. To delete a field, hover over the field, and click the Delete button.

Conditionally display a field in the Wrap Up UI

1. In the Layout workspace, note the list of fields.
2. Select the checkbox of the desired field from the All Fields list
3. Click the added field, and expand the properties panel
4. In the properties panel, select Show Field and select Always.
5. Update the condition, then save to view the updated Show Field condition.

Mark a field required in the Wrap Up UI

1. In the Layout workspace, note the list of fields.
2. Select the checkbox of the desired field from the All Fields list
3. Click the added field, and expand the properties panel
4. In the properties panel, select Required checkbox.

Make fields conditionally required in the Wrap Up UI

1. In the Layout workspace, note the list of fields.
2. Select the checkbox of the desired field from the All Fields list
3. Click the added field, and expand the properties panel
4. In the properties panel, hover over the Expression Editor icon (fx)
5. Enter a condition in editor, then enter the required key and value.
   Here are some examples:
   • [[ $componentContext.callDirection == 'ORA_SVC_OUTBOUND' ]]
   • [[ $user.userName == 'ctiautouisvr3' ]]

After making changes you can publish the changes and start using the updated Wrap Up UI.