cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
3386
Views
0
Helpful
17
Replies

Use Permalink in Finesse

ajey_shetty
Level 1
Level 1

Hello,

I am new to finesse gadgets. I need  help to understand permalink.

I have created a report in CUIC which pulls the agent details like how many calls he/she has taken, AHT etc for the current day.

The Variable parameter is the skill target id.

And I get he Permalink:

https://localhost:8444/cuic/permalink/PermalinkViewer.htmx?viewId=14A470FF1000015B000024490A101441&linkType=htmlType&v…

Can you please help me how can I pass the logged in agent Skilltarget ID in the URL ?

I am using the sample cuic gadget to input the permalink.

Version: 10.5

Thanks

-Ajey Shetty

1 Accepted Solution

Accepted Solutions

Hi Ajey,

After looking at the code again, I realized that the user.getExtension() can't be in the init. When the new user object gets successfully instantiated, it will call the handUserLoad method. But due to the way JavaScript works, the code will move on within the init even before the handleUserLoad is called and therefore coming back blank.

So what you would need to do is to create a new function that creates the URL and modifies the html. Then in the handleUserLoad and within the ACTIVE_TAB callback function, call this new function you created.

So new function will have something like this:

      var login = user.getExtension();

                    var permalink = "https://10.32.134.65:8444/cuic/permalink/PermalinkViewer.htmx?viewId=33C69CC71000015B00002C3A0A101441&linkType=htmlType&viewType=Grid&@Extension=" + login;

if ($("#cuic").length)

                                                 {

                                                 // only modify the html if we haven't done it before

                                              

                                                   clientLogs.log("Gadget html already=" + $("#cuic").html());

                                                 }

                                                 else

                                              

                                                 {

                                                    var html = '';

                                                   // add a div tag to the html

                                                                html += '<div id="cuic">';

                                                                html += '<iframe src="' + permalink + ' " id="frame1" width="900" height="300"></iframe>';

                                                                html += '</div>';

             

                                                    //set the html document's agentout element to the html we want to render

                                                                $("#agentout").html(html);

                                                                clientLogs.log("Set html to=" + $("#cuic").html());

                             

                                                   // automatically adjust the height of the gadget to show the html

                                                                  gadgets.window.adjustHeight();

                                                                }

                                                         });

This is probably not the exact code, but hopefully you get the point. Take a look at the final version of the LearningSampleGadget for how to create the handleUser* callbacks.

Thanx,

Denise

View solution in original post

17 Replies 17

dekwan
Cisco Employee
Cisco Employee

Hi Ajey,

Unfortunately Finesse does not expose the SkiltargetId. So, it is not possible to pass it along in the URL using Finesse.

Thanx,

Denise

Hello Denise,

Thank you for the response.

Instead of using skill target I'd I can use the peripheral number,  Which is nothing but the extension of the agent.

How can I pass the agent extension in the URL?

Hi Ajey,

In the init function, you will have to create an instance of the User (after ClientServices.init):

var cfg = finesse.gadget.Config;

user = new finesse.restservices.User({

                id: cfg.id,

                onLoad : handleUserLoad,

                onChange : handleUserChange

            });

Then get the agent extension with user.getExtension();

Take a look at the learningsamplegadget (final version) for more details.

Thanx,

Denise

Thank you v much for your help.

Considering extension is the parameter in CUIC report

Can I use

var login= user.getExtension();

and change the URL to

https://10.16.20.65:8444/cuic/permalink/PermalinkViewer.htmx?viewId=14A470FF1000015B000024490A101441&linkType=htmlType&viewType=Grid&uuid=68b908fb-cf1a-4775-a88d-07e2cdb9f075 &extension ="login"

Hi Ajey,

Assuming the extension is part of the parameter in the CUIC report, if you had var login = user.getExtension();, you would need to concatenate the value of login rather than it being a string, so it'll be

