Article Content

  1. Page Navigation with SyncSets
  2. Page Navigation with Sidebar
  3. Reset Filters on Page Navigation


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"
        ]
      }
    }
  ]