You are viewing the Portuguese (Brazil) site, but your language preference is set to English. Switch to English site →

Menu

Criar exibições e rotas personalizadas

O Flex é criado usando o React, por isso é um aplicativo de página única por padrão. Embora você possa adicionar, substituir ou remover componentes facilmente no Flex UI (IU do Flex), você pode achar que os funcionários precisam de uma página totalmente separada para realizar seu trabalho com eficiência no Flex UI (IU do Flex). O Flex permite que você crie essas exibições e direcione os funcionários para elas.

O Flex UI (IU do Flex) usa as bibliotecas react-router, react-router-redux e history para roteamento do lado do cliente.

Adicionar, substituir ou remover uma exibição

O Flex organiza as exibições dentro do componente dinâmico ViewCollection. Você pode manipular as exibições do Flex da mesma maneira que um componente dinâmico.

Flex.ViewCollection.Content.add(
  <Flex.View name="my-custom-page" key="my-custom-page-key">
    <div>My custom page</div>
  </Flex.View>
);

This will add a new view that's available under a path that corresponds to the name prop (i.e., https://localhost:8080/my-custom-page in this example.)

Se precisar de mais controle sobre como montar sua exibição, consulte a seção Mounting a View to Multiple Routes (Montar uma exibição para várias rotas).

Você também pode criar um link para sua exibição na barra de navegação lateral:

 Flex.SideNav.Content.add(
  <Flex.SideLink
    showLabel={ true }
    icon="DefaultAvatar"
    isActive={true}
    onClick={() => { Flex.Actions.invokeAction("HistoryPush", `/my-custom-page/`); } }
    key="MyCustomPageSideLink"
  >
    My custom page
  </Flex.SideLink>
);

Opções de configuração

A interface de configuração para a funcionalidade relacionada a roteamento no Flex tem a seguinte forma:

router?: {
  type: "browser" | "memory"; // either a web-browser address or a reference implementation
  history?: HistoryBuildOptions; // build options for a `history` NPM package
  isolate?: boolean; // isolate Flex routing from other routing, forces Flex to use memory router.
};

Ações para navegação e roteamento

Você pode usar ações para navegar para em diferentes "locations" no Flex UI (IU do Flex). As ações funcionam de forma semelhante à API HTML5 History API. As ações do Flex incluem:

Ação Payload Descrição
NavigateToView {viewName: string} Navega o usuário para uma exibição definida pelo nome de exibição fornecido
HistoryPush Caminho do URL como uma String ou um Objeto que corresponde à forma do local do histórico ({pathname: string, search: string, hash: string, state: {[key: string]: any}}) Adiciona uma entrada de histórico, o que leva à alteração da exibição ou ao redirecionamento
HistoryReplace Caminho do URL como uma String ou um Objeto que corresponde à forma do local do histórico ({pathname: string, search: string, hash: string, state: {[key: string]: any}}) Substitui a entrada do histórico atual, levando a uma alteração de exibição ou redirecionamento
HistoryGo Inteiro Vai para uma entrada de histórico específica, identificada por sua posição relativa para a página atual. A página atual é o índice 0.
HistoryGoBack Nenhum Retorna à entrada do histórico anterior
HistoryGoForward Nenhum Avança para a próxima entrada do histórico

Navegador e histórico na memória

Suporte para navegador e histórico de memória que é configurável através do objeto de configuração.

Montagem de uma exbição para várias rotas

Você pode querer que o caminho da sua página seja separado do name ou expor vários caminhos que levam à mesma exibição. O componente Exibição tem uma propriedade de route que você pode usar para adicionar uma rota alternativa. A propriedade route tem uma forma semelhante aos adereços do componente do pacote react-router.

Flex.ViewCollection.Content.add(
  <Flex.View name="some-name" key="my-custom-page-key" route={{path: "/custom-route"}}>
    <div>My custom page</div>
  </Flex.View>
);

A página personalizada será visível nos caminhos/custom-route e /some-name.

Você também pode usar uma matriz para adicionar ainda mais caminhos:

<View key="teams" name="teams" route={{ path: ["/supervisor", "/something"] }}>

A exibição será visível nos caminhos /teams /supervisor e /something.

