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
_10Flex.Component.Content.add(<MyComponent key="demo-component"/>, {options});
Example
_10Flex.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
_10Flex.Component.Content.remove(key, {options});
Example
_10Flex.MainHeader.Content.remove("mute");
The replace component allows you to completely replace a programmable component with your own custom component.
Syntax
_10Flex.Component.Content.replace(<MyComponent key="demo-component"/>, {options});
Example 1
This snippet replaces the MainHeader component with a MyOwnHeader custom component.
_10Flex.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.
_28 interface channelTypeColorMapType {_28 [key: string]: string_28 }_28 _28 const channelTypeColorMap: channelTypeColorMapType = {_28 "web": "blue",_28 "sms": "red",_28 "voice": "pink",_28 "whatsapp": "orange"_28 }_28 _28 const StyledTaskListItem = styled.div(_28 ({ channelType }: { channelType: string }) => ({_28 backgroundColor: channelTypeColorMap[channelType],_28 fontWeight: "bold",_28 textTransform: "uppercase",_28 height: "50px",_28 border: "5px solid grey",_28 textAlign: "center"_28 })_28 );_28 _28 const TaskListItem = (props: any) => {_28 return <StyledTaskListItem channelType={props.task.channelType}>{`${props.task.channelType} Task`}</StyledTaskListItem>;_28 };_28 _28 _28 flex.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.
_10Flex.MainHeader.Content.add(<AnotherMuteButton key="mute"/>, {_10 if : props => props.isLiveVoiceCall _10});
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.
_10Flex.MainHeader.Content.add(<AnotherMuteButton key="mute"/>, {_10 sortOrder: -1_10});
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
_10Flex.MainHeader.Content.add(<AnotherMuteButton key="mute"/>, {_10 align: "end"_10});
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.
_13Flex.MainHeader.Content.addWrapper(_13 (OriginalComponent) => (originalProps) => {_13 const updatedProps = { ...originalProps, logoUrl: "custom_url" };_13 const CustomBanner = () => <div>Customer Banner</div>;_13 _13 return (_13 <>_13 <CustomBanner />_13 <OriginalComponent {...updatedProps} />_13 </>_13 );_13 }_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
_10Flex.MainHeader.Content.addWrapper((OriginalComponent) => (props) => {_10 return <SomeOtherComponent {...props} />;_10});
Change properties passed on to the original component
_10Flex.MainHeader.Content.addWrapper((OriginalComponent) => (props) => {_10_10 const updatedProps = { ...props, someProp: "newValue" };_10_10 return <OriginalComponent {...updatedProps} />;_10_10});
Wrap the component inside a new component
_13Flex.MainHeader.Content.addWrapper((OriginalComponent) => (props) => {_13_13 return (_13_13 <SomeFancyDecorator>_13_13 <OriginalComponent {...props} />_13_13 </SomeFancyDecorator>_13_13 );_13_13});
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.
_10Flex.WorkerDirectoryTabs.defaultProps.queueFilter = (queue) => queue.queueName.includes("HR")