Description of icon
Flex UI
API Reference

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 payload
    • Promise<any> - promise to be invoked for action
  • payloadUpdateFunction?: (payload) => ActionsManager.ActionPayload

    A function to update the payload.

    • payload: ActionsManager.ActionPayload - action payload
    • ActionsManager.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 payload
    • original: (payload) => Promise<any> - original action invocation
      • payload: ActionsManager.ActionPayload - action payload
      • Promise<any> - promise to be invoked for action
    • next: (payload) => Promise<any> - next action invocation
      • payload: ActionsManager.ActionPayload - action payload
      • Promise<any> - promise to be invoked for action
    • Promise<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 payload
      • action: ActionsManager.ActionName - action code
      • payload?: ActionsManager.ActionPayload - action payload
    • ACTION_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 payload
      • action: ActionsManager.ActionName - action code
      • payload?: ActionsManager.ActionPayload - action payload
    • ACTION_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");
Rate this page

Need some help?

We all do sometimes; code is hard. Get help now from our support team, or lean on the wisdom of the crowd by visiting Twilio's Stack Overflow Collective or browsing the Twilio tag on Stack Overflow.