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

Menu

Crear vistas y rutas personalizadas

Flex se crea utilizando React, por lo que es una aplicación de una sola página de manera predeterminada. Aunque puedes agregar, reemplazar o quitar componentes con facilidad en Flex UI (la interfaz de usuario de Flex), puede que los trabajadores necesiten una página completamente independiente para realizar su trabajo de forma eficiente en dicha interfaz. Flex te permite crear estas vistas y dirigir a los trabajadores a ellas.

Flex UI utiliza las bibliotecas react-router, react-router-reduxy history para el enrutamiento del lado del cliente.

Agregar, reemplazar o quitar una vista

Flex organiza las vistas dentro del componente dinámico ViewCollection. Puedes manipular las vistas de Flex de la misma manera que un 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>
);

Esto agregará una nueva vista que está disponible bajo una ruta que corresponde a la propiedad “name” (nombre) (es decir, https://localhost:8080/my-custom-page en este ejemplo).

Si necesitas más control sobre el montaje de tu vista, consulta la sección Mounting a View to Multiple Routes (Montar una vista en varias rutas).

También puedes crear un enlace a tu vista en la barra de navegación 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>
);

Opciones de configuración

La interfaz de configuración para las funciones relacionadas con el enrutamiento en Flex tiene la siguiente 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.
};

Acciones para la navegación y el enrutamiento

Puedes utilizar acciones para ir a diferentes "ubicaciones" en Flex UI (la interfaz de usuario de Flex). Las acciones funcionan de forma similar a la API del historial de HTML5. Estas son algunas de las acciones de Flex:

Acción Carga útil Descripción
NavigateToView {viewName: string} Lleva al usuario a una vista definida por el nombre de vista proporcionado
HistoryPush Ruta de acceso de la URL como cadena u objeto que coincida con la forma de la ubicación del historial ({pathname: string, search: string, hash: string, state: {[key: string]: any}}) Agrega una entrada de historial, lo que lleva a que la vista cambie o se redirija a otra vista
HistoryReplace Ruta de acceso de la URL como cadena u objeto que coincida con la forma de la ubicación del historial ({pathname: string, search: string, hash: string, state: {[key: string]: any}}) Sustituye la entrada del historial actual, lo que lleva a que la vista cambie o se redirija a otra vista
HistoryGo Entero Va a una entrada de historial específica, que se identifica por su posición relativa con respecto a la página actual. La página actual es el índice 0.
HistoryGoBack Ninguno Vuelve a la entrada anterior del historial
HistoryGoForward Ninguno Avanza a la siguiente entrada del historial

Explorador e historial en la memoria

Compatibilidad con el historial de memoria y explorador que se puede configurar mediante el objeto de configuración.

Montar una vista en varias rutas

Te recomendamos que la ruta de tu página esté separada del “nombre”, o que exponga varias rutas que conduzcan a la misma vista. El componente de la vista tiene una propiedad “route” (ruta) que puedes utilizar para agregar una ruta alternativa. La propiedad “route” tiene una forma similar a las propiedades del componente “Route” del paquete “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>
);

La página personalizada será visible en las rutas /custom-route y /some-name.

También puedes usar una matriz para agregar más rutas:

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

La vista será visible en las rutas /teams /supervisor y /something.

Coordinar Flex UI con el enrutamiento de tu aplicación

Si utilizas bibliotecas de enrutamiento como react-router-redux o connected-react-router, puedes sincronizar el historial entre tu aplicación y Flex proporcionando el objeto history (historial) que estás utilizando para Router como parámetro para el optimizador de almacenamiento de Flex:

Las opciones de configuración de la aplicación del router no tendrán ningún efecto cuando se proporcione el objeto personalizado history.

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
        );
    })

Anteponer rutas

Si utilizas Flex junto con otras aplicaciones, es posible que quieras anteponer a la ruta de la URL de Flex con un prefijo para que el enrutamiento de Flex no interfiera en otros puntos finales registrados. Por ejemplo, hagamos nuestra ruta de Flex relativa a /foobar. Para ello, aplica los siguientes valores de configuración:

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

El campo window.appConfig.router.history.basename le indica a Flex que habilite el escritorio del agente en http://mysite.com/foobar/agent-desktop/.

La implementación del prefijo de ruta crea varios efectos secundarios importantes para otros sistemas que interactúan con Flex.

El servidor debe contemplar el prefijo en su propio enrutamiento. El servidor necesita una ruta de respaldo general que coincida con el prefijo (/foobar en el ejemplo anterior). De lo contrario, visitar http://mysite.com/foobar/agent-desktop/ devolverá un 404. La configuración de webpack-dev-server de una aplicación que gestiona la ruta se podría ver de la siguiente manera:

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

Además, el prefijo es solo para el enrutamiento de browser y no es aplicable a memory. Por último, asegúrate de ajustar las rutas a tus archivos de activos, como la configuración o CSS.

Obtén más información en la documentación del paquete del nodo del historial.

Calificar esta página:

¿Necesitas ayuda?

Todos la necesitamos a veces; la programación es difícil. Obtén ayuda ahora de nuestro equipo de soporte, o recurre a la sabiduría de la multitud visitando Stack Overflow Collective de Twilio o navegando por la etiqueta de Twilio en Stack Overflow.

Gracias por tus comentarios.

Selecciona los motivos de tus comentarios. La información adicional que nos brindas nos ayuda a mejorar nuestra documentación:

Enviando tus comentarios…
🎉 Gracias por tus comentarios.
Se produjo un error. Inténtalo de nuevo.

Gracias por tus comentarios.

¡Recomiéndanos y gana USD 10 en 3 pasos sencillos!

Paso 1

Obtén un enlace

Obtén un enlace gratuito de referencia personal aquí

Paso 2

Regala USD 10

Tu usuario se registra y actualiza mediante el enlace

Paso 3

Obtén USD 10

1250 SMS gratuitos
O 1000 minutos gratuitos de voz
O 12 000 chats
O más