Routing / Deep Links
The BPC supports the use of deep links. The so-called hashhttps://developer.mozilla.org/en-US/docs/Web/API/Location[(MDN Docs Location]) of the URL is used for this.
This is where the BPC stores routes separated by &.
Each route is divided into further components by /.
https://COMPANY.COM/bpc#/one/part&second/part
Navigation route
The part of the route that begins with /_nav is the navigation route.
This is an optional component that refers to an element of the navigation route Navigation
Since modules in the BPC can be used simultaneously at different points within the Navigation this part points to the current position in the Navigation settings.
This allows the correct state of the navigation elements to be restored if the page is reloaded.
|
If the BPC is only loaded with [_navigations_route] and without [_modul_route], the module is activated, then placed behind the addressed part of the Navigation is configured. |
Syntax
The Navigation has a tree structure.
To address an element in this tree, the viewItemId of the respective nodes are strung together.
The route /1/12/123 addresses the element with the viewItemId 123
| The [_navigations_route] should not be used directly by the module developer. Only the [_modul_route] should be used for addressing and parameterizing the BPC modules. |
Module route
A part begins with /module and addresses a module in the BPC.
This URL can contain additional parameters for the target module.
The evaluation of the parameters is the responsibility of the module itself.
Syntax
/module/MODULE-ID/INSTANCE-ID/RESERVED/ENCODED-MODULE-OPTIONS/ADDITIONAL-ROUTE-ELEMENT-1/ADDITIONAL-ROUTE-ELEMENT-n
INSTANCE-ID
The ID of the respective module instance. If the module offers a general module GUI in addition to instances, the module ID is specified here again.
RESERVED
This position was previously used in some modules and is currently no longer taken into account.
ENCODED-MODULE-OPTIONS
A QueryString (key=value&foo=bar) or a JSON ({"key":"value","foo":"bar"}) can be specified at this position.
These are transferred directly to the module and can be evaluated there.
Which options are supported should be specified in the respective module documentation.
ADDITIONAL-ROUTE-ELEMENT
Any sequence of elements can be appended at the end. These can be handled programmatically by the respective module ([_programmatisches_routing]) or used for the [_deklaratorisches_routing] (see [_routing_innerhalb_von_modulen]).
Routing within modules
Declaratory routing
Declaratory routing is strongly oriented towards the arrangement of the interface elements (Ext.Components). In general, it can be said that all elements are arranged in a tree structure. Routing can be used to control which line from root to branch should be active.
The route controller automatically determines the active route based on the visible elements and sets the path in the URL. If an element is to be included in the routing, it must at least be provided with path information. As the arrangement of the elements is usually defined top-down, the path should always be set by the "parent element". If an element may require routing in itself, it can define a supplementary path.
It is possible that parallel paths are visible in the tree structure. In this case, the route is provided with square brackets in the URL. Bracketed elements are equivalent and are resolved in parallel.
If the BPC is loaded with a route, the route controller attempts to gradually localize and activate the elements according to the route.
When localizing the target elements, potential asynchronous creation of elements is taken into account.
The application of the route can be completely or only partially taken over by modules.
See applyRoute and applySubRoute.
|
The BPC creates a route for the MainView of each module (see [_modul_route]). |
The configuration is configured on the elements (must derive from Ext.Component ) via an route object.
route optionsExt.define({
// ...
route: {
path: "demo",
subPath: ":getSubPath",
applySubRoute: "",
applyRoute: "",
name: "",
subRouteOrder : ["bpcInstanceManagerInstanceGrid"]
}
//...
});path
(string). Name to be set in the route path for this element.
If the path begins with : then it is assumed that it is the referencing of an attribute or a function on the element.
This is attempted to be resolved and set at the point.
Example: :getId causes the function getId() to be called on the element and the result to be set at the location of the path.
Alternatively, the path can also be set directly on the element using the attribute routePath.
routePath to route.pathExt.define({
// ...
routePath: "demo"
//...
});The information in route.path is synchronized with the attribute routePath.
|
The |
subPath
(String; optional). Describes a path for routing within the current element. For example, a grid can transfer the path to the selection of its rows.
If the value begins with :, this is evaluated as already described under path.
|
If |
applyRoute
(String|Function; optional). Is a function or reference to a function (can also be in the ViewController) to which the activation of the target component is transferred. The function is executed in the context in which it is defined (e.g. ViewController).E.g. ViewController). The route to be resolved is transferred to the function as an array. As a rule, only the first element in the array is evaluated, but the function can also take over the rest of the routing process from here. The function must return a Promise, which is resolved as soon as the routing is completed. The Promise must return an object of the following form:
{
"remainingRouteArray": "{string[]}",
"currentRoot": "{Ext.Component}",
"gotoSubRoute": "{boolean}"
}remainingRouteArray
(Array; Optional). An array containing the route still to be processed. This is processed further by the route controller. If no array or an empty array is returned here, the routing process ends.
currentRoot
(Ext.Component; Optional).
Element from which the remaining route (remainingRouteArray) is to be resolved.
gotoSubRoute
(Boolean; optional).
If this value is true, an attempt is made to resolve subPath in the following routing.
applySubRoute
(String|Function; Optional).
This function works in the same way as applyRoute, but refers to subPath.
Routing examples
-
TabPanel
-
Card Layout
Ext.define("BPCMODULE.view.Main", {
extend : "Ext.tab.Panel",
title : "Main View - I'm a TabPanel",
items : [{
// this tab will produce the route .../child1
title : "1",
html : "Child 1",
routePath : "child1"
},
{
// this tab will produce the route .../child2/[/child21,/child2n]
title : "2",
xtype : "panel",
routePath : "child2",
layout : "hbox",
items : [{
title : "2.1",
html : "Child 2.1",
routePath : "child21"
},
{
title : "2n",
html : "Child 2n",
routePath : "child2n"
}]
}, {
// this tab will produce the route .../child3/child31
title : "3",
html : "Child 3",
routePath : "child3",
items : [
{
title : "31",
html : "Child 31",
routePath : "child31"
}
]
},
{
// this tab will produce the route .../childn
title : "n",
html : "Child n",
routePath : "childn"
}]
});Ext.define("BPCMODULE.view.Main", {
extend : "Ext.container.Container",
controller : "mainController",
title : "Main View - I'm a Card Layout",
layout : {
type : "card",
},
items : [
{
xtype : "container",
routePath : "start", // this card will produce the route .../start
items : [
{
xtype : "button",
itemId : "newPageBtn",
routeTarget : "page1" // routeTarget is the same as xtype of view we want to show
}
]
},
{
xtype : "page1",
routePath : "newPage"
}
]
});
Ext.define("BPCMODULE.view.NewPage", {
extend : "Ext.container.Container",
alias : "widget.page1",
controller : "mainController",
title : "Page1 - Card Layout",
layout : {
type : "card"
},
items : [
{
xtype : "container",
routePath : "overview", // this card will produce the route .../overview/newPage
items : [
{
}
]
}
]
});
Ext.define("BPCMODULE.view.MainController", {
extend : "Ext.app.ViewController",
alias : "controller.mainController",
control : {
"button[routeTarget]" : {
click : "showTargetView"
}
},
showTargetView : function (button, event) {
event.stopPropagation();
event.stopEvent();
const routeTarget = button.routeTarget;
if (routeTarget) {
const layout = this.getView().getLayout();
const targetView = Ext.ComponentQuery.query(routeTarget)[0];
layout.setActiveItem(targetView);
}
return false;
}
});