UpdateCallVarible Sample Gadget

[lleweyiss]

This new gadget is great in concept and the whole reason we went from 10.6 to 11.6.

Our Agents need to fill in missing, new, or additional information to pass along to the next agent that they transfer the call to.

This gadget allows that task by updating the Call Variable gadget.

There are (2) columns in the new gadget - the left side is where the agent can type in info;  the right side is a "click to update" button. 

Issue -->  The left side shows "callVariable1"  instead of what the variable is named or called. (from script variables -user layout or finesse admin).

I need to edit this gadget to provide the text for "callVariable1" so the Agents are aware of which field within the new gadget to update.

Otherwise , how would they know ? They are not privy to the script or to finesse admin.

(note ECC variables do show up as they are named in the ECC settings in the script editor, so the issue is only callVariable1 thru 10).

This little snag makes the use of the gadget undesirable. They don't want a cheat sheet somewhere on the desktop.

I could  change all the ones that I want them to be able to update into  ECC variables, however -

reporting can only occur in callVariable1 thru 10,  as I have been told that there is no reporting available for ECC variables.

So I have to use 1 thru 10 as some of the variables they want to report on will also be ones that the agent will need to update sometimes.

I assume this might happen in the .js file  ... but I  am a complete novice, been reading a lot to try and figure out, but getting no where.

I can not find in this forum anyone else posting any information on how to do it.

any help, suggestions or advice is greatly appreciated

[dekwan]

Hi Lesley,

Do you have multiple scripts where callVariable1 through 10 is different per script? For example, in scriptA, CallVariable1 is Customer first name and in scriptB, CallVariable1 is Customer birthdate.

If callVariable1 through 10 is always the same, then you can have a mapping ("Cheat sheet") within the .js and display the appropriate text accordingly. The HTML that renders the gadget is in the js file's displayCallVariables method:

     html += "<input type=\"text\" id=\"" + inputId + "\" placeholder=\"" + callVariableName + "\"></input>";

     html += "<button onClick=\"finesse.modules.SampleGadget.updateCallVariable('" + callVariableName + "', ($('#" + inputId + "')).val());\">Update " + callVariableName + "</button>";

What you can do is have a map where it is something like this:

callVariable1 --> first name

callVariable2 --> last name

....

Then in the displayCallVariable code, instead of adding callVariableName (which is callVariable1, callVariable2, etc), look up the mapping and display that value instead. If the callVariableName cannot be found in the map, just display the callVariableName. This would be for all the ECC variables that already have the name like you said.

It shouldn't be too difficult to change in this situation.

Now, if the variables change depending on script. It will complicate it even more. I will give a suggestion for that if you confirm that is the case.

Thanx,

Denise

[lleweyiss]

Hi Denise,

Thanks for your time in responding !

Currently all the Variables 1 - 10 are the same throughout the multiple scripts used.

I was kind of thinking that something like a list could be built within the .js file,  good to know it's possible.

As a novice I was not sure where or how the mapping was built and then ultimately the changes to the html statement(s) to have it search that mapping to display the value.

[dekwan]

Hi,

Well, it makes it much simpler that the call variables are the same throughout the scripts.

You can do something like this:

var callVarMap = { 'callVariable1': 'First Name', 'callVariable2': 'Last Name', 'callVariable3': 'Phone Number' };

Then find the values by something like this:

var callVarDisplayName = callVarMap[callVariableName];

                    html += "<input type=\"text\" id=\"" + inputId + "\" placeholder=\"" + callVarDisplayName + "\"></input>";

                    html += "<button onClick=\"finesse.modules.SampleGadget.updateCallVariable('" + callVariableName + "', ($('#" + inputId + "')).val());\">Update " + callVarDisplayName + "</button>";

This is just psudo code, so don't quote me on it

Thanx,

Denise

[lleweyiss]

Denise,

Thanks so much, I wont quote you    but will give this a whirl and see what occurs. 

I will update this discussion  on findings / results.

Really appreciate your assistance and time !!

[dekwan]

Oh, you probably have to add an if statement where if you don't find anything in the map, just use the callVariableName to cover the ECC case.

[abdallah AlNatoor]

Hi Dekwan,

I am trying to apply similar what you have explained but nothing changed to the 'Update Call Variable Sample Gadget'

I am stuck with just changing "Update Call Variable 7" to "Update Issue Log" ...