var url = "https://10.16.20.65:8444/cuic/permalink/PermalinkViewer.htmx?viewId=14A470FF1000015B000024490A101441&linkType=htmlType&viewType=Grid&uuid=68b908fb-cf1a-4775-a88d-07e2cdb9f075&textension=" + login;

Thanx,

Denise

Hello Denise,

I am working on this since last 3 days. I do not know what I am missing.

When I put the permalink directly to the browser it works. I don't know what I am missing. Can you please help ?

Below is the code

var finesse = finesse || {};

finesse.gadget = finesse.gadget || {};

finesse.container = finesse.container || {};

clientLogs = finesse.cslogger.ClientLogger || {};  // for logging

/** @namespace */

finesse.modules = finesse.modules || {};

finesse.modules.SampleGadget = (function ($) {

    

  /** @scope finesse.modules.SampleGadget */

  return {

    

        

     /**

      * Performs all initialization for this gadget

      */

  

  init : function () {

  var prefs =  new gadgets.Prefs(),

  id = prefs.getString("id");

  var clientLogs = finesse.cslogger.ClientLogger;   // declare clientLogs

         gadgets.window.adjustHeight();

        

         // Initiate the ClientServices and load the user object.  ClientServices are

         // initialized with a reference to the current configuration.

         finesse.clientservices.ClientServices.init(finesse.gadget.Config);

  clientLogs.init(gadgets.Hub, "LearningSampleGadget"); //this gadget id will be logged as a part of the message

         user = new finesse.restservices.User({

  id: id,

                onLoad : handleUserLoad,

                onChange : handleUserChange

            });

            

         states = finesse.restservices.User.States;

  var login = user.getExtension();

  var permalink = "https://10.32.134.65:8444/cuic/permalink/PermalinkViewer.htmx?viewId=33C69CC71000015B00002C3A0A101441&linkType=htmlType&viewType=Grid&@Extension=" + login;

  // Initiate the ContainerServices and add a handler for when the tab is visible

  // to adjust the height of this gadget in case the tab was not visible

  // when the html was rendered (adjustHeight only works when tab is visible)

            containerServices = finesse.containerservices.ContainerServices.init();

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

  clientLogs.log("**** Gadget is now visible ****");

  

   if ($("#cuic").length)

  {

  // only modify the html if we haven't done it before

  

    clientLogs.log("Gadget html already=" + $("#cuic").html());

  }

  else

  

  {

     var html = '';

                // add a div tag to the html

                html += '<div id="cuic">';

  html += '<iframe src="' + permalink + ' " id="frame1" width="900" height="300"></iframe>';

  html += '</div>';

               

                //set the html document's agentout element to the html we want to render

  $("#agentout").html(html);

  clientLogs.log("Set html to=" + $("#cuic").html());

                // automatically adjust the height of the gadget to show the html

          gadgets.window.adjustHeight();

  }

   

    });

            containerServices.makeActiveTabReq();

     }     // init function

   

       // init function

     };  // return

}(jQuery));

Hi Ajey,

What version of Finesse are you using? The beginning of the code seems like it is 10.6 and above, but the new code in the init looks like it is 10.5 and below.

Assuming it is 10.6 and above, you need to make the following changes:

