Conditionally rendering a component based on user role

Hey all!

Ricky from the DevEd team here.

I was just working with a developer who wanted a component to appear for supervisors and admins, but not for workers. This happens by default in the Flex UI (e.g., you can see the Admin Dashboard or Insights Dashboards, but workers can't) - but how exactly do you replicate this for your custom components?

I would use the Flex Manager to retrieve the active Worker in Flex. This SHOULD have some information related to their SSO role.

You can then use that to determine whether the component should render. Especially with React, this can use a ternerary operator to do something like:

{{ manager.workerClient.attributes.roles === 'admin' ? <Component /> : ''}}


Flex.SomeComponent.Content.add(<MyCustomComponent key="call-directory" />, {
      if: () => {
        return isUserAdmin || isUserSupervisor; // Some variable set elsewhere in the code based on the Flex Manager
      sortOrder: -1,
      align: 'end',

What are your thoughts? Any ways to do this more elegantly or efficiently?


  • qborreda
    qborreda ✭✭✭

    Hey Rick,

    You missed the actual checks for those, as we spoke before.
    The complete solution to only allow admins and supervisors to access a component or view would be to use conditional rendering, like:

      init(flex: typeof Flex, manager: Flex.Manager) {
        const userRoles = manager.workerClient.attributes.roles;
        const isUserAdmin = userRoles.includes('admin');
        const isUserSupervisor = userRoles.includes('supervisor');
        Flex.MainHeader.Content.add(<YourComponentHere key="your-key-here" />, {
          if: () => isUserAdmin || isUserSupervisor,
          sortOrder: -1,
          align: 'end',

    Cheers, and thanks for the help and the work you're doing on documentation

  • Hello, I found this post and I would like to ask if is it is possible to render a component based on the type of task(chat, call)? I created a custom component but i just need to added to the taskcanvastab when it is a chat conversation.

    Best regards

  • eholtz
    edited February 25

    @knajarro94 For sure - you should be able to wrap your component export with WithTaskContext() and then in the render function use a ternary operator. Using one of the samples from that page, you might do something like:

    import React from 'react';
    import { withTaskContext } from '@twilio/flex-ui';
    class CustomCRM extends React.Component {
      render() {
        // Retrieve Task details
        // (`task` will be undefined if there's no task selected in the UI)
        const { task } = this.props;
        // Render Task SID in component as a test
        return (task && task.channelType === "chat" ?
            <p>First, make sure we can access the current Task data.</p>
            <p>Task SID: <span style={{ fontWeight: 'bold' }}>{task ? task.sid : 'No task selected'}</span></p>
          </div> : "")
    // The withTaskContext() helper function creates a
    // Higher-Order Component that uses the Context API
    // to access Task data, then adds the Task data to
    // the wrapped component.
    export default withTaskContext(CustomCRM);

    Edit: Beware the copy-paste of this sample, I wrote it in the browser so there may be some syntax errors 😅

  • Thanks a lot! I would like to also ask if we can access to: const {task} = this.props;

    from the method ComponentDidMount() ? I need to get the value in order to pass it as a parameter for a API consumed from the Component

If this is an emergency, please contact Twilio Support. This is not an official Support channel.
Have an urgent question?
Please contact Twilio Support. This is not an official Support channel.
Contact Support