Flex is built using React, so it's a single page application by default. While you can easily add, replace or remove components to the Flex UI, you may find that workers need an entirely separate page to effectively get their work done in the Flex UI. Flex allows you to create these views and route workers to them.
The Flex UI uses the react-router, react-router-redux and history libraries for client-side routing.
Flex organizes views within the ViewCollection dynamic component. You can manipulate Flex views in the same manner as a dynamic component.
_10Flex.ViewCollection.Content.add(_10 <Flex.View name="my-custom-page" key="my-custom-page-key">_10 <div>My custom page</div>_10 </Flex.View>_10);
This will add a new view that's available under a path that corresponds to the name prop (i.e., https://localhost:3000/my-custom-page in this example.)
If you require more control over mounting your view, refer to the Mounting a View to Multiple Routes section.
You can also create a link to your view in the side navigation bar:
_11 Flex.SideNav.Content.add(_11 <Flex.SideLink_11 showLabel={ true }_11 icon="DefaultAvatar"_11 isActive={true}_11 onClick={() => { Flex.Actions.invokeAction("HistoryPush", `/my-custom-page/`); } }_11 key="MyCustomPageSideLink"_11 >_11 My custom page_11 </Flex.SideLink>_11);
The configuration interface for routing-related functionality in Flex has the following shape:
_10router?: {_10 type: "browser" | "memory"; // either a web-browser address or a reference implementation_10 history?: HistoryBuildOptions; // build options for a `history` NPM package_10 isolate?: boolean; // isolate Flex routing from other routing, forces Flex to use memory router._10};
Support for browser and memory history that is configurable through the configuration object.
You may want your page's path to be separate from the name, or to expose multiple paths that lead to the same View. The View component has a route property that you can use to add an alternative route. The route property has a shape similar to props of Route component of react-router package.
_10Flex.ViewCollection.Content.add(_10 <Flex.View name="some-name" key="my-custom-page-key" route={{path: "/custom-route"}}>_10 <div>My custom page</div>_10 </Flex.View>_10);
The custom page will be visible at the/custom-route and /some-name paths.
You can also use an array to add even more paths:
_10<View key="teams" name="teams" route={{ path: ["/supervisor", "/something"] }}>
The view will be visible at the /teams /supervisor and /something paths.
If you are using routing libraries like react-router-redux or connected-react-router, you can sync history between your application and Flex by providing the history object that you are using for your Router as a parameter to the Flex store enhancer:
The router application configuration options will have no effect when a custom history object is provided.
_49import { createStore, combineReducers, applyMiddleware, compose } from "redux";_49import { createBrowserHistory } from "history";_49import { Provider } from "react-redux";_49import { ConnectedRouter } from "react-router-redux";_49import { Switch, Route } from "react-router";_49import { configuration } from "/appConfig";_49import { myReducer } from "/myReducer";_49_49const reducers = combineReducers({_49 flex: Flex.FlexReducer,_49 app: myReducer_49});_49_49const history = createHistory();_49_49const middleware = applyMiddleware();_49_49const store = createStore(_49 reducers,_49 compose(_49 middleware,_49 Flex.applyFlexMiddleware(history)_49 )_49);_49_49Flex_49 .Manager.create(configuration, store)_49 .then(manager => {_49 ReactDOM.render(_49 <Provider store={store}>_49 <ConnectedRouter history={history}>_49 <Switch>_49 <Route path="/hi" component={() => {_49 setTimeout(() => { history.push("/"); }, 5000);_49 return (_49 <div>Hi! I will redirect to Flex in 5 seconds flat!</div>_49 );_49 }}></Route>_49 <Route component={() => {_49 return (<Flex.ContextProvider manager={manager}>_49 <Flex.RootContainer />_49 </Flex.ContextProvider>);_49 }}></Route>_49 </Switch>_49 </ConnectedRouter>_49 </Provider>,_49 container_49 );_49 })
If you are using Flex alongside other applications, you may wish to prepend the Flex URL path with a prefix so that Flex routing won't interfere with other registered endpoints. For example, let's make our Flex path relative to /foobar. To do so, apply the following configuration settings:
_10window.appConfig = {_10 <...>_10 router: {_10 type: "browser",_10 history: {_10 basename: "/foobar"_10 }_10 }_10 <...>_10};
The window.appConfig.router.history.basename field tells Flex to make the Agent Desktop available under http://mysite.com/foobar/agent-desktop/.
Implementing route prefixing creates several important side effects for other systems that interact with Flex.
Your server must take the prefix into account in its own routing. The server needs a catch-all fallback route matching the prefix (/foobar in the above example). Otherwise, visiting http://mysite.com/foobar/agent-desktop/ will return a 404. An application's webpack-dev-server config that handles the route might look like the following:
_10devServer: {_10 historyApiFallback: {_10 rewrites: [{ from: /^\/foobar/, to: '/foobar/index.html' }]_10 }_10}
Additionally, the prefix is only for browser routing and is not applicable to memory. Finally, make sure to adjust paths to your assets files, like configuration or CSS!
Learn more in the history node package documentation.