Solved: Use Permalink in Finesse

ajey_shetty · ‎03-28-2017

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

dekwan · ‎04-04-2017

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

dekwan · ‎03-28-2017

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

ajey_shetty · ‎03-28-2017

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?

dekwan · ‎03-28-2017

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

ajey_shetty · ‎03-30-2017

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"

dekwan · ‎03-30-2017

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

ajey_shetty · ‎04-03-2017

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));

dekwan · ‎04-03-2017

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;

ajey_shetty · ‎04-03-2017

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

dekwan · ‎04-03-2017

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

ajey_shetty · ‎04-04-2017

It is coming blank

Code: I have even attached it.

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 || {};
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));

dekwan · ‎04-04-2017

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

ajey_shetty · ‎04-07-2017

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.

dekwan · ‎04-07-2017

Can you attach your code?

ajey_shetty · ‎04-12-2017

Attached