Redesigning Desk

[scmmishra]

A New Desktop

Over the past few weeks, Frappe Team has been working on a desk redesign. The aim of this redesign was to enable faster access to information and simpler navigation.

The new design features a persistent sidebar for navigation and introduces widgets to desk. We’ve also deprecated the config files that originally stored the desktop configuration, all configuration is stored in DB

Widgets

Each page is called a Workspace and can represent a module (for example CRM in ERPNext). A workspace includes the following:

1. A dashboard section for that particular module by default.
2. Shortcuts for commonly visited masters and pages
3. A masters section where all the reports and masters are grouped and listed

All of these will be customizable by the user.

Reports & Dashboards

These are charts created in Dashboard Chart doctype. We recently merged a pull request by @prssannad to develop branch that allows creating dashboard charts right from your reports as well as creating multi-axis chart. This will allow users to create dashboards from essential reports like Profit & Loss Statement.

We’ve also added a summary feature to report view. Most reports are used to track one or two specific metrics. Unless for tasks like Audits, users should not require to parse the entire datatable to find that metric. This PR was merged to develop recently.

We’ve also update the Profit and Loss Statement report with this new API (PR Link). More reports will be updated before the next major release.

Shortcuts

Most users will be interacting with only a certain masters and reports. Shortcuts will allow them to pin it on a higher hierarchy than before. Earlier a user had to parse and entire module view to find the form or list or report they are looking for.

The shortcuts can also show certain counts based on predefined filters. For Instance, number of unpaid expense claims, or open job applications.

The way ahead.

User permissions is properly applied across the desk, however we’re still working on translations and user customizations. The feature is yet in beta, and is constantly being updated. I don’t recommend using this in production.

Onboarding with the new desk.

We have plans on introducing module based onboarding with the new desk. A special onboarding widget will appear to appropriate users based on their roles. This will have the basic steps for users to setup the module for their organization

This feature is not being actively developed, it will be started once desk is fully ready, however we are working on what the onboarding for all these modules will look like.

Reporting Bugs

The feature is still in active development and changes will constantly be pushed almost daily. We already are aware of a few shortcomings. However we’d love all kinds of feedback.

You can install the develop branch for Frappe and ERPNext and see the desk in action. Do note, it is not ready for use in production completely with responsive navigation and translations still in works.

You can create a GitHub Issue with desk-beta label and assign it to me. (github id: scmmishra)

Known gaps being worked on:

1. Translation
2. Dashboard Filters
3. Reponsive Navigation
4. User Customizations
5. Translations

You can track progress of the project here

I’d love to hear all feedback regarding this.

[mkashif14]

@scmmishra

Persistent sidebar for navigation

This was needed very much. Thank you! I hope the sidebar would be collapsible/expandable

[scmmishra]

@mkashif14

I hope the sidebar would be collapsible/expandable

At the moment it is not, however the desk itself works with the full width mode, that would be helpful if you want to see more content on the page.

[Sirjames]

Interesting. Amazing.

[netmanthan]

Great works

[Richa_Verma]

Hi @scmmishra, adding an activity feed might be useful…

[Ashraf_El_Sharqawy]

Interesting. Amazing.

[mujeerhashmi]

Hi,

+1 for the job. To make it more impressive we can use colorful icons like in this theme along with the text on sidebar.

Thanks.

[bkm]

Hmm… If the sidebar is NOT retractable, then this desk will also be relatively useless on a small device through a browser. I think the devs may have missed the point of the complaints about the v12 desk.

BKM

[LarryDevops]

Good work.
Would prefer a Theme switcher for desk, Universal font resize , collapsible sidebar , Unified Settings page, Most visited, Activity widget, Database response widget

[dufani1]

@scmmishra good work, but please try to change the notification icon and improve it to show number of unread notifications.

[scmmishra]

@"Richa_Verma

Hi @scmmishra, adding an activity feed might be useful…

As such there are no plans for an activity feed at the moment, however this can be considered later. The current roadmap is limited as of now.

