[Epic]: App Viewer Navigation - Configuration and Styles

[dilippitchika]

Objective

Sidebar Navigation: Users need an option to set the navigation layout to use either the sidebar or the top bar. The sidebar should be collapsible and follow the same order as the topbar

Grouped Navigation: Users should be able to group pages together under a navigation group so that they show either on expand in the sidebar or under a submenu in the topbar

Appsmith apps are scaling faster than ever with more power users building apps. The navigation must also scale and we need to provide a convenient way of managing app viewer navigation at scale.

Once we enable app viewer navigation to scale and offer our users choices which best work for them, we naturally solve a big problem for them without them having to make a lot of changes

Success Metrics

This is a platform change so the metrics here will be similar to the KPIs we are starting to capture for UI Builders pod

1. The no. of state changes users do(for managing navigation) will go down drastically
2. Invites to end users should increase because once user changes the nav styles they are more likely to invite more folks.

Prioritised User Stories

• When there are a lot of pages, app devs would like to use different navigation styles so that it’s easy to browse and navigate to pages
• When there are lot of pages, app devs would like to group pages together so that app viewers can browse more easily across navigation
• When app devs want to visually differentiate pages, they should be able to use icons so that pages are much more easier to recall
• When adjusting navigation settings, the developer should be able to see a preview of how their changes will look like so that they can tweak the settings before deploying the apps

Developer Handoff Document in Figma

https://www.figma.com/file/EkPT7FdqmArkk9L7mySA5S/NAV---Designs?node-id=748%3A313757

Test Plan

No response

RACI matrix

RACI
Responsible	@dhruvikn
Accountable	@jsartisan
Consulted	@dilippitchika @andrewdietekoki
Informed	@areyabhishek @Nikhil-Nandagopal @somangshu @kocharrahul7

[GreenFlux]

@dilippitchika currently, the navigation entries are generated directly from the app's list of pages, similar to how a table widget displays columns of data. Could we add 'custom actions' to the navigation, similar to adding custom columns on a table widget?

Use Cases:

• Different links to the same page, with different labels and query params.
• • My Projects, All Projects
• • All Inventory, Out of stock
• Links to actions that should be on all pages, similar to a button widget, but added to the sidebar nav.
• • EDIT PROFILE action that opens a modal
• • LOGOUT button, when using custom auth
• • SETTINGS action that opens a modal to edit preferences in the appsmith.store.

[dilippitchika]

@GreenFlux we are not yet sure about how to achieve this yet, as the APIs we have are inside a page level but navigation is at an app level. Unless we have reusable actions, i don't think we can do this yet.

[Nikhil-Nandagopal]

@dilippitchika I think this should be possible by simply allows users to add a custom URL. That URL can contain query params and the user can write code to detect onPageLoad the query param and trigger an action

[dilippitchika]

@Nikhil-Nandagopal i didn't understand the idea. The idea i had was just for people to give the label and bind some function, we check if the function exists in the page user is currently in and if it does we run the function.

I didn't understand the custom url solution and how it will work. I get the url has some parameters, but i didn't get how triggering the url will actually run an appsmith function.

[Nikhil-Nandagopal]

@dilippitchika so the idea right now is that clicking any button should only trigger a navigation and nothing else since we can't pass custom functions yet. Once the navigation triggers and a page loads, the use can then write code to run JS on page load that reads the query params and triggers the function. "EDIT PROFILE": "https://app.appsmith.com/pages/edit-profile?showModal=true"

onPageLoad: async () => { appsmith.URL.queryParams.showModal ? showModal('Edit Profile') : false; }

[Frederik-Levesque]

When a page is removed from the navigation, the navigation no longer appears on that page. It would be nice to be able to display the navigation on a page without it being visible in the navigation. These could be two distinct options.

As for the grouped navigation feature, do you have an ETA?

[dilippitchika]

When a page is removed from the navigation, the navigation no longer appears on that page. It would be nice to be able to display the navigation on a page without it being visible in the navigation. These could be two distinct options.

@Navir-fred can you explain who uses the page and how do they access it? I want to understand more about what kind of pages are these

As for the grouped navigation feature, do you have an ETA?

Not yet, we are figuring out the engineering details for it

[Frederik-Levesque]

@dilippitchika Certainly! I have a page that lists all of the company's projects. To view the details of a project, edit it, or create a new one, the user open new pages by clicking on a line in the list or a button.

Since I use the same principle for invoices, production orders, etc. and I don't want to have a menu that is too long, I don't include these pages in it. However, I would like the menu to be present on these to facilitate navigation, for example, transitioning from the page "project single" to the invoice's page.

Ideally, it would be possible to build the menu independently by choosing the content, order, grouping, and title. The menu items could link to a page as well as a link.

I hope this clarifies everything.