Untitled

Sameer Kumar

Software Engineer

LTRCCT-2565

Getting Started: Finesse

Desktop Customization and

3rdpartyGadgets

Raghu Krishnan

Software Engineer

Questions?

Use Cisco Webex Teams to chat

with the speaker after the session

Find this session in the Cisco Events Mobile App

Click “Join the Discussion”

Install Webex Teams or go directly to the team space

Enter messages/questions in the team space

How

1

2

3

4

Cisco Webex Teams

LTRCCT-2565

3

• Lab Overview and Accessing the Lab

• Finesse Overview and REST API capabilities

• Finesse 3rdpartygadget Integration (beginner level)

• Finesse Javascript API description

• Finesse 3rdpartygadget Development (advance level)

4

Agenda

LTRCCT-2565

Ground Rules

5

• Do not hesitate to ask any question

• For any major to minor doubt reach out to us

• Let us know if break is required in between

• Do not sleep (we are taking pics)

LTRCCT-2565

Lab Overview and

Accessing the Lab

Lab Overview

7

• Cisco Unified Communications Manager (CUCM) and Unified Contact Center Express (UCCX)

are connected over the LAN. Agent endpoints consist of Cisco Jabber and Cisco IP

Communicator (CIPC) softphones.

• Jabber device of Agent 1 - ‘JDoe’ is registered to CUCM with Directory Number (DN) =

2001.

• Jabber device of Agent 2 - ‘DMarino’ is registered to CUCM with DN = 2002.

• CIPC phone of Agent 3 - ‘BSanders’ is registered to CUCM with DN = 2003.

• CIPC phone of Agent 4 - ‘RLewis’ is registered to CUCM with DN = 2004.

• Mozilla Firefox is the default browser and contains all the Bookmarks needed for the lab

completion.

LTRCCT-2565

Lab Overview – Network Topology

8

LTRCCT-2565

DC3

DC/DNS

10.10.10.3/24

UCCXPRI

UCCX Node1

10.10.10.12/24

UCCXSEC

UCCX Node2

10.10.10.112/24

CUCM

CUCM Publisher

10.10.10.40/24

EXCHANGE

MS Exchange

10.10.10.4/24

SOCIALMINER

Cisco Socialminer

10.10.10.5/24

agent1.cc.lab

Agent Desktop 1

10.10.10.211/24

agent2.cc.lab

Agent Desktop 2

10.10.10.212/24

Domain: cc.lab

Barcelona

VPN

Lab Overview – Credentials

9

LTRCCT-2565

Component Hostname (FQDN) IP Address OS Login / Password

Web Login/

Password

OS/Application

Version

UCCX Node 1 uccxpri.cc.lab 10.10.10.12

administrator

Train1ng!

ccxadmin

Train1ng!

12.5

UCCX Node 2 uccxsec.cc.lab 10.10.10.112

administrator

Train1ng!

ccxadmin

Train1ng!

12.5

CUCM Node

(Publisher)

cucm.cc.lab 10.10.10.40

administrator

Train1ng!

admin

Train1ng!

12.5

Agent Desktop

1

JDoe

DN: 2001

10.10.10.211

CC\JDoe

Train1ng!

Jabber: jdoe

Train1ng!

2001

Windows 7 SP1 64-bit

Agent Desktop

2

DMarino

DN: 2002

10.10.10.212

CC\DMarino

Train1ng!

Jabber:dmarino

Train1ng!

2002

Windows 7 SP1 64 bit

Accessing the Lab

12

LTRCCT-2565

• Open AnyConnect VPN and Go to Settings (Preferences) :

• Uncheck the “Block Connections to untrusted servers”

• Click on “Connect Anyway”.

• When it prompts for a security warning, Click “Connect Anyway”

• Finally connect to: isummit.cisco.com

Note: If prompted to Upgrade or Defer

anyconnect client. Select DEFER. (Do not

upgrade)

Accessing the Lab

13

• Enter the Server IP address : isummit.cisco.com

• Choose the pod number (iSummit-PodX*) that has been assigned to your station. Pod

assignments have been distributed separately.

• Group : iSummit-PodX

• Username : iSummit-PodX

