Configuring Record Viewer in Microsoft Dynamics

The record viewer allows you to view chat transcripts and listen to call recordings archived in the Puzzel application. It is a passive tool which simply permits you to access the archive after having authenticated into the Puzzel Application. By making the records available within Dynamics, the agents can go through the previous interactions with the customer and provide a greater customer service.

Overview

In this document, you will be able to understand how to configure the record viewer within Microsoft Dynamics. This is done in 2 steps as listed below:

1. Add script to Dynamics Web Resources
2. Customize the Phone Call form
3. Customize the Task form

Configuring Record Viewer in Microsoft Dynamics

To configure the Puzzel Record Viewer, you need to:

1. Click on the Settings icon in the top toolbar on the right corner of your screen and select Advanced Settings
   
2. Expand the Settings option and select Customizations  in the Customization list
   
3. Click on Customize the System option to open the Power Apps window
   

Add script to Dynamics Web Resources 

Follow the steps listed below to add script to a new Dynamics Web Resource.

1. From the tree structure on the left, select Web Resources under Components and click on New to create a new resource
   
2. Enter recordViewerScript for the Name parameter and select Script in the drop-down menu for Type and click on Text Editor
   
3. Paste the below code snippet in the editor and click OK

   function recordViewer(executionContext) {
   
       if (!executionContext) {
           console.log("Context is not provided!");
           return;
       }
       var formContext = executionContext.getFormContext();
   
       var description = formContext.getAttribute("description").getValue();
   
       if(!description) {
           return;
       }
   
       var IFrame = formContext.ui.controls.get("IFRAME_RecordViewer");
   
       if (!IFrame) {
           console.log("There is no IFrame with name 'IFRAME_RecordViewer' in the form!");
           return;
       }
   
       var rows = description.split("\n");
   
       if(!rows || !rows[0]) {
           return;
       }
   
       var sessionId = rows[0].split(": ")[1];
   
       if (sessionId) {
           var Url = IFrame.getSrc().split("?")[0];
           IFrame.setSrc(Url + "?SessionId=" + sessionId);
       }
   }

    

   
4. Save, Publish, and close the window

Customize the Phone Call form

Do the following to customize the Phone Call form:

1. From the tree structure on the left, select Entities -> Phone Call ->Forms and click on the Phone Call for Interactive experience  option
   
2. In the top menu, select Insert tab and pick Iframe option as shown in the picture below
   
3. In the Add an Iframe window, enter the values to the parameters as described in the table and click OK

   Parameter	Value
   Name	IFRAME_RecordViewer
   URL	https://prod-paa-widgets.puzzel.com/crv/
   Label	Record Viewer

   
4. In the top menu, select the Home tab and click on Form properties option.
   
5. In the Form Properties window, navigate to the Events tab and click the add button
6. In the Lookup Record window, search for new_recordViewerScript and click Add
   
7. In the Event Handlers section, select Form in the drop-down options for the Control parameter and OnLoad for the Event parameter.
   
8. Click on the Add button to open the Handler Properties window. Enter RecordViewer for the Function parameter and tick Enabled. Under Parameters section, check Pass execution context as first parameter and click OK
   
9. Save, Publish, and close the window.

Customize the Task form

Do the following to customize the Task form:

1. From the tree structure on the left, select Entities -> Task ->Forms
2. click on the Task for Interactive experience.
3. Repeat steps 2 through step 9.

After completing the steps, you will be able to see the record viewer component in Microsoft Dynamics as shown in the picture below