init : function () {

var prefs =  new gadgets.Prefs(),

id = prefs.getString("id");

  var clientLogs = finesse.cslogger.ClientLogger;   // declare clientLogs

         gadgets.window.adjustHeight();

       

         // Initiate the ClientServices and load the user object.  ClientServices are

         // initialized with a reference to the current configuration.

         finesse.clientservices.ClientServices.init(finesse.gadget.Config);

  clientLogs.init(gadgets.Hub, "LearningSampleGadget"); //this gadget id will be logged as a part of the message

         user = new finesse.restservices.User({

  id: finesse.gadget.Config.id,

                onLoad : handleUserLoad,

                onChange : handleUserChange

            });

           

         states = finesse.restservices.User.States;

  var login = user.getExtension();

  var permalink = "https://10.32.134.65:8444/cuic/permalink/PermalinkViewer.htmx?viewId=33C69CC71000015B00002C3A0A101441&linkType=htmlType&viewType=Grid&@Extension=" + login;

Hello Denise,

I really appreatiate the way you are helping me on this. And thank you so so much

I am using the version 10.5(1). I am trying to build it using the help of sample gadgets and documents. Looks like I am missing lot of things.

Can you please help me with the changes for version 10.5.1 ?

-Ajey Shetty

Hi Ajey,

I had a 50/50 chance of figuring out which version you were using and chose the wrong one

Ignore my previous post since you are using 10.5. What you need is to declare the config:

var finesse = finesse || {};

finesse.gadget = finesse.gadget || {};

finesse.container = finesse.container || {};

clientLogs = finesse.cslogger.ClientLogger || {};  // for logging

// Gadget Config needed for instantiating ClientServices

/** @namespace */

finesse.gadget.Config = (function () {

  var _prefs = new gadgets.Prefs();

  /** @scope finesse.gadget.Config */

  return {

  authorization: _prefs.getString("authorization"),

  country: _prefs.getString("country"),

  language: _prefs.getString("language"),

  locale: _prefs.getString("locale"),

  host: _prefs.getString("host"),

  hostPort: _prefs.getString("hostPort"),

  extension: _prefs.getString("extension"),

  mobileAgentMode: _prefs.getString("mobileAgentMode"),

  mobileAgentDialNumber: _prefs.getString("mobileAgentDialNumber"),

  xmppDomain: _prefs.getString("xmppDomain"),

  pubsubDomain: _prefs.getString("pubsubDomain"),

  restHost: _prefs.getString("restHost"),

  scheme: _prefs.getString("scheme"),

  localhostFQDN: _prefs.getString("localhostFQDN"),

  localhostPort: _prefs.getString("localhostPort"),

  clientDriftInMillis: _prefs.getInt("clientDriftInMillis")

  };

}());

/** @namespace */

finesse.modules = finesse.modules || {};

That is the only thing i can see based on the code you provided. Let me know if you are still having issues.

Thanx,

Denise

It is coming blank               

Code: I have even attached it.

var finesse = finesse || {};

  1. finesse.gadget = finesse.gadget || {};
  2. finesse.container = finesse.container || {};

clientLogs = finesse.cslogger.ClientLogger || {};  // for logging

// Gadget Config needed for instantiating ClientServices

/** @namespace */

                finesse.gadget.Config = (function () {

                var _prefs = new gadgets.Prefs();

                /** @scope finesse.gadget.Config */

                return {

                                authorization: _prefs.getString("authorization"),

                                country: _prefs.getString("country"),

                                language: _prefs.getString("language"),

                                locale: _prefs.getString("locale"),

                                host: _prefs.getString("host"),

                                hostPort: _prefs.getString("hostPort"),

                                extension: _prefs.getString("extension"),

                                mobileAgentMode: _prefs.getString("mobileAgentMode"),

                                mobileAgentDialNumber: _prefs.getString("mobileAgentDialNumber"),

                                xmppDomain: _prefs.getString("xmppDomain"),

                                pubsubDomain: _prefs.getString("pubsubDomain"),

                                restHost: _prefs.getString("restHost"),

                                scheme: _prefs.getString("scheme"),

                                localhostFQDN: _prefs.getString("localhostFQDN"),

                                localhostPort: _prefs.getString("localhostPort"),

                                clientDriftInMillis: _prefs.getInt("clientDriftInMillis")

                };

}());

/** @namespace */

  1. finesse.modules = finesse.modules || {};
  2. finesse.modules.SampleGadget = (function ($) {

                              

                  

                /** @scope finesse.modules.SampleGadget */

return {

/** Performs all initialization for this gadget */

                               

                init : function () {

                var prefs =  new gadgets.Prefs(),

                id = prefs.getString("id");

                var clientLogs = finesse.cslogger.ClientLogger; // declare clientLogs

                gadgets.window.adjustHeight();

                      

                // Initiate the ClientServices and load the user object.  ClientServices are

                // initialized with a reference to the current configuration.

                 finesse.clientservices.ClientServices.init(finesse.gadget.Config);

                 clientLogs.init(gadgets.Hub, "LearningSampleGadget"); //this gadget id will be logged as a part of the message

                  user = new finesse.restservices.User({

                                id: id,

        onLoad : handleUserLoad,

        onChange : handleUserChange

            });

                          

                    states = finesse.restservices.User.States;

                    var login = user.getExtension();

                    var permalink = "https://10.32.134.65:8444/cuic/permalink/PermalinkViewer.htmx?viewId=33C69CC71000015B00002C3A0A101441&linkType=htmlType&viewType=Grid&@Extension=" + login;

                                              

// Initiate the ContainerServices and add a handler for when the tab is visible

// to adjust the height of this gadget in case the tab was not visible

// when the html was rendered (adjustHeight only works when tab is visible)

          containerServices = finesse.containerservices.ContainerServices.init();

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

          clientLogs.log("**** Gadget is now visible ****");

                                               

                                                  if ($("#cuic").length)

                                                 {

                                                 // only modify the html if we haven't done it before

                                               

                                                   clientLogs.log("Gadget html already=" + $("#cuic").html());

                                                 }

                                                 else

                                               

                                                 {

                                                    var html = '';

                                                   // add a div tag to the html

                                                                html += '<div id="cuic">';

                                                                html += '<iframe src="' + permalink + ' " id="frame1" width="900" height="300"></iframe>';

                                                                html += '</div>';

              

                                                    //set the html document's agentout element to the html we want to render

                                                                $("#agentout").html(html);

                                                                clientLogs.log("Set html to=" + $("#cuic").html());

                              

                                                   // automatically adjust the height of the gadget to show the html

                                                                  gadgets.window.adjustHeight();

                                                                }

                                                         });

                                                  containerServices.makeActiveTabReq();

                                                       } // init function

                                             }; // return

}(jQuery));