• Password : ciscolive20!

* The X corresponds to your POD number.

This will be provided to you by the proctor.

• VPN Details :

Note: If prompted to Upgrade or Defer anyconnect

client. Select DEFER. (Do not upgrade)

LTRCCT-2565

Accessing the Lab

14

• Once connected,

access the Agent PCs using Remote Desktop (RDP)

Component IP Address OS Login OS Password OS Version

Agent Desktop 1

(JDoe)

10.10.10.211 CC\JDoe Train1ng! Windows 7 SP1 64-bit

Agent Desktop 2

(DMarino)

10.10.10.212 CC\DMarino Train1ng! Windows 7 SP1 64 bit

LTRCCT-2565

Existing Configuration

15

• This setup houses the versions UCCX 12.5 and CUCM 12.5

There are 2 Agents

➢ John Doe - jdoe / Train1ng! / 2001

➢ Dan Marino – dmarino / Train1ng1! / 2002

There are 2 Supervisors

➢ Barry Sanders – bsanders / Train1ng! / 2003

➢ Ray Lewis – rlewis / Train1ng! / 2004

LTRCCT-2565

Existing Configuration

17

LTRCCT-2565

• This lab houses servers that host self-signed certificates.

• To launch the web pages and view secure content, ensure that you click on “Add Exception”

while accessing the web pages in the browser.

Finesse Overview and REST Capabilities

18

LTRCCT-2565

• What is Finesse

• Finesse Architecture

• Finesse Capabilities

• Finesse REST API

• LAB

Finesse Architecture

19

LTRCCT-2565

How it works

20

• REQUEST/RESPONSE

Server

Client

HTTP REQUEST = Method + URI + Header + Body

HTTP RESPONSE = Response Code + Header + Body

LTRCCT-2565

HTTP Methods

21

The following HTTP methods are most commonly used in a REST based architecture.

• GET − Provides a read only access to a resource.

• POST − Used to create a new resource.

• PUT − Used to update an existing resource or create a new resource.

• DELETE − Used to remove a resource.

We need a REST client to use these methods apart from GET .

GET request can be sent without a client (duh!!! Of course using a browser)

LTRCCT-2565

Why use them in Finesse?

22

• Easy integration with an existing customer website

• Customers can create their own UI to embed Finesse

• Any type of custom client can be created .exe , .jar ,python

• Ease of operation for Administrators(Bulk operation)

LTRCCT-2565

• Cisco Finesse Desktop APIs

• Cisco Finesse Configuration APIs

• Cisco Finesse Serviceability APIs

The REST APIs !!!

23

LTRCCT-2565

Cisco Finesse Desktop APIs

24

LTRCCT-2565

• Agents and supervisors use the Cisco Finesse Desktop APIs to

communicate between the Finesse desktop and Finesse server, and Unified

Contact Center Enterprise (Unified CCE) or Unified Contact Center Express

(Unified CCX) to send and receive information about the following:

• Agents and agent states (User API)

• Calls and call states (Dialog,Task Routing API)

• Teams (Team API)

• Queues (Queue API)

• Client logs (ClientLog API)

© 2020  Cisco and/or its affiliates. All rights reserved.   Cisco Public
User API Actions
• User—Sign In to Finesse
• User—Sign In as a Mobile Agent
• User—Sign Out of Finesse
• User—Get User
• User—Get List
• User—Get List of Dialogs (Voice Only by Default)
• User—Get List of Dialogs (Nonvoice Only)
• User—Change Agent State
• User—Change Agent State With Reason Code
• User—Get Reason Code
• User—Get Reason Code List
• User—Get Wrap-Up Reason
• User—Get Wrap-Up Reason List
• User—Get Default Media Properties Layout
• User—Get Media Properties Layout List
• User—Get List of Phone Books
• User—Get List of Workflows
LTRCCT-2565
25

Cisco Finesse Configuration APIs

26

LTRCCT-2565

Administrators use the Cisco Finesse configuration APIs to configure the following:

• System, cluster, and database settings

• Finesse desktop and call variable layout

• Reason codes and wrap-up reasons

• Phonebooks and contacts

• Team resources

