Kevin Jump introduces the "Battle scarred developer's guide to Umbraco v17," a series of blog posts aimed at helping package and extension developers navigate the updated Umbraco Backoffice. This initiative follows two years of development and improvements in Umbraco, alongside enhanced documentation available at the official site.
Kevin Jump discusses starting Umbraco extensions using the Umbraco templates and the Opinionated starter kit template by @lottepitcher. He outlines project structure for the DoStuffWithUmbraco repository, detailing components like DoStuff.Client, DoStuff.Core, and DoStuff.Website, emphasizing separation of front-end and back-end logic for better maintainability.
Kevin Jump discusses enhancements for Umbraco extensions, focusing on the benefits of using IPackageManifestReader over umbraco-package.json. This approach allows automatic versioning and cache-busting for JavaScript files. Additionally, he suggests implementing a client interceptor for authentication tokens to ensure they remain valid during prolonged sessions.
Kevin Jump discusses the concept of bundles in Umbraco's Backoffice, which serve as extension points to load JavaScript files and register manifests. He emphasizes organizing manifests within a project for simplicity and efficiency, recommending the use of bundles for better TypeScript support and quicker error detection compared to defining manifests in umbraco-package.json.
Kevin Jump discusses the necessity of entry points in Umbraco extensions, despite bundles now being the primary integration method. Entry points are essential for client-server authentication and can manipulate Umbraco's registry. He emphasizes caution when unregistering components to avoid destabilizing the backoffice.
Kevin Jump's guide details the creation of a custom section in Umbraco, including adding a section, dashboard, sidebar app, and menus using manifests. Key components include defining aliases, localization, and the structure of WebComponents. The complete code is available in the DoStuffWithUmbraco repository on GitHub.
Kevin Jump discusses the implementation of workspaces in Umbraco, which provide dedicated editing environments for specific entity types. He explains the components of a workspace, including workspace context and views, and demonstrates how to create a basic workspace to display user information. Further exploration of workspaces will follow in future posts.
A backoffice announcement bar for Umbraco. Toggle on/off a simple text announcement visible to all backoffice users.
In this week's Umbraco DevRel deep dive, Umbraco Community members Lotte, Sebastiaan, and Phil Whittaker discuss AI "skills" for enhancing the Umbraco Backoffice. Phil explains the installation of these skills, while Sebastiaan demonstrates creating a GitHub User Picker property editor, showcasing the efficiency and capabilities of the new tools.
Umbraco has introduced the Umbraco-CMS-Backoffice-Skills repository, enabling AI agents to learn about Umbraco backoffice development. Installation is simple, and the skills enhance AI capabilities in property editor development and context APIs. This significantly improves AI-generated solutions, ensuring they align with the latest backoffice architecture for better user experiences.
2026-02-05 from 18:30 to 20:30 (Europe/London) - MSQ DX - Leeds Office, 28 Sovereign Street, Leeds, West Yorkshire, GB
Søren Kottal discusses extending Umbraco's Welcome dashboard instead of removing it, allowing for customized content relevant to clients. By implementing the INewsDashboardService interface, developers can populate the dashboard with project updates, onboarding instructions, and other essential information, enhancing the user experience within the CMS.
Aditya Bhatti describes the development of the AI Content Helper, a custom App Plugin for Umbraco 17 that integrates Google Gemini AI to generate content directly from the Umbraco dashboard. The plugin allows editors to create page summaries, meta descriptions, and more, enhancing workflow efficiency with a simple backend integration.
Joe Glombek discusses the significance of editor experience in the new Umbraco backoffice, highlighting innovations like block label templates and Umbraco Flavored Markdown (UFM). He explains UFM components, expressions, and filters, emphasizing their role in enhancing label clarity while addressing the transition from AngularJS and the need for custom extensions.
Joe Glombek discusses implementing a feature in Umbraco 17 to prevent the deletion of specific document types by using custom entity signs. The LockedDocumentFlagProvider class adds flags to locked documents, while the LockedDocumentComposer registers this functionality. This allows users to see locked status in the backoffice before attempting deletions.
Joe Glombek discusses how to integrate blocks into the Rich Text Editor (RTE) in Umbraco, replacing macros. Users can create "element" document types, add a Block button to the RTE toolbar, and configure settings for rendering. An example demonstrates rendering a phone number block with custom logic.
Joe Glombek discusses configuring custom backoffice block views in Umbraco using an extension. He provides an example of creating a hidden block indicator, detailing the registration of the extension and the creation of a custom element. The implementation allows for automatic display of a hidden state in block lists.
SlimConnect integrates SlimPim (Product Information Management) with Umbraco CMS
Niels Lyngsø discusses the Context API in Umbraco, illustrating how it facilitates seamless communication within the Backoffice UI. By using a restaurant metaphor, he explains Contexts as communication scopes for Extensions. The article provides examples of integrating logic and customizing workspaces, emphasizing the importance of scope in implementing functionality.
Joe Glombek discusses changes in the "read more" functionality in Umbraco versions 9-13, where descriptions below a horizontal rule no longer render as a "Read More" link. Instead, the native HTML `<details>` element can be used to recreate this feature, allowing for rich, intuitive property descriptions incorporating markdown and UUI web components.