ActionsManager
The Flex UI is constantly emitting event data that describes how the user is interacting with the Flex UI. As you write Plugins, the ActionsManager allows you to harness these events and define your own logic to describe how you want the Flex UI, CRM Data, or any other data, to change. You can register events before or after an action fires, or even replace the behavior of an Action.
registerAction(name, action, payloadUpdateFunction?) => void#
Registers an action
Parameters:
name: string
Name of the action to register.
action: (payload) => Promise<any>
A function to execute when the action is invoked.
payload: ActionsManager.ActionPayload
- action payloadPromise<any>
- promise to be invoked for action
payloadUpdateFunction?: (payload) => ActionsManager.ActionPayload
A function to update the payload.
payload: ActionsManager.ActionPayload
- action payloadActionsManager.ActionPayload
- updated action payload
Returns:
void
Example:
import { Actions, ActionFunction, PayloadUpdateFunction } from "@twilio/flex-ui";
const myCustomAction = "MyCustomAction";const myCustomActionFunction: ActionFunction = (payload) => Promise.resolve(payload);const payloadUpdateFunction: PayloadUpdateFunction = (payload) => { payload.updated = true; return payload;};Actions.registerAction(myCustomAction, myCustomActionFunction, payloadUpdateFunction);
invokeAction(name, payload?) => Promise<any>#
Invokes an action
Parameters:
name: string
Name of the action to invoke.
payload?: ActionsManager.ActionPayload
Data to be passed to an action while invoking.
Returns:
Promise<any>
Action Promise
Example:
import { Actions } from "@twilio/flex-ui";
Actions.invokeAction("StartOutboundCall", { destination: "+123456789"});
replaceAction(name, action) => void#
Replace an existing action
Parameters:
name: string
An action name to be replaced.
action: (payload, original, next) => Promise<any>
A new function for an action to be replaced.
payload: ActionsManager.ActionPayload
- action payloadoriginal: (payload) => Promise<any>
- original action invocationpayload: ActionsManager.ActionPayload
- action payloadPromise<any>
- promise to be invoked for actionnext: (payload) => Promise<any>
- next action invocationpayload: ActionsManager.ActionPayload
- action payloadPromise<any>
- promise to be invoked for actionPromise<any>
- promise to be invoked for action
Returns:
void
Example:
import { Actions } from "@twilio/flex-ui";Actions.replaceAction("AcceptTask", (payload, original) => new Promise<void>((resolve, reject) => { alert("replaced Action"); resolve(undefined); }).then(() => original(payload)));
addListener(event, listener) => EventEmitter#
Add a new listener to the action
Parameters:
event: string
Event name
listener: function
Event callback
Returns:
EventEmitter
Event Emitter
Example:
import { Actions } from "@twilio/flex-ui";const beforeAcceptTaskListener = (payload, abortFunction) => { alert("Before event"); if (!window.confirm("Are you sure you want to accept the task?")) { abortFunction(); }};Actions.addListener("beforeAcceptTask", beforeAcceptTaskListener);
removeListener(event, listener) => EventEmitter#
Removing a listener from the action
Parameters:
event: string | symbol
Event name
listener: function
Event callback
Returns:
EventEmitter
Event Emitter
Example:
import { Actions } from "@twilio/flex-ui";Actions.removeListener("beforeAcceptTask", beforeAcceptTaskListener);
findPendingActions(action, payload?) => ActionsManager.ActionsWithPayload#
Find pending actions by action and payload
Parameters:
action: string | Array<string>
Action or array of actions
payload?: ActionsManager.MatchActionPayload
Payload to search for
Returns:
ActionsManager.ActionsWithPayload
ActionsWithPayload object
first?: ActionsManager.ActionWithPayload
- first action with payloadaction: ActionsManager.ActionName
- action codepayload?: ActionsManager.ActionPayload
- action payloadACTION_CODE?: ActionsManager.ActionPayload
- action payload by action code in key
Example:
import { Actions } from "@twilio/flex-ui";const pendingAcceptTaskInvocations = Actions.findPendingActions("AcceptTask");
findBlockedActions(action, payload?) => ActionsManager.ActionsWithPayload#
Find blocked actions by action and payload
Parameters:
action: string | Array<string>
Action or array of actions
payload?: ActionsManager.MatchActionPayload
Payload to search for
Returns:
ActionsManager.ActionsWithPayload
ActionsWithPayload object
first?: ActionsManager.ActionWithPayload
- first action with payloadaction: ActionsManager.ActionName
- action codepayload?: ActionsManager.ActionPayload
- action payloadACTION_CODE?: ActionsManager.ActionPayload
- action payload by action code in key
Example:
import { Actions } from "@twilio/flex-ui";const blockedAcceptTaskInvocations = Actions.findBlockedActions("AcceptTask");
blockAction(action, payload?) => void#
Block action with given payload
Parameters:
action: string
Action
payload?: ActionsManager.ActionPayload
Action payload
Returns:
void
Example:
import { Actions } from "@twilio/flex-ui";Actions.blockAction("AcceptTask");
unblockAction(action, payload?) => void#
Unblock previously blocked action with given payload.
Parameters:
action: string
Action name
payload?: ActionsManager.MatchActionPayload
Action payload
Returns:
void
Example:
import { Actions } from "@twilio/flex-ui";Actions.unblockAction("AcceptTask");