• Workflows and workflow actions

© 2020  Cisco and/or its affiliates. All rights reserved.   Cisco Public
Configuration API Actions
• SystemConfig
• ClusterConfig
• EnterpriseDatabaseConfig
• LayoutConfig
• ReasonCode
• WrapUpReason
• SystemVariable
• MediaPropertiesLayout
• PhoneBook
• Contact
• Workflow
• WorkflowAction
• Team
LTRCCT-2565
27

Cisco Finesse Serviceability APIs

28

LTRCCT-2565

• SystemInfo

• Diagnostic Portal APIs

• These both are GET APIs and can be

run from browser directly and no REST

client request

LAB Exercise 1

29

LTRCCT-2565

• Login an Agent

• Login another agent

• Make a test call

Login to the Agent PC1

LTRCCT-2565

30

• Log into the JDoe PC on your POD:

• Windows PC RDP : 10.10.10.211

• Windows PC login : CC\JDoe

• Password : Train1ng!

• You can also refer the slide titled:

“Lab Overview – Credentials”

31

• Verify that Cisco Jabber Device and

CIPC are working

• If not , click on the icons on desktop to

initialize them

LTRCCT-2565

Login Finesse Supervisor bsander on

10.10.10.211 RDP machine

32

LTRCCT-2565

• Double click and open Firefox browser

• Open URL - https://uccxpri.cc.lab:8445/desktop

• Login with credentials bsanders \ Train1ng! \ 2001

Login to the Agent PC2

LTRCCT-2565

33

• Log into the Dmarino PC on your POD:

• Windows PC RDP : 10.10.10.212

• Windows PC login : CC\Dmarino

• Password : Train1ng!

• You can also refer the slide titled:

“Lab Overview – Credentials”

34

• Verify that Cisco Jabber Device and

CIPC are working

• If not , click on the icons on desktop to

initialize them

LTRCCT-2565

Login Finesse Agent Dmarino on 10.10.10.212

RDP machine

35

LTRCCT-2565

• Double click and open Firefox browser

• Open URL - https://uccxpri.cc.lab:8445/desktop

• Login with credentials dmarino \ Train1ng! \ 2001

LAB Exercise 2

36

LTRCCT-2565

• Hands on with Finesse REST API

• Initiate REST request using POSTMAN

• GET on current Agent State

• PUT to perform Agent Login using API only

37

• Open Postman rest client present on the desktop

LTRCCT-2565

38

• Click on the + icon next to launchpad tab or click on “Create a request” highlighted below.

• This will open a new tab “Untitled Request”

LTRCCT-2565

39

• Enter the URL as https://uccxpri.cc.lab:8445/finesse/api/User/JDoe

• Click on Send at the right side

LTRCCT-2565

40

• You will get Authentication error

LTRCCT-2565

41

• In the Authorization section , select type as Basic Auth

• Provide username as jdoe”

• Provide password as Train1ning!

LTRCCT-2565

42

• 200 OK indicates request is successful. This GET request provides the current state of the

agent.

LTRCCT-2565

• Click on the GET dropdown button and select PUT

• Now Click on Send

LTRCCT-2565

43

44

• Oops Error – 415 Unsupported Media Type

• We need to add content-type for this PUT request

LTRCCT-2565

45

• Let’s add Content-Type as application/xml in Headers

section as given below.

• Click on Send

LTRCCT-2565

46

• Oops again Error – 400 Bad Request

• 400 Error Bad request means our input data/payload/body to the server is not

correct.

• We are sending state change to the Finesse Server but we need to specify what is

state we want to set.

LTRCCT-2565

47

• Let’s go to the body section highlighted below and insert the body

• Here in body we will set the next state as LOGIN

• Click Send

Paste below text in Body section

<User>

<state>LOGIN</state>

</User>

LTRCCT-2565

48

TADA !!!

202 accepted. That’s means your agent is in Login state now.

You can verify the current state using GET request

Please note for successful GET request you need to remove content-type application/xml

header.

LTRCCT-2565

• You can also verify current state on the supervisor (rlewis) team performance gadget.

• Open url https://uccxpri.cc.lab:8445 in browser

