The New Umbraco 17 Backoffice (Bellissima) – A Beginner-Friendly Walkthrough From 13 to 17 Features & Improvement

Important Note 1:- In 13 There is By default forms installed in backoffice but in 17 it has been removed now you need forms then you have to install it manually to keep CMS lighter this change has been done.

Important Note 2:- Umbraco 17 Runs on .Net 10, this makes it faster , more secure and ready for future features It also means Umbraco 13 to 17 upgrade is easier because both are LTS-LTS support then all changes and migrations introduced between the two LTS releases will be applied automatically.

In older Umbraco versions (v13), the App_Plugins folder contained many core backoffice files and AngularJS-based editors.

But with Umbraco 17 and the new Bellissima backoffice, things have changed:

• AngularJS is completely removed.
• Core backoffice files are no longer inside App_Plugins
• App_Plugins is now clean and empty by default
• It is used only for custom extensions built using modern Web Components
• New extension manifests (JSON format) replace the old package.manifest

Improved date and time picker with no confusing or no errors for time zone and improves scheduling accuracy for editors.

In Umbraco 17 now you can set time and date in UTC format, you can add seconds also which was not in 13, no confusion for editors working in different time zones.

In Older Versions of Umbraco you see Models Builder and Razor runtime compilation were built INTO Umbraco now in 17 this are separate packages you install them only if you need them this makes CMS light and Faster No built-in Models Builder and No Razor Runtime compilation

In settings you can see now permissions has removed and new structure tab has introduced

In Structure you can allow at root permissions and you can choose allowed child node types also you can add collections , collections configures an overview of child content.

New settings tab has introduced by using settings you can allow vary by culture and toggle Is an element type button

You can clean up history by this settings tab

New entity actions when you hover on the name it will open the small dialog in this dialog new some features for fast action it is introduced

In this you can see publish, unpublish, rollback and notifications feature has been introduced which was not in 13.

• Publish:- By clicking publish you can directly publish the page
• Un-Published:- BY clicking this it removes from the live site without changing
• Rollback:- To restore an older version of the content
• Notifications:- alert other users/members about the changes

If you have set validations required and while filling the data if you not fill the details then this symbol will be visible and also message that value cannot be empty.

New icon for warning will show to entered the correct details

In Umbraco 13 there was TinyMCE editor when you select property editor and search for rich text editor then TinyMCE was visible now that is discarded in 17

In Umbraco 17 when you search for rich text editor then you can see new Umb.PropertyEditorUi.TipTap , So Experience the new cleaner,modern style of Tiptap editor

Now In 17 You can see the unpublished changes via symbol and when you hover it displays unpublished changes

When you write text and only click save and not publish then this symbol shows that your content has not been published

By clicking on the three dots then click public access and when you define who can access, then this symbol is visible.

In Umbraco 17 you can see the protected view symbol when you hover on it

In Umbraco 17 you can copy the browser URL and paste it you will be taken to exact the same editor option (Deep Linked) after content there is id this was not smooth in older versions.

In Umbraco 17 there is new feature named Extension insights in settings this is new modernized using web components and typescript.

This means developer can make custom dashboards , editors and tools using new framework like React, Vue and Svelte

In 17 It uses Interaction Memory

• Umbraco remembers where you left off
• If you switch between settings -> content -> media -> return then it opens the last page where you were editing
• This was not in 13

In Umbraco 17 Improved Load Balancing Backoffice & Distributed Caching

• CMS stays in sync across all servers
• Cache updates propogates correctly
• Background task don’t run twice
• Editors never see old or outdates content

Written by

Aditya Bhatti