# Navigation

The navigation configuration is for configuring a sidebar-menu and navigation arrows on Elements, allowing the App User to navigate between Pages.

# Configuration Overview

The following gif shows a simple use case of a Pages based navigation with an always open sidenav. The configuration for this App can be found below. Another example with the in-element-navigation and SyncSets is available in another section below.

Navigation.gif

{
  "version": "1.0",
  "navigation": {
    "type": "app",
    "config": {
      "enabled": true,
      "expandAll": true,
      "permanent": true
    },
    "entries": [
      {
        "page": "homePage",
        "label": "Home",
        "children": [
          {
            "label": "Team Overview",
            "page": "homePage.TeamPage"
          },
          {
            "label": "Project Overview",
            "page": "homePage.ProjectPage",
            "children": [
              {
                "label": "Project Details",
                "page": "homePage.ProjectPage.ProjectDetails"
              }
            ]
          }
        ]
      }
    ]
  },
  "endpoints": [],
  "screens": [],
  "pages": [
    {
      "id": "homePage",
      "label": "Home",
      "screens": [
        {
          "layout": "layoutHome",
          "conditions": {
            "minScreenWidth": 0
          }
        }
      ],
      "children": [
        {
          "id": "ProjectPage",
          "label": "Projects",
          "screens": [
            {
              "layout": "layoutProjects",
              "conditions": {
                "minScreenWidth": 0
              }
            }
          ],
          "children": [
            {
              "id": "ProjectDetails",
              "label": "Project Details",
              "screens": [
                {
                  "layout": "layoutProjectsDetails",
                  "conditions": {
                    "minScreenWidth": 0
                  }
                }
              ]
            }
          ]
        },
        {
          "id": "TeamPage",
          "label": "Team Worklogs",
          "screens": [
            {
              "layout": "layoutTeams",
              "conditions": {
                "minScreenWidth": 0
              }
            }
          ]
        }
      ]
    }
  ],
  "layouts": [
    {
      "id": "layoutHome",
      "type": "fixedGrid",
      "config": {
        "dim": {
          "x": 24,
          "y": 24
        },
        "containers": [
          {
            "id": "htmlContainer",
            "pos": {
              "x": 1,
              "y": 1
            },
            "size": {
              "w": 24,
              "h": 24
            }
          }
        ]
      },
      "cellPadding": "5px",
      "placements": [
        {
          "containerId": "htmlContainer",
          "elementId": "homeHtml"
        }
      ]
    },
    {
      "id": "layoutProjectsDetails",
      "type": "fixedGrid",
      "config": {
        "dim": {
          "x": 25,
          "y": 26
        },
        "containers": [
          {
            "id": "headerHtmlContainer",
            "pos": {
              "x": 1,
              "y": 1
            },
            "size": {
              "w": 20,
              "h": 3
            }
          },
          {
            "id": "tableContainer",
            "pos": {
              "x": 1,
              "y": 4
            },
            "size": {
              "w": 25,
              "h": 15
            }
          }
        ]
      },
      "cellPadding": "5px",
      "placements": [
        {
          "containerId": "headerHtmlContainer",
          "elementId": "ProjectOverviewHtml"
        },
        {
          "containerId": "tableContainer",
          "elementId": "ProjectDetailsHtml"
        }
      ]
    },
    {
      "id": "layoutTeams",
      "type": "fixedGrid",
      "config": {
        "dim": {
          "x": 25,
          "y": 26
        },
        "containers": [
          {
            "id": "tableContainer",
            "pos": {
              "x": 1,
              "y": 5
            },
            "size": {
              "w": 20,
              "h": 13
            }
          }
        ]
      },
      "cellPadding": "5px",
      "placements": [
        {
          "containerId": "tableContainer",
          "elementId": "htmlHeader"
        }
      ]
    },
    {
      "id": "layoutProjects",
      "type": "fixedGrid",
      "config": {
        "dim": {
          "x": 25,
          "y": 26
        },
        "containers": [
          {
            "id": "header",
            "pos": {
              "x": 1,
              "y": 1
            },
            "size": {
              "w": 20,
              "h": 3
            }
          }
        ]
      },
      "cellPadding": "5px",
      "placements": [
        {
          "containerId": "header",
          "elementId": "ProjectOverviewHtml"
        }
      ]
    }
  ],
  "elements": [
    {
      "id": "ProjectOverviewHtml",
      "type": "html",
      "config": {
        "html": "<p>And this is what comes up on the \"Project Overview\" page</p>"
      }
    },
    {
      "id": "homeHtml",
      "type": "html",
      "config": {
        "html": "<h1>Hello</h3><p>You are on the \"Home page\"</p>"
      }
    },
    {
      "id": "htmlHeader",
      "type": "html",
      "config": {
        "html": "<h2>Hello</h2><p>You are on the \"Team Overview\" page</p>"
      }
    },
    {
      "id": "kpiElement",
      "type": "html",
      "config": {
        "html": "<p>And this is what comes up on the \"Project Details\" page</p>"
      }
    },
    {
      "id": "ProjectDetailsHtml",
      "type": "html",
      "config": {
        "html": "<p>And this is what comes up on the \"Project Details\" page</p>"
      }
    }
  ],
  "datasources": [],
  "syncSets": [],
  "partials": [],
  "customElementPacks": [],
  "customHooks": []
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268

# Properties for Sidebar Navigation

Property: navigation

Type: object

Description: The navigation object on root level holds and references all navigation-specific configuration entities.

"navigation": {
  "config": {
    "enabled": true,
    "expandAll": false,
    "permanent": false,
    "fullCollapsible": true,
    "hidden": false
  },
  "entries": [
    {
      "label": "",
      "page": "",
      "children": [
  
      ]
    }
  ],
  "type": "app"
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Property: navigation.type

Type: string

Description: Specifies the type of the navigation. The type app is currently the only available type.

"type": "app"
1

Property: navigation.config

Type: object

Description: The config object of the navigation contains generic options for the sidenav of the navigation.

"config": {
  "enabled": true,      // Enable or disable the navigation.
  "expandAll": false,   // Expand all (Sidebar navigation) Tree entries by default.
  "permanent": false,    // Show Sidebar navigation permanent or show it via click on an Icon in the top right.
  "fullCollapsible": true | false, // Make Pages collapsible even if viewing a child page.
  "hidden": true | false  // Option to hide breadcrumbs or Sidebar Navigation completely.      
},
1
2
3
4
5
6
7

Property: navigation.entries

Type: array

Description: Specifies all navigation entries, labels and paths to Pages. The order of the entries defines the order in the sidenav. The first entry is used as initial page when opening the App. The children can be used to enable a second level menu (as seen in the gif) at the beginning of this document as "Project Details".

"entries": [
  {
    "page": "overview",
    "label": "Overview 1",
    "children": [
      {
        "label": "child1",
        "page": "overview.details"
      }
    ]
  },
  {
    "label": "Overview 2",
    "page": "overview2",
    "children": [
      {
        "label": "child2",
        "page": "overview2.details"
      }
    ]
  }
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# Properties for Element Navigation

Used to navigate by clicking a link on the Element or even use the whole Element to navigate. The gif below this section shows an example of this in action.

Property: navigation

Type: array

Description: Configuration of the in-element navigation.

{
  "id": "table",
  "type": "table",
  "source": "test_dataSource",
  "navigation": [
    {
      "to": "home.details",
      "label": "Show Details",
      "linkElement": true,
      "showLink": false
    }
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13

Property: to

Type: string

Description: Configuration of the Element navigation target. This property identifies where to go, when clicking the in-element navigation trigger.

{
  "to": "home.details"
}
1
2
3

Property: label

Type: string

Description: Configuration of the Element navigation label, which is rendered as the in-element navigation trigger and can be clicked by the user.

{
  "label": "Show Details"
}
1
2
3

Property: linkElement

Type: boolean

Description: Enable or disable using the whole Element as in-element navigation trigger. If enabled, the whole Element can be clicked and forwards the user to the specified target.

  "linkElement": true | false
1

Property: showLink

Type: boolean

Description: Shows or hides the arrow used in-element navigation trigger.

  "showLink": true | false
1

# Properties for SyncSet Navigation with in-element Navigation

Navigation.gif

{
  "version": "0.1",
  "pages": [
    {
      "id": "home",
      "label": "Home",
      "screens": [
        {
          "layout": "layout1",
          "conditions": {
            "syncSets": {
              "testSyncSet1": {
                "Country": {
                  "present": false
                }
              }
            }
          }
        },
        {
          "layout": "layout2",
          "conditions": {
            "syncSets": {
              "testSyncSet1": {
                "Country": {
                  "present": true
                }
              }
            }
          }
        }
      ],
      "children": [
        {
          "id": "details",
          "label": "Details",
          "screens": [
            {
              "layout": "layout2"
            }
          ]
        }
      ]
    }
  ],
  "layouts": [
    {
      "id": "layout2",
      "type": "fixedGrid",
      "config": {
        "dim": {
          "x": 24,
          "y": 24
        },
        "containers": [
          {
            "id": "tableContainer1",
            "pos": {
              "x": 1,
              "y": 5
            },
            "size": {
              "w": 24,
              "h": 20
            }
          }
        ]
      },
      "placements": [
        {
          "containerId": "tableContainer1",
          "elementId": "frtTable1"
        }
      ]
    },
    {
      "id": "layout1",
      "type": "fixedGrid",
      "config": {
        "dim": {
          "x": 24,
          "y": 24
        },
        "containers": [
          {
            "id": "tableContainer1",
            "pos": {
              "x": 1,
              "y": 5
            },
            "size": {
              "w": 12,
              "h": 20
            }
          },
          {
            "id": "tableContainer2",
            "pos": {
              "x": 13,
              "y": 5
            },
            "size": {
              "w": 12,
              "h": 20
            }
          }
        ]
      },
      "cellPadding": "0px",
      "placements": [
        {
          "containerId": "tableContainer1",
          "elementId": "frtTable1"
        },
        {
          "containerId": "tableContainer2",
          "elementId": "frtTable2"
        }
      ]
    }
  ],
  "datasources": [
    {
      "id": "frtTestSource1",
      "origin": "frt",
      "config": {
        "schema": "table",
        "workflowJobId": "b79850a0-69a5-4f41-a13e-82390027862c",
        "frtId": "13b8c145-2beb-4d72-a6a5-9102ce84b744",
        "dataOptions": {
          "pagination": {
            "type": "offset",
            "page": 1,
            "size": 10,
            "totalPages": true
          }
        },
        "filterOptions": {
          "distinctValues": true,
          "enabled": true
        }
      }
    }
  ],
  "syncSets": [
    {
      "id": "testSyncSet1",
      "sources": ["frtTestSource1"],
      "joins": [
        {
          "datasource": "frtTestSource1",
          "columns": ["Country"]
        }
      ],
      "syncMap": [
        {
          "source": "frtTestSource1",
          "targets": ["frtTestSource1"]
        }
      ]
    }
  ],
  "elements": [
    {
      "id": "frtTable1",
      "type": "table",
      "source": "frtTestSource1",
      "syncSets": [
        {
          "syncSetId": "testSyncSet1",
          "publishFilters": true,
          "applyFilters": true
        }
      ],
      "config": {
        "columns": [
          {
            "name": "Country"
          },
          {
            "name": "Sales"
          }
        ]
      }
    },
    {
      "id": "frtTable2",
      "type": "table",
      "source": "frtTestSource1",
      "navigation": [
        {
          "to": "home.details",
          "label": "See Details"
        }
      ],
      "syncSets": [
        {
          "syncSetId": "testSyncSet1",
          "publishFilters": false,
          "applyFilters": true
        }
      ],
      "config": {
        "columns": [
          {
            "name": "Country"
          },
          {
            "name": "Market_Value"
          }
        ]
      }
    }
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215

# Best practices and common questions

Q: How is the order of navigation entries decided?
A: The order of navigation items reflects the order in the navigation configuration array.

Q: Which navigation entry is the landing / initial page?
A: The first one in the navigation configuration array is auto-selected as the initial page.