Menu

Expand
Rate this page:

Thanks for rating this page!

We are always striving to improve our documentation quality, and your feedback is valuable to us. How could this documentation serve you better?

Actions Framework

Overview of Actions Framework

The Actions Framework allows you to implement programmatic changes in Flex UI that are triggered upon certain events. You can register events before or after an action fires, or replace the behavior of an action.


List of Actions

The following Actions are currently supported.

Voice:

  • ToggleMute - mutes current call (if one exists).
  • HangupCall - payload: {task?: ITask, sid?: string} - hangs up current call (if one exists).
  • HoldCall - payload: {task?: ITask, sid?: string, holdCallMusicUrl?: string} - holds current call (if one exists).
  • UnholdCall - payload: {task?: ITask, sid?: string} - unholds current call (if one exists).

Agent:

  • SelectTask - payload: {task?: Task, sid?: string} - selects task in the task list. Also called when user clicks the task manually.
  • AcceptTask - payload: {task?: Task, sid?: string} - agent accepts the task.
  • RejectTask - payload: {task?: Task, sid?: string} - agent rejects the task.
  • CompleteTask - payload: {task?: Task, sid?: string} - completes a task that is either pending or assigned. Called from UI by the Complete Task button. If applicable, will result in WrapupTask action being called.
  • WrapupTask - payload: {task?: Task, sid?: string} - wraps up the task if applicable.
  • SetActivity - payload: {activityAvailable?: boolean, activityName?: string, activitySid?: string, rejectPendingReservations?: boolean} - sets Activity of the user. Called by UI when selecting activity from Profile widget.
  • ShowDirectory - displays workers directory at the agent desktop view.
  • HideDirectory - hides workers directory at the agent desktop view.
  • TransferTask - payload: {task?: ITask; sid?: string; targetSid: string; options?: any;} - transfer a provided task to a target worker. Called by UI when a task is transfered via Worker Directory.
    • task?: ITask; // task to be transferred (either this or next one needed)
    • sid?: string; // sid of the task to be transferred
    • targetSid: string; // sid of the worker or queue to be transferred to
    • options?: any; // transfer options (see taskrouter doc for options)
  • CancelTransfer - payload:{task?: ITask, sid?: string;} - cancel a task that was being transferred to a target worker.
    • task?: ITask; // task to be transferred (either this or next one needed)
    • sid?: string; // sid of the task to be transferred
  • KickParticipant - payload: {targetSid?: string; participant?: ConferenceParticipant;} - remove a participant from a call
    • targetSid?: string; // sid of the participant (either this or participant has to be provided
    • participant?: ConferenceParticipant; // participant object
  • HoldParticipant - payload: {targetSid?: string; participant?: ConferenceParticipant;} - put a call participant on hold
    • targetSid?: string; // sid of the participant (either this or participant has to be provided
    • participant?: ConferenceParticipant; // participant object
  • Logout - payload: {forceLogout?: boolean, activityName?: string, activitySid?: string} - try to logout user from current session if there are no current activities preventing it.
  • ToggleDTMFDialpad - payload: {task: ITask; open?: boolean;} - used to explicitly open or close DTMF dialpad.
  • SetDTMFDialpadDigits - payload:{task: ITask; digits: string;} - used to set digits in the DTMF dialpad

Supervisor:

  • MonitorCall - payload: {task?: ITask, sid?: string, extraParams?: any} - monitor a provided ongoing call of another agent. Invoked from a Supervisor UI at Task Overview pane.
  • StopMonitoringCall - payload: {task?: ITask, sid?: string} - stop monitoring a call.
  • SelectTaskInSupervisor - payload: {task?: ITask, sid?: string} - select a task in Supervisor UI. Deselect a current task if provided task is undefined.
  • SelectWorkerInSupervisor - payload: {worker?: IWorker, workerSid?: string} - select an agent in Supervisor UI. Deselect a current worker if worker is undefined.

Chat:

  • SendMessage - payload: {channel?: ChannelState, channelSid?: string, body: string, messageAttributes?: any} - sends message with body to channel defined by ChannelState.
  • SetInputText - payload: {channel?: ChannelState, channelSid?: string, body: string} - sets message edit field to body in chat UI for channel ChannelState.
  • SendTyping - payload: {channel?: ChannelState, channelSid?: string} - sends typing indicator execution to other party in the channel.