• Login with Username -> rlewis , Password –> Train1ng! , Extension –> 2004

• Select the Support Team in Team Performance gadget

LTRCCT-2565

49

• If you want to change the Agent state to READY

• Just Insert the body with user state READY

• Click Send

• 200 OK in response confirms your success

• Verify this on the supervisor desktop

50

Paste below in body for

READY state

<User>

<state>READY</state>

</User>

LTRCCT-2565

• Similarly you can change the state to NOT READY also

51

Paste this in body section and click

send

<User>

<state>NOT_READY</state>

</User>

LTRCCT-2565

Open Postman Collections

52

LTRCCT-2565

LAB Exercise 3

• GET Reason Code

• Create Reason Code

• Get Performance data using API

53

LTRCCT-2565

Get Reason Codes List

54

LTRCCT-2565

Create Not Ready Reason code

55

LTRCCT-2565

56

LTRCCT-2565

Login Finesse Administration Page

57

LTRCCT-2565

• Open Firefox browser

• In Bookmarks section select “UCCX Node1 Finesse

Administration”

• Else directly use URL

https://uccxpri.cc.lab:8445/cfadmin

• Enter Credentials ccxadmin\Train1ng!

58

LTRCCT-2565

• Verify the new code finesse administration page

• Go to Reasons tab

59

LTRCCT-2565

Click Refresh and you will see the new reason code added

Get System Performance

60

LTRCCT-2565

Get Runtime Performance

61

LTRCCT-2565

Finesse 3rdpartygadget

Integration

63

LTRCCT-2565

Layout 101

Different xml tags

64

LTRCCT-2565

• <layout> - Tag under which the layout is defined

• <role> - Tag used to define role based layout

• <page> - Tag used to define global page layout non specific to tabs

• <tabs>/<tab>- Tag used to create and differentiate tab level scope

• <gadget> - Tag where gadgets are defined

xml tags continues..

65

LTRCCT-2565

• xml comment syntax <! -- and -->

• XML comments start with <!--

• XML comment ends with -->

66

Getting familiar with layout

LAB EXERCISE 4

1) Change Title

2) Remove these

two gadgets

LTRCCT-2565

Step 1: Login to Finesse admin page

67

LTRCCT-2565

• Open url https://uccxpri.cc.lab:8445/cfadmin

• Login with credentials ccxadmin\Train1ng!

Step 2: Identify the title config tag

68

LTRCCT-2565

• Click on Desktop Layout

69

1. Click on “ Expand All “

2. Search for “ title “

3. Once you find the config param title and its value, change the value to CiscoLive2020

LTRCCT-2565

Step 3: Comment out the two gadgets

70

LTRCCT-2565

1. Search for Agent role tag

2. Identify the home tab which holds the two gadgets.

3. Comment the gadgets out by inserting  inside the gadget block

4. Hit save

1

2

3

4

Step 4: Validate the change

71

LTRCCT-2565

• Open url https://uccxpri.cc.lab:8445/desktop/

• Login with credentials dmarino \ Train1ng! \ 2002

72

How to upload a gadget to server

• Step1 : Download the gadget (Here its already

available)

• Step2 : Generate 3rdpartygadget credentials

• Step 3 : Upload gadget to the server and add

permission

LAB EXERCISE 5

LTRCCT-2565

Step1: Download the gadget (already available)

73

LTRCCT-2565

• We have already downloaded one gadget

on the desktop 3rdpartygadget directory

• Gadget file name is bingtest.xml

Step2 : Generate 3rdpartygadget credentials

74

LTRCCT-2565

• Double clock on the putty.exe icon on the desktop

75

• Select UCCXPRI and click on Load

• Else enter 10.10.10.12 as IP address

• Click on open now

LTRCCT-2565

76

• Enter credential administrator\Train1ng!

• Run command utils reset_3rdpartygadget_password

• Enter new password : XXXXX (your choice)

• Now your username is 3rdpartygadget and

password you provided XXXXX

LTRCCT-2565

77

• Click on winscp icon present on the desktop

• Select uccxpri site from left and click Login

LTRCCT-2565

78

LTRCCT-2565