Coordenação do Flex UI (IU do Flex) com roteamento de aplicativos

Se estiver usando bibliotecas de roteamento, como react-router-redux ou connected-react-router, poderá sincronizar o histórico entre o aplicativo e o Flex fornecendo o objeto de histórico que você está usando para o Roteador como um parâmetro para o aprimorador de armazenamento do Flex:

As opções de configuração do router não terão efeito quando um objeto personalizado history for fornecido.

import { createStore, combineReducers, applyMiddleware, compose } from "redux";
import { createBrowserHistory } from "history";
import { Provider } from "react-redux";
import { ConnectedRouter } from "react-router-redux";
import { Switch, Route } from "react-router";
import { configuration } from "/appConfig";
import { myReducer } from "/myReducer";

const reducers = combineReducers({
    flex: Flex.FlexReducer,
    app: myReducer
});

const history = createHistory();

const middleware = applyMiddleware();

const store = createStore(
    reducers,
    compose(
        middleware,
        Flex.applyFlexMiddleware(history)
    )
);

Flex
    .Manager.create(configuration, store)
    .then(manager => {        
        ReactDOM.render(
            <Provider store={store}>
                <ConnectedRouter history={history}>
                    <Switch>
                        <Route path="/hi" component={() => {
                            setTimeout(() => { history.push("/"); }, 5000);
                            return (
                                <div>Hi! I will redirect to Flex in 5 seconds flat!</div>
                            );
                        }}></Route>
                        <Route component={() => {
                            return (<Flex.ContextProvider manager={manager}>
                                <Flex.RootContainer />
                            </Flex.ContextProvider>);
                        }}></Route>
                    </Switch>
                </ConnectedRouter>
            </Provider>,
            container
        );
    })

Rotas prefixadas

Se você estiver usando o Flex junto com outros aplicativos, você pode querer prefixar o caminho do URL do Flex com um prefixo para que o roteamento do Flex não interfira com outros endpoints registrados. Por exemplo, vamos fazer nosso caminho do Flex em relação a /foobar. Para isso, aplique as seguintes definições de configuração:

window.appConfig = {
  <...>
  router: {
    type: "browser",
    history: {
      basename: "/foobar"
    }
  }
  <...>
};

O campo window.appConfig.router.history.basename diz ao Flex para tornar o Agent Desktop disponível em http://mysite.com/foobar/agent-desktop/.

A implementação da prefixação de rota cria vários efeitos colaterais importantes para outros sistemas que interagem com o Flex.

Seu servidor deve levar o prefixo em consideração em seu próprio roteamento. O servidor precisa de uma rota de fallback para todos que corresponda ao prefixo (/foobar no exemplo acima). Caso contrário, acessar http://mysite.com/foobar/agent-desktop/ retornará um 404. A configuração de um aplicativo webpack-dev-server que manipula a rota pode ser semelhante a:

devServer: {
    historyApiFallback: {
        rewrites: [{ from: /^\/foobar/, to: '/foobar/index.html' }]
    }
}

Além disso, o prefixo é apenas browser para roteamento e não é aplicável a memory. Por fim, certifique‐se de ajustar os caminhos para seus arquivos de ativos, como configuração ou CSS!

Classifique esta página:

Precisa de ajuda?

Às vezes, todos nós precisamos; a programação é difícil. Receba ajuda agora da nossa equipe de suporte, ou confie na sabedoria da multidão navegando pelo Stack Overflow Collective da Twilio ou buscando a tag Twilio no Stack Overflow.

Obrigado pelo seu feedback!

Selecione o(s) motivo(s) para seu feedback. As informações adicionais que você fornece nos ajudam a melhorar nossa documentação:

Enviando seu feedback...
🎉 Obrigado pelo seu feedback!
Algo deu errado. Tente novamente.

Obrigado pelo seu feedback!

Indique‑nos e obtenha USD10 em 3 etapas simples!

Etapa 1

Obtenha o link

Obtenha um link de indicação pessoal gratuito aqui

Etapa 2

Dê USD10

Seu usuário se inscreve e faz a atualização usando o link

Etapa 3

Obtenha USD10

1.250 mensagens SMS grátis
OU 1.000 min de voz grátis
OU 12.000 chats
OU mais