Porting Older Widgets

Avaya Workspaces 4.0 has moved away from AngularJS and only supports widgets in the form of Web Components. Widgets developed using the AngularJS widget build tools are no longer supported.

To port older widgets, you can copy across your previous widget implementation, updating the syntax to conform with the new framework. The Hello-World sample widget is an example of a widget that was ported over from the old client.

With the move from AngularJS to Angular there has been a change to how the Widget API is instantiated with parameters.

Some of the methods that are exposed on the Widget API require an interaction to work. This means that the interaction ID must be passed as a parameter when the instance of the API is first created.

The interaction ID is available as an attribute on a widget when the widget is placed in the layout of the interaction's channel.

Before the API instance is created, the ID must be fetched from the HTML component.

In AngularJS the attributes on the widget were snake-case:

For example: interaction-id, work-request-id, external-interaction-id

In Angular the attributes are all lower case:

interactionid, workrequestid, externalinterctionid

So, to get the interaction ID with the new 4.0 Widget API, the following can be used:

const interactionId = this.getAttribute('interactionid');

This can then be passed in as a param when the API instance is created:

const api = (<any>window).WS.widgetAPI(interactionId);

If we wanted to fetch the work request ID or the external interaction ID attributes, the same would apply.

const workRequestId = this.getAttribute('workrequestid');

const externalInteractionId = this.getAttribute('externalinteractionid');

Change to method names:

getConfiguration() has changed to getClientDetails()

getConfiguration() is still a method on the new API but the payload returned is the full configuration object.

createCustomCard() has changed to createCustomInteraction()