This article is outdated, you can access the most current version here:
https://doc.onedata.de/apps/apps-docs/odml-documentation/AppBuilder/navigation/Navigation.html
Article Content
Page Navigation with SyncSets
A further explanation on SyncSets can be found here.
Pages Property
It is used to add different pages to your app. The pages property and its child properties are described below. A full example for creating pages can be found here.
Property | Type | Description | Example Value |
pages | array | Used to add different pages to your app | "pages": [...] |
pages.id | string | Used to give an id to every page | "id": "home" |
pages.label | string | Used to set the displayed breadcrumb label | "label": "home" |
pages.children | array | Used to add children pages | "children": [ { "id": "details" "label": "Details" "screens": [ "layout": "layout2" ] } ] |
pages.screens | array | Used to add layouts with conditions | "screens": [ { "layout": "layout1", "conditions": { "syncSets": { "testSyncSet1": { "Country": { "present": false } } } } }, { "layout": "layout2", "conditions": { "syncSets": { "testSyncSet1": { "Country": { "present": true } } } } } ] |
element.navigation | array | Used to set a navigation link and label to an Element | "navigation": [ { "to": "home.details", "label": "See Details", // Enables clicking the // whole element "linkElement": true, // Enable or disable the // arrow to navigate "showLink": false } ] |
Page Navigation with Sidebar
Used for adding Sidebar navigation to your app. A full example can be found here.
Property | Type | Description | Example Value |
navigation | object | Object to specify the navigation | "navigation": {...} |
navigation .type | string | Specifies the type of your navigation | "type": "app" |
navigation .config | object | Specifies the configuration of your navigation | "config": { // Enable or disable the navigation "enabled": true, // Expand the whole sidebar navigation "expandAll": false, // Show sidebar navigation permanent or // show it via click on an icon "permanent": false } |
navigation .entries | array | Specifies all navigation entries, labels and paths | "entries": [ { "page": "overview", "label": "Overview 1", "children": [ { "label": "child1", "page": "overview.details" } ] }, { "label": "Overview 2", "page": "overview2", "children": [ { "label": "child2", "page": "overview2.details" } ] } ] |
Reset Filters on Page Navigation
Configuration to reset user filters on page navigation.
Property | Type | Description | Example Value |
pages. clearFiltersOnLeave | object | Clear filters on leaving the page. | "clearFiltersOnLeave": { ... } |
pages. clearFiltersOnLeave. method | string | Method to clear filters. | "method": "allElements" |
method: allElements | string | Clears filters of all elements. | "clearFiltersOnLeave": { "method": "allElements" } |
method: commonElements | string | Clears filters of common elements (commonElements = Filters of all Elements which exist on both pages will be reset). | "clearFiltersOnLeave": { "method": "commonElements" } |
method: noncommonElements | string | Clears filters of noncommon elements (noncommonElements = Filters of Elements which do not exist on new page will be reset). | "clearFiltersOnLeave": { "method": "noncommonElements" } |
method: syncSets | string | Clears elements in specific syncSets. | "clearFiltersOnLeave": { "method": "syncSets", "syncSets": [ "mySyncSet" ] } |
method: elements | string | Clears specific elements. | "clearFiltersOnLeave": { "method": "elements", "elements": [ "table4" ] } |
Example:
"pages": [
{
"id": "page1",
"label": "First Page",
"screens": [
{
"layout": "layout1"
}
],
"clearFiltersOnLeave": {
"method": "allElements"
}
},
{
"id": "page2",
"label": "Second Page",
"screens": [
{
"layout": "layout2"
}
],
"clearFiltersOnLeave": {
"method": "commonElements"
}
},
{
"id": "page3",
"label": "Second Page",
"screens": [
{
"layout": "layout2"
}
],
"clearFiltersOnLeave": {
"method": "noncommonElements"
}
},
{
"id": "page4",
"label": "Second Page",
"screens": [
{
"layout": "layout3"
}
],
"clearFiltersOnLeave": {
"method": "elements",
"elements": [
"table4"
]
}
},
{
"id": "page5",
"label": "Second Page",
"screens": [
{
"layout": "layout3"
}
],
"clearFiltersOnLeave": {
"method": "syncSets",
"syncSets": [
"mySyncSet"
]
}
}
]