P.S. The current implementation of notifications is more or less an activity feed for the user.

---

@mujeerhashmi

we can use colorful icons like in this theme along with the text on sidebar.

In the original mocks for the redesign, we added icons. Even considered building our own duotone icon library. However the icons seemed to take too much attention away from the actual content especially when placed along dashboards.

We consciously decided to remove icons for atleast till the near future.

Largely problem with icons is consistency and specificity. Open source font packs like font-awesome or feathericons etc are not suited for modules like ones in ERPNext. Finding a good pack is a pain and building one will be both time consuming and overwhelming for us as a team.

Regarding having colors, colors are used very sparingly in the product, only to convey information. The framework is largely used to build data and form heavy applications, adding colors just adds more cognitive load in processing that information.

However, adding icons is something we will consider before releasing v13

@bkm

If the sidebar is NOT retractable, then this desk will also be relatively useless on a small device through a browser.

In case of mobile devices, it sure will be. The current implementation does not do much about it yet since the feature is still in active development and not yet complete. However solving navigation for mobile is a priority.

@LarryDevops

Would prefer a Theme switcher for desk, Universal font resize , collapsible sidebar , Unified Settings page, Most visited, Activity widget, Database response widget

Theme switcher, we’re looking forward to large UI changes. Something like a theme switcher or dark mode maybe can be considered, but is out of the scope of the redesign as of now

About Universal font size, Yes it is an accessibility issue too, can be easily solved by adding a user specific setting. @LarryDevops if you could create an issue on github, it’ll be appreciated

Unified Settings Page, recently adding this.
Here’s a screenshot

Most visited, Activity widget, Database response widget

The new widget API is quite extensible, things can be added in the future, but at the moment the roadmap is limited.

@dufani1

@scmmishra good work, but please try to change the notification icon and improve it to show number of unread notifications.

Thanks!! Create a github issue and we’ll try to add this in the roadmap.

About changing the icon itself, what are the shortfalls with the current icon??

[wale]

Hi @scmmishra

Excellent work! This is exactly what I was pushing for a few years ago. Two major points to keep in focus for this phase now

@scmmishra

In case of mobile devices, it sure will be. The current implementation does not do much about it yet since the feature is still in active development and not yet complete. However solving navigation for mobile is a priority

1. Mobile is VERY important as you yourself have mentioned. In addition to having the sidebar retractable, we should be able to leave out a segment completely. For example, a user should be able to decide he/she doesn’t want the ‘Reports & Masters’ segment to feature at all in the Workspace

@scmmishra

User permissions is properly applied across the desk

2. The importance of User Permissions being properly and automatically applied cannot be overemphasized! This is a significant issue with the current desk. Users should only see what they have permissions for and this should include both the Sidebar and Workspace elements. Users should NOT have stuff on their screen that they click and then get a notification telling them they don’t have permission!

Thanks a lot for the great work so far

Cheers!

[iMoshi]

OH MY GOD YES!

[hashir]

Wow… Is it possible to try this out yet?

[RWEMA_Aimable]

@scmmishra

We’ve also deprecated the config files that originally stored the desktop configuration, all configuration is stored in DB

will the configurations be shearable through export-features or other means to be distribute with an app?

[dufani1]

@scmmishra

About changing the icon itself, what are the shortfalls with the current icon??

@scmmishra thanks for your reply, I think we shall make it bigger and we shall remove the open documents section inside it and make a separator icon for open documents …

[scmmishra]

@wale

In addition to having the sidebar retractable, we should be able to leave out a segment completely.

Sure, I’ll keep this in mind

@wale

Users should NOT have stuff on their screen that they click and then get a notification telling them they don’t have permission!

We’re trying to minimize this, largely this is more of a complete rewrite, and we have been quite cautious about permissions, we will test it rigorously.

@RWEMA_Aimable

will the configurations be shearable through export-features or other means to be distribute with an app?

Yes. each app can store their configuration, extend pages from other apps.

[landaverdelbo]

hi, may you show example, how extend pages