How do I replace the QUEUES content in twilio flex AgentDesktop?

Question

I want to either replace the content element within the QUEUES element, or remove it and add a custom tab. Is this possible?

I was able to remove all the tab content using

flex.WorkerDirectory.Content.replace(<div key="tabs">CustomTabs</div>);

However, I want to keep the 'transfer' header so I can close that panel

score 0 · Answer 1 · answered Aug 01 '19 at 02:54

This is a start

    flex.WorkerDirectory.Content.remove("tabs");
flex.WorkerDirectory.Content.add(<div class="Twilio-Tabs Twilio Twilio-WorkerDirectoryTabs css-1vzbs6y" key="worker-directory">
  <div class="Twilio-Tabs-Labels css-1a43y29">
    <div class="Twilio-TabHeader css-y47si7">
      <button class="css-1i3d2ep"><span class="Twilio">QUEUES</span></button>
      <div class="Twilio-TabHeader-StateIndicator-Inactive css-1qqd035"></div>
    </div>
  </div>
  <button type="button">SomeQueueName1</button>
</div>);

score 0 · Answer 2 · answered Aug 09 '19 at 23:27

Twilio developer evangelist here.

You should target Flex.WorkerDirectory.Tabs, instead of Flex.WorkerDirectory. That way you have access directly to the Tabs content. First remove the queues tab:

 Flex.WorkerDirectory.Tabs.Content.remove("queues");

You can then add a new tab like this:

Flex.WorkerDirectory.Tabs.Content.add(
   <Flex.Tab
         key="new-tab
         label="New Tab"
    >
         <div>New tab content here</div>
   </Flex.Tab>
);

Let me know if that helps at all.

How do I replace the QUEUES content in twilio flex AgentDesktop?

2 Answers2