All above Actions need either channel or channelSid parameter.

General:

  • NavigateToView - payload: {viewName: string} - navigates user to a view defined by the provided view name.
  • HistoryPush - URL path or payload: {pathname: string, search: string, hash: string, state: {[key: string]: any}} - adds a history entry, leading to view change or redirect.
  • HistoryReplace - URL path or payload: {pathname: string, search: string, hash: string, state: {[key: string]: any}} - adds a history entry, leading to view change or redirect.
  • HistoryGo - integer - goes to a specific history entry, identified by its relative position to the current page (with the current page being relative index 0).
  • HistoryGoBack - goes back to the previous history entry.
  • HistoryGoForward - goes forward to the next history entry.
  • ToggleSidebar - payload: {open: boolean} - opens or closes the sidebar.
  • SetComponentState - payload: {name: string, state: any} - alters the current state of a component. Component states is a componentName => key/value pairs dictionary in Redux store that this action manipulates. Payload is defined as name is the name of the component and state is an Javascript object. The Action will update the state in the store under name by shallow merging state with current state. Developers can use this action and this state to both control native Flex controls and also keep a convenient state for their own components. Natively currently two controls are supported ("AgentTaskCanvasTabs", "SupervisorCanvasTabs") with one state value selectedTabName that holds the uniqueNameof currently selected tab of the respective tab controls.

    Example:

    Flex.Actions.invokeAction("SetComponentState", { name: "AgentTaskCanvasTabs", state: { selectedTabName: "info" } });

Registering and invoking Actions

Actions.registerAction(name: string, action: ActionFunction, payloadUpdate?: PayloadUpdateFunction)

Register a named action and provide the code that should be run when invoking it. Optional payloadUpdate method is used for triggering a callback to modify the payload given to action invocation.

Actions.invokeAction(name: string)

Invoke a named action, returns a Promise.

Actions.addListener(name: string, action: ActionFunction)

Implement a custom function to be triggered either Before or After specific Action.
Actions object is instance of EventEmitter, so accepts adding and removing event listeners.
Events supported:

before[eventName] (for example "beforeAcceptTask")
Called when a named action is triggered but before the action body is run. Allows the user to call abort action that is provided with event body.

after[eventName]
Event called after the action has stopped executing

Actions.replaceAction(name: string, action: ReplacedActionFunction)

Replace default implementation of named action and provide an alternative implementation. Replaced action will be called with parameter referring to original implementation body, so user could choose to call the default body also if needed.

Common use cases and examples

Example of implementing custom logic after Agent has clicked to accept any task. In this example we just raise an alert.

flex.Actions.addListener("afterAcceptTask", (payload) => alert("Triggered after event AcceptTask"));

In this example we implement a prompt on Task Acceptance before Task Acceptance is run and prevent that Action from running with an abort command.

flex.Actions.addListener("beforeAcceptTask", (payload, abortFunction) => {
    alert("Triggered before event AcceptTask");
        if (!window.confirm("Are you sure you want to accept the task?")) {
            abortFunction();
        }
});

In this example we replace the original Action for AcceptTask, inject our own logic but still execute the original Action also.

flex.Actions.replaceAction("AcceptTask", (payload, original) => {
    return new Promise<void>((resolve, reject) => {
        alert("I have replaced this Action");
        resolve();
    }).then(() => original(payload));
});

In this example we register our own custom Action called MyAction which makes a HTTP request to a defined server. We then add a listener to the action CompleteTask which then invokes this custom Action. For example this could be used to update your CRM system.

flex.Actions.registerAction("MyAction", (payload) => {
    return 
        Axios.get("https://my.server.backend.com/test")
        .then(response => {
            alert("Triggered MyAction with response " + JSON.stringify(response));
        })
        .catch(error => {
            console.log(error);
            throw error;
        });       
});


flex.Actions.addListener("afterCompleteTask", (payload) => {return flex.Actions.invokeAction("MyAction")});
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 browsing the Twilio tag on Stack Overflow.