Hi Ajey,

After looking at the code again, I realized that the user.getExtension() can't be in the init. When the new user object gets successfully instantiated, it will call the handUserLoad method. But due to the way JavaScript works, the code will move on within the init even before the handleUserLoad is called and therefore coming back blank.

So what you would need to do is to create a new function that creates the URL and modifies the html. Then in the handleUserLoad and within the ACTIVE_TAB callback function, call this new function you created.

So new function will have something like this:

      var login = user.getExtension();

                    var permalink = "https://10.32.134.65:8444/cuic/permalink/PermalinkViewer.htmx?viewId=33C69CC71000015B00002C3A0A101441&linkType=htmlType&viewType=Grid&@Extension=" + login;

if ($("#cuic").length)

                                                 {

                                                 // only modify the html if we haven't done it before

                                              

                                                   clientLogs.log("Gadget html already=" + $("#cuic").html());

                                                 }

                                                 else

                                              

                                                 {

                                                    var html = '';

                                                   // add a div tag to the html

                                                                html += '<div id="cuic">';

                                                                html += '<iframe src="' + permalink + ' " id="frame1" width="900" height="300"></iframe>';

                                                                html += '</div>';

             

                                                    //set the html document's agentout element to the html we want to render

                                                                $("#agentout").html(html);

                                                                clientLogs.log("Set html to=" + $("#cuic").html());

                             

                                                   // automatically adjust the height of the gadget to show the html

                                                                  gadgets.window.adjustHeight();

                                                                }

                                                         });

This is probably not the exact code, but hopefully you get the point. Take a look at the final version of the LearningSampleGadget for how to create the handleUser* callbacks.

Thanx,

Denise

Thank you so much. It is now working.

The only Problem I am seeing is the Permalink doesn't load as soon as I login to finesse, but it loads when I change the state to Ready.

Can you attach your code?

Attached