Bellissima is the code name for the rebuild of the frontend code of the backoffice of Umbraco. Bellissima replaces the old deprecated AngularJS code with Lit, TypeScript and Web Components as well as a flexible extensions API.
In this guide, Yari Mariën explores extending Umbraco 14/15’s new frontend-focused backoffice, utilizing TypeScript and Lit/Web Components. Key topics include setting up custom dashboards, menus, dynamic routes, and modals, all illustrated through hands-on examples using the PokeAPI. The guide aims to facilitate customization and enhance user experience.
In this post, Yari Mariën discusses enhancing Umbraco 14 by adding actions to the sidebar context menu using built-in Entity Actions. He details the registration of actions via manifests, rendering them in the UI, implementing action logic, and handling action results to refresh the tree structure dynamically.
In this post, Yari Mariën outlines the process of enhancing a custom section in Umbraco 14 by adding routing, creating a root page, and displaying detailed views for tree items. Key components include defining routes for creating and editing forms, utilizing a shared component for both functionalities, and implementing navigation through tree items.
Yari Mariën discusses creating custom menu trees in Umbraco, emphasizing a simplified approach using custom-rendered menu items instead of complex tree structures. It details the implementation of a dynamic tree using Umbraco's UI Menu Item component, including fetching data and rendering nested items, supported by necessary manifests for integration.
In this guide, Yari Mariën shares insights on creating custom sections, dashboards, and section views in Umbraco v14. He details the setup process using ManifestSection, ManifestDashboard, and ManifestSectionView, providing code examples for each component. The aim is to enhance the backoffice experience by integrating new functionalities.