displayCallVariables = function (dialog) {
        // Check to see if the user has UPDATE_CALL_DATA as an allowable action
        if(isUCDAllowableAction(dialog)) {
            // The user has UPDATE_CALL_DATA as an allowable action
            // Build the list of call variables that can be updated
            var callVariables = dialog.getMediaProperties();
            html = "";
            var i = 1;
            var callVarMap = { 'callVariable7': 'Issue Log', 'callVariable8': 'Case Log', 'callVariable9': 'Ticket Number' };
            var callVarDisplayName = callVarMap[callVariableName];
            for (var callVariableName in callVariables) {
                clientLogs.log("displayCallVariables(): key is: " + callVariableName);
                if ((callVariableName !== 'DNIS') && (callVariableName !== 'callType') &&
                    (callVariableName !== 'dialedNumber') && (callVariableName !== 'outboundClassification')) {
                    var inputId = "CallVariable" + i;
                    html += "<input type=\"text\" id=\"" + inputId + "\" placeholder=\"" + callVarDisplayName + "\"></input>";
                    html += "<button onClick=\"finesse.modules.SampleGadget.updateCallVariable('" + callVariableName + "', ($('#" + inputId + "')).val());\">Update " + callVarDisplayName + "</button>";
                    html += "<br>";
                    i++;
                }
            }
            $('#callVariablesDiv').html(html);
            gadgets.window.adjustHeight();
        } else {
            displayDefaultHtml();
        }
    },
    
    
    
    var callVarMap = { 'callVariable7': 'Issue Log', 'callVariable8': 'Case Log', 'callVariable9': 'Ticket Number' };
    var callVarDisplayName = callVarMap[callVariableName];
    html += "<input type=\"text\" id=\"" + inputId + "\" placeholder=\"" + callVarDisplayName + "\"></input>";
    html += "<button onClick=\"finesse.modules.SampleGadget.updateCallVariable('" + callVariableName + "', ($('#" + inputId + "')).val());\">Update " + callVarDisplayName + "</button>";

[dekwan · Accepted solution]

Hi,

Based off of the code you provided, it looks like the creation of the callVarDisplayName is too early:

            var callVarMap = { 'callVariable7': 'Issue Log', 'callVariable8': 'Case Log', 'callVariable9': 'Ticket Number' };
            for (var callVariableName in callVariables) {
                clientLogs.log("displayCallVariables(): key is: " + callVariableName);

                var callVarDisplayName = callVarMap[callVariableName];

                clientLogs.log("displayCallVariables(): display name is: " + callVarDisplayName);
                if ((callVariableName !== 'DNIS') && (callVariableName !== 'callType') &&
                    (callVariableName !== 'dialedNumber') && (callVariableName !== 'outboundClassification')) {
                    var inputId = "CallVariable" + i;
                    html += "<input type=\"text\" id=\"" + inputId + "\" placeholder=\"" + callVarDisplayName + "\"></input>";
                    html += "<button onClick=\"finesse.modules.SampleGadget.updateCallVariable('" + callVariableName + "', ($('#" + inputId + "')).val());\">Update " + callVarDisplayName + "</button>";
                    html += "<br>";
                    i++;
                }
            }

The reason is because you are using the callVariableName as the index, which hasn't been defined until within the for loop. I recommend adding the clientlog to log out what the display name is to make sure that it is getting the right value from the map.

You should probably handle the case where the variable is not in the map, but you can add that after you get this working.

Thanx,

Denise

[abdallah AlNatoor]

Thanks a lot. 

The Informations that you shared here and in other posts is really useful... 

It is working now :)

[lleweyiss]

Hi Denise,

Sorry that I never replied and showed what I did with this gadget,  it has been a very helpful gadget that we have been using for a year. I am attaching  the js file to show how I changed this using your suggestions and a couple of things I experimented with. Additionally a screen shot of the Finesse desktop for others that may want to see the end result.

I do have a couple of questions:

1 -Is there a place to find the logs that show the gadget opening or not?  Recently, intermittently (of course), the gadget wont load when the call arrives, so trying to figure out what  may cause this on rare occasions.

2 -can you look at the js file and see if there is an instance where some of fields wont show.  We authenticate the customer with a call to a DataBase before reaching the agent , which is where some of these fields (variables) populate the Gadget, but the Agent can use this gadget to change any of the Variable fields. But if the customer does not authenticate 3 fields dont show up in the Gadget.  Thought maybe  there was something in the js that I have missed that would make that happen  (this might be a long shot, but thought I would ask).

[dekwan]

Hi,

Thanks for the update and sharing your screenshot and file. I'm sure folks in the community would appreciate that!

---

1 -Is there a place to find the logs that show the gadget opening or not?  Recently, intermittently (of course), the gadget wont load when the call arrives, so trying to figure out what  may cause this on rare occasions.

The only areas of logging is when the gadget becomes active. This won't be helpful if the gadget is on a tab that is not visible. Basically, the handler from this line in the init will be triggered everytime the gadget gets active:

