Use PDIs? Take our 5-minute survey to help shape the PDI roadmap.

Playbook in Employee Center - Run events from UI Builder

Jonas Svensson
Tera Expert

When developing a playbook for the Employee Center you may have the need to be able to utilize some of the functions that are only available in the portal. This can be done by creating a custom playbook activity and then use the events which the widget listens on.

 

Use cases

  • Show a info message on the top of the page
  • Route the user to a different page when the playbook finishes
  • Open a record or list view modal

 

Portal widget

The playbook widget in the portal listens on 6 different storage events, that can be called from a custom playbook activity in UI Builder. 

 

 

PLAYBOOK#OPEN_RECORD

Open a modal containing the record.

JonasSvensson_1-1787247359837.png

 

 

Parameters

ParameterTypeRequiredDefault valueDescription
tableStringYes-The table.
sys_idStringYes-SYS ID of the record.

 

Example usage in UI Builder

api.emit('PLAYBOOK_INTERNAL#OPEN_RECORD', {
    table: 'incident',
    sys_id: '123...'
});

 

PLAYBOOK#OPEN_LIST

Open a modal containing the list.

JonasSvensson_2-1787247519926.png

 

Parameters

ParameterTypeRequiredDefault valueDescription
tableStringYes-The table.
queryStringYes-Encoded query.
viewStringNonullOptional list view.

 

Example usage in UI Builder

api.emit('PLAYBOOK_INTERNAL#OPEN_LIST', {
    table: 'incident',
    query: 'active=true',
    view: 'default'
});

 

PLAYBOOK#RECORD_GENERATED

Judging by the name, this is probably intended for the Playbook Experience Record Generator. When using the event, it reloads the current page with the table and sysId added to the URL parameters.

 

NOTE! This can cause an infinite loop, check your conditions before using this event.

 

Parameters

The notifications array consists of an object with these parameters

ParameterTypeRequiredDefault valueDescription
tableStringYes-The table.
sysIdStringYes-SYS ID of the record.

 

Example usage in UI Builder

api.emit('PLAYBOOK_INTERNAL#RECORD_GENERATED', {
    table: 'incident',
    sysId: '123..'
});

 

 

PLAYBOOK#ADD_NOTIFICATIONS

Shows one or multiple messages on the top of the portal page.

JonasSvensson_0-1787245938636.png

 

Parameters

The notifications array consists of an object with these parameters

ParameterTypeRequiredDefault valueDescription
typeStringNo-info, error, critical
messageStringYes-message to show

 

Example usage in UI Builder

api.emit('ADD_NOTIFICATIONS_INTERNAL', {
    notifications: [
        {
            "type": "info",
            "message": "A message"
        }
    ]
});

 

PLAYBOOK#LINK_TO_DESTINATION

Opens a URL, either in a new browser tab or replace the current one.

 

Parameters

ParameterTypeRequiredDefault valueDescription
externalStringYes-The URL to open
targetRouteStringNo_blank_self, _blank

 

_self - Replace the current browser page.

_blank - A new browser tab will open up.

 

Example usage in UI Builder

api.emit('PLAYBOOK_INTERNAL#LINK_TO_DESTINATION', {
    external: 'https://www.servicenow.com/',
    targetRoute: '_self'
});

 

PLAYBOOK#RESIZE_IFRAME

Set the height of the iframe.

 

Parameters

ParameterTypeRequiredDefault valueDescription
currentHeightStringYes-Height of the iframe.

 

Example usage in UI Builder

api.emit('PLAYBOOK_INTERNAL#RESIZE_IFRAME', {
    currentHeight: '600'
});

 

Dispatched events

Some widget events are not added to the UI Builder by default, so you must add these events to be able to use them.

 

Example

JonasSvensson_3-1787248444349.png

Custom events

If you have the need for a custom event, to be able to send a custom payload to the portal you're required to use a cloned version of the playbook-widget to intercept the custom events since it's in read-only.

 

Client script - Portal widget

This is just a example. You could expand on the already existing event listener instead.

window.addEventListener("storage", function(event) {
	if(!event || !event.key) return;

	var newValue = event.newValue;
	var value = JSON.parse(newValue);

	if ( value.customParam ) {
		console.log(value.customParam);
	}

});

 

Client script - UI Builder

In this example we're just using the notifications event with a different payload.

api.emit('ADD_NOTIFICATIONS_INTERNAL', {
    customParam: 'test'
});

 

0 REPLIES 0