Umbraco Package View

What is it?

Package Views provide custom UI panels for installed packages in Umbraco. They appear in the Packages section and allow package developers to create dedicated configuration or information pages for their packages. When a user clicks on an installed package, the package view is displayed as a modal or panel.

Documentation

Always fetch the latest docs before implementing:

Foundation

:

https://docs.umbraco.com/umbraco-cms/customizing/foundation

Extension Registry

:

https://docs.umbraco.com/umbraco-cms/customizing/extending-overview/extension-registry

Umbraco Element

:

https://docs.umbraco.com/umbraco-cms/customizing/foundation/umbraco-element

Related Foundation Skills

Umbraco Element

Base class for creating UI components

Reference skill:

umbraco-umbraco-element

Modals

Package views are displayed in modal context Reference skill: umbraco-modals Workflow Fetch docs - Use WebFetch on the URLs above Ask questions - What package? What configuration options? Generate files - Create manifest + element based on latest docs Explain - Show what was created and how to test Minimal Examples Manifest (manifests.ts) import type { ManifestPackageView } from '@umbraco-cms/backoffice/packages' ; export const manifests : Array < ManifestPackageView

= [ { type : 'packageView' , alias : 'My.PackageView' , name : 'My Package View' , element : ( ) => import ( './my-package-view.element.js' ) , meta : { packageName : 'My Package' , } , } , ] ; Element Implementation with Lit (my-package-view.element.ts) import { html , customElement } from '@umbraco-cms/backoffice/external/lit' ; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element' ; import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal' ; @ customElement ( 'my-package-view' ) export class MyPackageViewElement extends UmbModalBaseElement { override render ( ) { return html `

Package Configuration

Configure your package settings here.

Setting 1

` ; }

onClose

( ) { this . modalContext ?. reject ( ) ; }

onSave

( ) { // Save logic here this . modalContext ?. submit ( ) ; } } export default MyPackageViewElement ; Vanilla JS Element (my-package-view.js) const template = document . createElement ( 'template' ) ; template . innerHTML = ` < umb-body-layout

< h1 slot = " header "

My Package </ h1

< uui-box

< p

Package information and settings </ p

</ uui-box

< uui-action-bar slot = " footer-info "

< uui-button look = " primary " type = " button "

Close </ uui-button

</ uui-action-bar

</ umb-body-layout

` ; export default class MyPackageViewElement extends HTMLElement { constructor ( ) { super ( ) ; this . attachShadow ( { mode : 'open' } ) ; this . shadowRoot . appendChild ( template . content . cloneNode ( true ) ) ; this . shadowRoot . querySelector ( 'uui-button' ) . addEventListener ( 'click' , this . onClick . bind ( this ) ) ; } onClick ( ) { this . modalContext . close ( ) ; } } customElements . define ( 'my-package-view' , MyPackageViewElement ) ; Interface Reference interface ManifestPackageView extends ManifestElement { type : 'packageView' ; meta : MetaPackageView ; } interface MetaPackageView { packageName : string ; // Must match the package name in umbraco-package.json } Package Integration The package view is linked by matching meta.packageName with your package's name in umbraco-package.json : { "$schema" : "../../umbraco-package-schema.json" , "name" : "My Package" , "version" : "1.0.0" , "extensions" : [ { "type" : "packageView" , "alias" : "My.PackageView" , "name" : "My Package View" , "element" : "/App_Plugins/MyPackage/my-package-view.js" , "meta" : { "packageName" : "My Package" } } ] } That's it! Always fetch fresh docs, keep examples minimal, generate complete working code.