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.
¿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.
