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"
]
}
}
]
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article