The Flex UI library contains a myriad of programmable components that allow you to customize Flex to your use case. Each programmable component exposes a static Content
property that allows you to add to, remove or replace the component and its children.
Each immediate child of a component has a key property used by the add and replace methods as well as a set of properties that will be inherited by their own children. Any new components added using the add or replace methods must have a key property.
The full list of programmable components, with details of their properties can be found in the Flex UI API Docs.
Directly reusing components from the Flex UI library is discouraged. Importing and using an existing component (e.g. MessagingCanvas
) and adding your own values for their props is not supported and may result in undesired behavior.
Syntax
Flex.Component.Content.add(<MyComponent key="demo-component"/>, {options});
Example
Flex.MainHeader.Content.add(<AnotherMuteButton key="mute"/>, { sortOrder: -1, align: “end” });
MainHeader
is the base Flex UI component that we are customizing and we are using the add()
method to insert our custom mute button component into MainHeader
as a child. Note, the custom mute button component contains a key prop.
Child components have access to a subset of their parent component props and the child props associated with a particular programmable component are documented in the Flex UI API Docs.
The remove
method allows you to remove the immediate children of any programmable component using its key.
Syntax
Flex.Component.Content.remove(key, {options});
Example
Flex.MainHeader.Content.remove("mute");
The replace
component allows you to completely replace a programmable component with your own custom component.
Syntax
Flex.Component.Content.replace(<MyComponent key="demo-component"/>, {options});
Example 1
This snippet replaces the MainHeader
component with a MyOwnHeader
custom component.
Flex.MainHeader.Content.replace(<MyOwnHeader key="custom-header"/>, {});
Example 2
We can customize the TaskListItem
component to have a different background color depending on the task's channel type. The Flex UI API Docs tell us that the TaskListItem
component has access to Task which we can then use to customize the component.
1interface channelTypeColorMapType {2[key: string]: string3}45const channelTypeColorMap: channelTypeColorMapType = {6"web": "blue",7"sms": "red",8"voice": "pink",9"whatsapp": "orange"10}1112const StyledTaskListItem = styled.div(13({ channelType }: { channelType: string }) => ({14backgroundColor: channelTypeColorMap[channelType],15fontWeight: "bold",16textTransform: "uppercase",17height: "50px",18border: "5px solid grey",19textAlign: "center"20})21);2223const TaskListItem = (props: any) => {24return <StyledTaskListItem channelType={props.task.channelType}>{`${props.task.channelType} Task`}</StyledTaskListItem>;25};262728flex.TaskListItem.Content.replace(<TaskListItem key="a-key" />);
if (Expression)
Used in both add
and replace
methods to add conditions on which component is added or replaced.
1Flex.MainHeader.Content.add(<AnotherMuteButton key="mute"/>, {2if : props => props.isLiveVoiceCall3});
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.
1Flex.MainHeader.Content.add(<AnotherMuteButton key="mute"/>, {2sortOrder: -13});
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
1Flex.MainHeader.Content.add(<AnotherMuteButton key="mute"/>, {2align: "end"3});
The addWrapper
method allows you to replace a Flex component with a custom component which is able to render the original component and has access to all its original properties.
1Flex.MainHeader.Content.addWrapper(2(OriginalComponent) => (originalProps) => {3const updatedProps = { ...originalProps, logoUrl: "custom_url" };4const CustomBanner = () => <div>Customer Banner</div>;56return (7<>8<CustomBanner />9<OriginalComponent {...updatedProps} />10</>11);12}13);
This allows you to:
The following Components are supported:
Contrary to the add
, remove
or replace
methods, addWrapper
does not have the if, sortOrder, or align options.
Replace the original component with other component
1Flex.MainHeader.Content.addWrapper((OriginalComponent) => (props) => {2return <SomeOtherComponent {...props} />;3});
Change properties passed on to the original component
1Flex.MainHeader.Content.addWrapper((OriginalComponent) => (props) => {23const updatedProps = { ...props, someProp: "newValue" };45return <OriginalComponent {...updatedProps} />;67});
Wrap the component inside a new component
1Flex.MainHeader.Content.addWrapper((OriginalComponent) => (props) => {23return (45<SomeFancyDecorator>67<OriginalComponent {...props} />89</SomeFancyDecorator>1011);1213});
Add a Worker Directory Tabs Queue Filter
You can programmatically apply a filter that is hidden from the user, i.e. the user cannot disable it. You could use this feature to pre-filter the list of available transferees an agent can search and choose from, to their team members or available agents only.
Flex.WorkerDirectoryTabs.defaultProps.queueFilter = (queue) => queue.queueName.includes("HR")