Delve into the revamped settings page of Evolutivo.FW and discover how to organize your configuration applications, and elevate user experience.

We have a new Settings page!

Let's present some of the various reasons we implemented this change.

  • We have received requests to permit non-admin users to access some of the configuration applications. This was the main reason for the change as it was not possible with the settings code we had before.
  • Two configuration screens. We had a mix of the inherited configurations which were accessible in the Settings section and the new Utilities section where we were adding our new integrations and configuration options. It made sense to put them all together.
  • UI. We decided to merge the old settings into the new structure because it is more dynamic, Lightning Design System based, and has a better user experience for the about 50 different configuration applications we have.
  • The division that was present in the Settings section was very rigid. For example, every time you loaded the screen you had access to all the options when you rarely ever opened most of them, you always use the same ones. The groups were subjective and mostly unnecessary.
  • The design we created brings a User Preferences key-value store which is important for other projects we have in the future.
  • We recycled the ConfigEditor module which was not being used.

UI/UX

The new UI is divided into three sections.

The first is a quick search functionality that permits us to find setting applications by simply typing in any search term or by selecting a category from the Category picklist.

The next one is a section where each user will be able to pin those utility applications they use frequently, not only giving you quick access to them but also permitting you to order them as you wish. Each application card supports being pinned by clicking on the pin image and also selecting if we want to visualize the icon or the letter representation of the card.

The last section is where the searched applications appear. From there we can directly click on the card to access the application or pin it to copy it into the pinned section for future quick access.

Utilities UI

Permissions

The applications which are accessible are defined by the ConfigEditor module. A user MUST have a record in this module assigned to him or to a role that he belongs to in order to be able to access the configuration application. Only users with administration privileges can access the ConfigEditor module. This is a hard-coded restriction for obvious reasons.

As a user with administration privileges, when you create a record for another user you should duplicate one of the existing records and change any field you want except the path. This permits us to customize the icon, abbreviation, and categories of the applications even though it isn't a big deal nor something that is recommended.

Video Presentation

Watch this video if you want to learn some more.

Technicalities

  • User Preferences key-value store
  • Convert ConfigEditor extension to module
  • Create records for ConfigEditor module
  • ConfigEditor permission-based consolidated settings view: move settings to utilities
  • Drag and drop, pin, and image functionality
  • Use ConfigEditor::canAccess to validate permission for application access
  • Translations

Enjoy the power and flexibility of Evolutivo.FW!

Photo by Rima Kruciene on Unsplash

Previous Post Next Post