A Deeper Dive Into the Cisco Finesse Layout

I’ve been helping a customer migrate from Cisco’s Unified Contact Center Enterprise (UCCE) 11 to UCCE 12 and Amazon Connect. Depending on the complexity and needs of the business they might move to UCCE 12 or they might be moved to Connect. This has caused me to spend some time thinking of the most efficient way to migrate configuration between multiple environments and ensure everything is up to date.

One of the components which I’ve done a lot of work with, but never really looked at too closely is the Finesse layout. In this post we’ll break down what layouts are, how they work, and provide some interesting pieces of trivia around Finesse. This information is up to date as of Finesse 12.5. Make sure you reference the documentation for your specific version.

BACKGROUND

To start, the Finesse front end, what the agent and administrators see, are based on the OpenSocial specification. What this specification provides is a runtime environment where trusted and untrusted web components or gadgets can interact with the hosting platform, 3rd party services, or with other gadgets. Said differently, this specification sets the rules. It dictates how components will look, where they are placed, and what they can do. While the OpenSocial foundation no longer exists. At one point the foundation was moved under W3C where it was then set to inactive in 2018. The latest specification can be found living here.

An interesting bit of trivia. One of the original developers of OpenSocial was none other than MySpace. Remember them?

You will hear the word gadget multiple times and it is worth defining as it is a core block of Finesse. The best way to think about a gadget is as an application which can be embedded inside another application. If you’re familiar with widgets, you should consider gadgets to be very similar in nature. Now, something a lot of us fail to remember is that all of Finesse is actually one big gadget with a lot of smaller gadgets inside. While you can’t replace the whole gadget that runs on the Finesse server, you can add your own gadgets inside the Finesse gadget using a layout.

XML

The very first thing you need to understand is that like all things Cisco Contact Center Enterprise and Express you must be very familiar with working with XML. While XML has lost a lot of favor in the last few years, when it comes to desktop layouts, using XML makes a lot of sense. While editing a layout can be confusing, Cisco does a good job of assisting with basic syntax checking to catch simple errors. In an ideal world there would be a visualizer that previews the changes you’re making to your layout before saving them. Maybe one day.

The XML file loaded must conform to this schema. The schema is what dictates what tags your layout can have as well as naming conventions for components. 

The XML schema has the following elements defined. These are not in the order they appear in the schema, but I’ve ordered in a hierarchical way to better highlight their relationship. Additionally, there are other elements included in the schema which are not covered below. The list below shows the most important elements to read through to better understand a Finesse layout:

  • finesseLayout: Think of this as the outer boundaries of the whole desktop.
  • layout: The actual layout.
  • role: Role definition.
  • tabs: Grouping of tabs.
  • tab: Each single tab.
  • page: The grouping of gadgets within that page referenced by a tab.
  • columns: Grouping of columns.
  • column: Each single column.
  • gadget: The actual gadget URL.

Another interesting bit of trivia. The XML schema allows for three types of Finesse users: Agent, Supervisor, and Admin. While the desktop layout never references Admins the schema has an additional role that Cisco could later enable or currently uses for publicly restricted functions.

DESKTOP LAYOUTS

The layout is what dictates what will be loaded when an agent or supervisor login to Finesse. More importantly, it allows for the organization of different gadgets on the page to fit your contact center requirements. At its core the layout includes the following sections:

  • Horizontal Header: This section is the top bar across Finesse. And includes a Logo, Product Name, Agent State for Voice, State for Digital Channels, Dialer Component, and Identity Component. For most installations you’ll only ever see the logo, name, voice state, and identity components.
  • Alternate Hosts
  • Title and Logo in Header
  • Headless Configuration: If your gadget does not require a UI.
  • Customized Icons

Interesting tip: Most gadgets can be dragged and dropped and resized by agents, however out of the box this feature is disabled. To enable it look at the enableDragDropAndResizeGadget config key.

DEFAULT GADGETS

Out of the box you should see the following gadgets:

  • Call Control
  • Queue Statistics
  • Agent Call History
  • Agent State History
  • Customer Context
  • Team Data (Supervisor)

Additionally there are a good bit of disabled gadgets that you can use they all revolve around bringing CUIC data, specifically Live Data, to the agent desktop.

I hope to have time to dive deeper on this topic. There are so many little morsels of information every where you look, you just have to dig a little deeper to find them.

~david

One Comment

Leave a Reply