# (Kind of) Generic Page Creation and Navigation based on JavaScript Definitions **URL:** \ **Category:** Show and Tell\ **Created:** [February 5, 2016, 10:10am UTC](https://forums.fusetools.com/t/kind-of-generic-page-creation-and-navigation-based-on-javascript-definitions/4457 "2016-02-05T10:10:33Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![mbefore305](https://avatars.discourse-cdn.com/v4/letter/m/da6949/32.png) [@mbefore305](https://forums.fusetools.com/u/mbefore305)\ **Post date:** [February 5, 2016, 10:10am UTC](https://forums.fusetools.com/t/kind-of-generic-page-creation-and-navigation-based-on-javascript-definitions/4457/1 "2016-02-05T10:10:33Z")
Hi, this app does actually nothing 🙂 Thanks: I got a lot of help from the FUSE team and others: hasselknippe, jake, 86fernandolins, skezo, duckers, till. Hope I did not forget anyone. Scope: Creating pages based on definitions in JavaScript. Navigation through the pages according to the definitions. Details: In JavaScript pages are defined. Each page has the following parameters: - background: “#546E7A” Set to a color value - title: “Set A Page 1” The title is used in the (optional) page header and the Main Navigation Page - headerVisible: “Visible” The page header can be Visible, Collapsed or Hidden - visibleInMainMenu: “Visible” If Visible, the page can be navigated to from the pop-up menu - swipeLeftEnabled: true Enable swiping to the right to navigate to another page - swipeLeftTarget: “SetA2” Specifies target page of the right swipe - swipeRightEnabled: false Enable swiping to the left to navigate to another page - swipeRightTarget: “” Specifies target page of the left swipe - buttonBackVisible: “Collapsed” A bottom on the bottom of each page: Visible, Collapsed or Hidden - buttonBackTarget: “” Taget page when clicking the button - egdeNavigatorEnabled: true True/false to enable/disable EdgeNavigator (a Sidebar) on the page Further functions: - For debugging purposes on each page the page definition is listed. It can be enabled/disabled by a switch on the Main Navigation Page - A UserEvent is used to enable/disable the Main Menu (behind the 3 dots) Solved issues: - Edge Navigation (Sidebar): This is the biggest headache - How to exit the app from JavaScript or .ux? E.g. add an entry in the Pop\_up Menu: ‘Exit’. What should it trigger? Meanwhile I managed to use the Exit/HomeScreen example from Bolav: [https://github.com/bolav/fuse-backbutton-trigger](https://github.com/bolav/fuse-backbutton-trigger) - Why is MainPage in the pop-up menu not on top? It is the first item in the definition. Other post explains this. Items build with ‘Each’ are last, independent of their position in the ux. Just by putting it into a container solves this. - How to get a nice frame around the pop-up menu? Currently it looks a bit strange. This was due to different sizes of frame and contents. Could be fixed by letting the layout define sizes itself. Link: [https://drive.google.com/file/d/0B4oWw-0WhsI8NHNuc2xkRzhlbVU/view?usp=sharing](https://drive.google.com/file/d/0B4oWw-0WhsI8NHNuc2xkRzhlbVU/view?usp=sharing) ---
**Author:** ![Redux](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/redux/32/503_2.png) [@Redux](https://forums.fusetools.com/u/Redux)\ **Post date:** [February 5, 2016, 10:09pm UTC](https://forums.fusetools.com/t/kind-of-generic-page-creation-and-navigation-based-on-javascript-definitions/4457/2 "2016-02-05T22:09:21Z")
Very cool 🙂 ---
**Author:** ![mbefore305](https://avatars.discourse-cdn.com/v4/letter/m/da6949/32.png) [@mbefore305](https://forums.fusetools.com/u/mbefore305)\ **Post date:** [February 14, 2016, 12:17pm UTC](https://forums.fusetools.com/t/kind-of-generic-page-creation-and-navigation-based-on-javascript-definitions/4457/3 "2016-02-14T12:17:34Z")
New version with many updates: [https://drive.google.com/file/d/0B4oWw-0WhsI8NkFmTkdWN1p6Nzg/view?usp=sharing](https://drive.google.com/file/d/0B4oWw-0WhsI8NkFmTkdWN1p6Nzg/view?usp=sharing) Thanks for input on - Toast message from Redux: [https://www.fusetools.com/community/forums/show\_and\_tell/toast\_notifications?page=1#post-20c8935f-7d1d-4ebe-b2d0-1cc626f7817c](https://www.fusetools.com/community/forums/show_and_tell/toast_notifications?page=1#post-20c8935f-7d1d-4ebe-b2d0-1cc626f7817c) - React on Android Back Button from Bolav: [https://github.com/bolav/fuse-backbutton-trigger](https://github.com/bolav/fuse-backbutton-trigger) Changes: - Clean-up of .ux; splitting .ux in several modules (Main, Sidebar, Resources) - Toast messages when page is changed. They disappear after a timeout. A toast can also ask for a confirmation (in case of Exit App pressed in pop-up menu); no timeout in this case. - Pop-up menu entries animated - Sidebar is now working as wanted. Some animations added. - Exit App from pop-up menu (Note: works on Android, not in preview) - Android back-button will also result in Exit App (Note: not available in preview). Would be nice to get feedback on what could be simplified or done in smarter ways. ---
**Author:** ![e.cerroni](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/e.cerroni/32/102_2.png) [@e.cerroni](https://forums.fusetools.com/u/e.cerroni)\ **Post date:** [March 13, 2016, 2:47pm UTC](https://forums.fusetools.com/t/kind-of-generic-page-creation-and-navigation-based-on-javascript-definitions/4457/4 "2016-03-13T14:47:21Z")
#### Great job you did here 🙂 Did you also think to introduce the following tiny behavior? - When you press anywhere near the left edge of the screen, the sidebar pop in just a bit while your not swiping. This is something that gmail and slack for mobile do for example… ---
**Author:** ![mbefore305](https://avatars.discourse-cdn.com/v4/letter/m/da6949/32.png) [@mbefore305](https://forums.fusetools.com/u/mbefore305)\ **Post date:** [March 14, 2016, 7:48am UTC](https://forums.fusetools.com/t/kind-of-generic-page-creation-and-navigation-based-on-javascript-definitions/4457/5 "2016-03-14T07:48:37Z")
Thanks! The sidebar caused me many headaches; in the end I was happy with the way it currently looks, and I do not plan to do more on this, sorry. But if you manage, would be nice, if you share. ---
**Author:** ![e.cerroni](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/e.cerroni/32/102_2.png) [@e.cerroni](https://forums.fusetools.com/u/e.cerroni)\ **Post date:** [March 14, 2016, 10:09pm UTC](https://forums.fusetools.com/t/kind-of-generic-page-creation-and-navigation-based-on-javascript-definitions/4457/6 "2016-03-14T22:09:27Z")
Yes, I’ll share it here if I manage it! 🙂