Flex UI Components

Auto-Generated Documentation for the Flex UI is now available. The auto-generated documentation is accurate and comprehensive, and so may differ from what you see in the official Flex UI documentation.

Flex UI is a library of programmable or dynamic components that expose a Content property and allows you to add, replace and remove any component and its children.

Content property and add / replace / remove methods

Below you can find a list of UI components and their details, that can be overridden programmatically. This can be done by using add, replace and remove methods with options.

All components must have a key declared.

Syntax for add/replace methods

Flex.Component.Content.add(<MyComponent key="demo-component"/>, {options});
Flex.Component.Content.replace(<MyComponent key="demo-component"/>, {options});

Example

Below is an example of adding a component called AnotherMuteButton to the MainHeader component, aligned to the end (here left) and placed as the first component in front of native components MuteButton and UserControls:

Flex.MainHeader.Content.add(<AnotherMuteButton key="mute"/>, {
  sortOrder: -1, 
  align: “end”
});

Syntax for remove method

Remove method allows you to remove immediate children of a programmable component by their key.

Flex.Component.Content.remove(key, {options});

Example

Below is an example of removing the AnotherMuteButton component from the MainHeader component. This component is removed by the key we set above, "mute".

Flex.MainHeader.Content.remove("mute");

Options for add/replace/remove methods

if (Expression)

Used in both add and replace methods to add conditions on which component is added or replaced.

Example

Flex.MainHeader.Content.add(<AnotherMuteButton key="mute"/>, {
  if : props => props.task.source.taskChannelUniqueName === "custom1" 
});

sortOrder (number)

Used in add method to specify the order in which the new component is placed in relation to other children of the parent component. Native children components take priority. Sort order counter starts with 0. To always place a new component at the very start or end of the order, use large numbers like -100 or 100, depending on the direction.

Example

Flex.MainHeader.Content.add(<AnotherMuteButton key="mute"/>, {
  sortOrder: -1
});

align ('start' | 'end')

Used in the add method to align new components either to the top/bottom or right/left, depending on the direction of the parent component. Possible values are:

start - Aligns new component on the left or top
end - aligns new component on the right or bottom

Example

Flex.MainHeader.Content.add(<AnotherMuteButton key="mute"/>, {
  align: “end”
});

Programmable components

Each immediate child of a component has a key (required for the add and replace methods) and a set of properties that will be inherited by its children. To find a component's key or explore component props, go to Flex UI API Reference.

Agents Desktop View components overview

Teams View components overview

object name	description	format
data.activity_name	worker's current activity friendly name	String
data.attributes	worker's attributes	Key value pair
data.date_activity_changed	date of the last activity change of the current worker	Datetime ISO8601
data.friendly_name	worker's friendly name	String
data.worker_activity_sid	worker's current activity sid	String
data.worker_sid	worker's sid	String
data.workspace_sid	worker's workspace sid	String

Need some help?

Thank you for your feedback!

Thanks for your feedback!