Redesigning Desk

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. :zap:

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.

70 Likes

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

1 Like

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.

3 Likes

Interesting. Amazing.

2 Likes

Great works

1 Like

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

2 Likes

Interesting. Amazing. :heart_eyes:

1 Like

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.

3 Likes

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

2 Likes

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

5 Likes

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

2 Likes

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.


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

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.

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.

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??

5 Likes

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

  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
  1. 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!

2 Likes

OH MY GOD YES! :heart_eyes:

Wow…:star_struck: Is it possible to try this out yet?

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

@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 …

Sure, I’ll keep this in mind

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.

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

hi, may you show example, how extend pages