• Provide username as 3rdpartygadget.Click OK

• Provide the password XXXXX. Click OK

79

LTRCCT-2565

• You will observe files directory after successful login

• Double click on files directory

• Drag bingtest.xml inside files directory

80

LTRCCT-2565

• Right click on the bingtest.xml

• Click on Properties

• Change the Permission to 0755

81

LTRCCT-2565

Let’s move to finesse admin page

• Open url https://uccxpri.cc.lab:8445/cfadmin

• Login with credentials ccxadmin\Train1ng!

82

LTRCCT-2565

• Go to Desktop Layout Tab

• Click on Expand All button

83

LTRCCT-2565

• Scroll down to Agent Role in Layout

• Add gadget URL in <gadgets> section

• Refer the image

• Click Save

Paste this

https://localhost:8445/3rdpartygadget/files/bingtest.xml

</gadget>

84

LTRCCT-2565

Now when you login Agent JDoe you will find that gadget there

In 12.5 you can resize and drag/drop gadgets

Finesse JavaScript API

What are APIs?

86

LTRCCT-2565

Application Programming Interfaces (APIs) are constructs made available in programming

languages to allow developers to create complex functionality more easily. They abstract more

complex code away from you, providing some easier syntax to use in its place.

Finesse Javascript APIs are not built into the browser hence the developer has to retrieve the

code & information before they can be invoked. These APIs can be used to build custom

gadgets to be added to the Finesse out of the box desktop (finesse.js) .

Find them at

• https://developer.cisco.com/docs/finesse/#!javascript-library

• http(s)://<FQDN>:<port>/desktop/assets/js/doc/index.html

(Cisco Live Pods - https://uccxpri.cc.lab:8445/desktop/assets/js/doc/index.html)

Example

87

LTRCCT-2565

88

Understanding User load and

• Step 1 : Download the Sample Gadget

• Step 2 : Upload gadget to the server and add permission

• Step 3 : Inspect the JavaScript flow

• Step 4 : Test the gadget

LAB EXERCISE 6

LTRCCT-2565

Open the different gadget files

89

LTRCCT-2565

• We have already downloaded the gadget

folder on to the desktop named

“SampleGadget” directory

Open the files to understand the different sections

90

LTRCCT-2565

• Right click on the 3 files in the gadget

folder

• Click on ‘Edit with Notepad++’

• Click on the Notepadd++ tab titled

‘SampleGadget.xml’

91

LTRCCT-2565

ModulePrefs Elements

and Attributes

Content Section

The ModulePrefs section in the XML file specifies characteristics of the gadget, such

as title, author, sizing, and so on

• Title - Optional string that provides the

title of the gadget.

• Description - Optional string that

describes the gadget.

• The <Require> element declares feature

dependencies of the gadget

• "feature" –The name of the

feature.

• "name" -- The name of the

parameter. These elements

provide configuration

parameters for a feature.

LTRCCT-2565

92

93

LTRCCT-2565

The <Content> section defines the type of content, and either holds the content itself

or has a reference to external content.

• With an HTML content type, all

of the content typically resides

in the gadget spec.

A type="html" gadget contains

HTML, possibly with embedded

JavaScript, Flash, ActiveX, or

other browser objects. This is

the default type.

• The <Content> section is

where the gadget attributes

and user preferences are

combined with

programming logic along

with formatting information

to become a running

gadget.

94

LTRCCT-2565

• Click on the Notepad++ tab titled

‘SampleGadget.js’

• Verify that ‘SampleGadget.xml’

references this java script file which

contains the code to execute the

gadget logic

95

LTRCCT-2565

• Click on the Notepad++ tab titled

‘SampleGadget.css’

• Verify that ‘SampleGadget.xml’

references this stylesheet file which a

browser reads to format the HTML

document.

96

• Click on winscp icon present on the desktop

• Select uccxpri site from left and click Login

LTRCCT-2565

97

LTRCCT-2565

• Provide username as 3rdpartygadget.Click OK

• Provide the password XXXXX. Click OK

98

LTRCCT-2565

• You will observe files directory after successful login

• Double click on files directory

• Drag SampleGadget Folder in the desktop inside files