Twilio Flex Plugin how to add new tab with custom route

2
votes

I am using Twilio Flex plugin to customize flex ui in react js. I want to add one custom link in a sidebar with a new custom component with new route URL like '/shops'.

After loading that component in that body i want to load custom shop. Check the following screen for more details. enter image description here

Thanks in advance for a help.

1
twiliotwilio-flex
What have you tried with this so far? Have you managed to load your custom components into Flex yet? Have you followed this tutorial to get started with Flex plugins? – philnash

1 Answers

5
votes

I found this video by Twilio which helped. https://www.youtube.com/watch?v=ZMjKMoy1RPc

The key points are to add a new View to the View Collection and create a new SideLink which links to it. 

import { FlexPlugin } from 'flex-plugin';
import { View, SideLink, Actions } from '@twilio/flex-ui';
import React from 'react';

export default class ShopPlugin extends FlexPlugin {
  constructor() {
    super('ShopPlugin');
  }

  init(flex, manager) {
    flex.ViewCollection.Content.add(
      <View name="shop-view" key="shop-view">
        <div>Your Shop View Goes Here</div>
      </View>
    )

    flex.SideNav.Content.add(
      <SideLink
        showLabel={true}
        icon="Thumbup"
        iconActive="ThumbupBold"
        isActive={activeView === 'shop-view'}
        onClick={() => {
          Actions.invokeAction('NavigateToView', {viewName: 'shop-view'});
        }
      >
        Shops
      </SideLink>
    )
  }
}