containerServices.addHandler(finesse.containerservices.ContainerServices.Topics.ACTIVE_TAB, function() {

Also, another thing to look at is if the "handleNewDialog" method is being triggered, but there is an error during execution. So it might be good to add a log line at the first line of that method.

---

2 -can you look at the js file and see if there is an instance where some of fields wont show.  We authenticate the customer with a call to a DataBase before reaching the agent , which is where some of these fields (variables) populate the Gadget, but the Agent can use this gadget to change any of the Variable fields. But if the customer does not authenticate 3 fields dont show up in the Gadget.  Thought maybe  there was something in the js that I have missed that would make that happen  (this might be a long shot, but thought I would ask).

---

I don't see anything in this particular file, but I also don't see the whole authenticate and call the DB portion of it either. Maybe I am scrolling right by it. But off the top of my head, I would suggest looking at the browser's debugger to see if there is an error that is stopping the execution of the javascript file.

Thanx,

Denise

[lleweyiss]

Hi Denise,

#1 -  you suggested : "Also, another thing to look at is if the "handleNewDialog" method is being triggered, but there is an error during execution. So it might be good to add a log line at the first line of that method."

If I add a log line to try and see if there is a error during execution - Where would I find that log?

Only place I found was RTMT - Finesse - desktop folder --> this didn't seem to tell me anything other than info on the gadget layout, but doesn't give specifics on which agent's desktop this information is about. 

Maybe that is an issue with my logging level (?).  In any case no errors in here.

The Finesse Admin guide for Log Collection seemed to indicate that is where Any container-level errors with Finesse agent desktop will appear.

#2  I am sorry that I glazed over the process of the caller getting authenticated - that is all done by the script steps prior to being routed to an Agent by the script,  once the call is routed to the Agent the Finesse Call Variable Layout shows the Call Variables established during the script steps,  and then the UpdateCallVarible gadget loads so the Agent  can add or change any of that Call Variable information.  So this is where  that if the Call Variable indicates the caller authenticated during the Script (Call Variable value = True) all fields in gadget show ;  if the caller did not authenticate during the Script (Call Variable value = False) then all but 3 of the  fields in gadget show up.

So the execution of the script does occur, but oddly all CallVaribles don't load - thought maybe you could see where I might have something in the js that is causing that oddity.

I truly appreciate any assistance or clues !

[lleweyiss]

EDIT of last sentence :

So the execution of the javascript does occur, but oddly all CallVaribles don't load - thought maybe you could see where I might have something in the js that is causing that oddity

[dekwan]

Hi,

#1, After adding the logging, the logs don't automatically get uploaded to the server. The agent actually has to click the "Send Error Report" link after the issue occurs to upload it to the server. After that, you can grab the lobs via RTMT or CLI or web url and the logs are located under "clientlogs". To get it via the web url, you go to https://<finesse fqdn>:8445/finesse/logs/clientlogs/

#2, From the code perspective, I don't see anything wrong. The code gets the list of call variables from the MediaProperties. Can you take a look at the dialog event to see if the missing call variables are there? My suspicion is that it is not. Then, you want to trace backwards. Go to the webservices logs to see which variables are being given from the CTI server. Is it there? If not, it is probably in the script itself that is removing the call variable.

I hope that helps.

Thanx,

Denise

[paolo bevilacqua]

For consistency with the Call Control gadget could be desirable to fetch the display names configured in Finesse admin "Call Variables Layout". This code snippet shows how to do that. In addition it uses an array to list the variables that should not be displayed, for code conciseness. Note that code is not optimized (the map is rebuilt for each call), and only the differences with the sample script are summarily listed.

const hiddenVarNames = ['dialedNumber', 'callType', 'DNIS', 'wrapUpReason',
'queueNumber', 'queueName', 'outboundClassification', 'mediaId', 'user.layout'];

var layoutsCollection

... display routine {

 // gets applicable layout
 if (typeof callVars['user.layout'] !== 'undefined') {
  for (let layoutId in layoutsCollection) {
  if (layoutsCollection[layoutId].getName() === callVars['user.layout']) {
   let ld = layoutsCollection[layoutId].getData();
   // now build the object
   var callVarDisplayNames = {};
   callVarDisplayNames[ld.header.mediaProperty] = ld.header.displayName;
   for (let c of ld.columns) {
    for (let r of c) {
     callVarDisplayNames[r.mediaProperty] = r.displayName;
    }

   }
   break;
  }
 }

 // display callVariables which are not null or hidden names
 for (let callVarName in callVars) {
  for (let hiddenVar of hiddenVarNames) {
   if (callVarName === hiddenVar || callVars[callVarName] === null) {
    callVarName = null;
    break;
   }
  }
  if (callVarName) {
   var displayName = callVarDisplayNames[callVarName] || callVarName;
   html += displayName + ' ' + callVars[callVarName] + '<br>';
  }
 }

}

_handleLayoutsLoad = function() { layoutsCollection = layouts.getCollection(); }

_handleUserLoad = function (userevent) {

 layouts = user.getMediaPropertiesLayouts({ onLoad : _handleLayoutsLoad });
}