From e53cd758f150658f99c52a61fa65399513d51c80 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yari=20Mari=C3=ABn?= Date: Tue, 24 Sep 2024 20:04:47 +0200 Subject: [PATCH 1/6] Sectionview: updated manifest json example + added typescript + element example --- .../section-trees/sections/section-view.md | 91 ++++++++++++++++++- 1 file changed, 87 insertions(+), 4 deletions(-) diff --git a/14/umbraco-cms/customizing/section-trees/sections/section-view.md b/14/umbraco-cms/customizing/section-trees/sections/section-view.md index d8f37c9a624..fcb3e3a3882 100644 --- a/14/umbraco-cms/customizing/section-trees/sections/section-view.md +++ b/14/umbraco-cms/customizing/section-trees/sections/section-view.md @@ -12,17 +12,100 @@ This page is a work in progress and may undergo further revisions, updates, or a

Section View

-**Manifest** +## Creating a custom Section View + +### Manifest + +**Using Json** + +We can create the manifest using json in the `umbraco-package.json`. ```json { "type": "sectionView", "alias": "My.SectionView", "name": "My Section View", + "element": "./my-section.element.js", "meta": { - "sections": ["My.Section"], "label": "My View", - "pathname": "/my-view" - } + "icon": "icon-add", + "pathname": "my-view" + }, + "conditions": [ + { + "alias": "Umb.Condition.SectionAlias", + "match": "My.Section", + } + ] } ``` + +**Using TypeScript** + +The manifest can also be written in TypeScript. + +```typescript +import { ManifestSectionView } from "@umbraco-cms/backoffice/extension-registry"; + +const sectionViews: Array = [ + { + type: "sectionView", + alias: "My.SectionView", + name: "My Section View", + element: () => import('./my-section.element.ts'), + meta: { + label: "My View", + icon: "icon-add" + pathname: "my-view", + }, + conditions: [ + { + alias: 'Umb.Condition.SectionAlias', + match: 'My.Section', + } + ] + } +] +``` + +### Lit Element + +Creating the Section View Element using a Lit Element. + + +**my-section.element.ts:** +```typescript +import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element"; +import { css, html, customElement, property } from '@umbraco-cms/backoffice/external/lit'; + +@customElement('my-sectionview-element') +export class MySectionViewElement extends UmbLitElement { + + render() { + return html` + + Sectionview content goes here + + ` + } + + static override styles = [ + css` + :host { + display: block; + padding: 20px; + } + `, + ]; + +} + +export default MySectionViewElement; + +declare global { + interface HTMLElementTagNameMap { + 'my-sectionview-element': MySectionViewElement; + } +} + +``` \ No newline at end of file From 5523db290d03f7bcc6931b5bdb83f3add354f874 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yari=20Mari=C3=ABn?= Date: Tue, 24 Sep 2024 20:07:38 +0200 Subject: [PATCH 2/6] Sectionview: V15, updated manifest json example + added typescript + element example --- .../section-trees/sections/section-view.md | 91 ++++++++++++++++++- 1 file changed, 87 insertions(+), 4 deletions(-) diff --git a/15/umbraco-cms/customizing/section-trees/sections/section-view.md b/15/umbraco-cms/customizing/section-trees/sections/section-view.md index d8f37c9a624..fcb3e3a3882 100644 --- a/15/umbraco-cms/customizing/section-trees/sections/section-view.md +++ b/15/umbraco-cms/customizing/section-trees/sections/section-view.md @@ -12,17 +12,100 @@ This page is a work in progress and may undergo further revisions, updates, or a

Section View

-**Manifest** +## Creating a custom Section View + +### Manifest + +**Using Json** + +We can create the manifest using json in the `umbraco-package.json`. ```json { "type": "sectionView", "alias": "My.SectionView", "name": "My Section View", + "element": "./my-section.element.js", "meta": { - "sections": ["My.Section"], "label": "My View", - "pathname": "/my-view" - } + "icon": "icon-add", + "pathname": "my-view" + }, + "conditions": [ + { + "alias": "Umb.Condition.SectionAlias", + "match": "My.Section", + } + ] } ``` + +**Using TypeScript** + +The manifest can also be written in TypeScript. + +```typescript +import { ManifestSectionView } from "@umbraco-cms/backoffice/extension-registry"; + +const sectionViews: Array = [ + { + type: "sectionView", + alias: "My.SectionView", + name: "My Section View", + element: () => import('./my-section.element.ts'), + meta: { + label: "My View", + icon: "icon-add" + pathname: "my-view", + }, + conditions: [ + { + alias: 'Umb.Condition.SectionAlias', + match: 'My.Section', + } + ] + } +] +``` + +### Lit Element + +Creating the Section View Element using a Lit Element. + + +**my-section.element.ts:** +```typescript +import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element"; +import { css, html, customElement, property } from '@umbraco-cms/backoffice/external/lit'; + +@customElement('my-sectionview-element') +export class MySectionViewElement extends UmbLitElement { + + render() { + return html` + + Sectionview content goes here + + ` + } + + static override styles = [ + css` + :host { + display: block; + padding: 20px; + } + `, + ]; + +} + +export default MySectionViewElement; + +declare global { + interface HTMLElementTagNameMap { + 'my-sectionview-element': MySectionViewElement; + } +} + +``` \ No newline at end of file From df9cf7ef8e96f318bd14b7c7473413cb95e42e04 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yari=20Mari=C3=ABn?= <75362020+Yinzy00@users.noreply.github.com> Date: Tue, 1 Oct 2024 14:50:59 +0200 Subject: [PATCH 3/6] SectionView: added missing comma in manifest --- .../customizing/section-trees/sections/section-view.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/14/umbraco-cms/customizing/section-trees/sections/section-view.md b/14/umbraco-cms/customizing/section-trees/sections/section-view.md index fcb3e3a3882..799c21f8c86 100644 --- a/14/umbraco-cms/customizing/section-trees/sections/section-view.md +++ b/14/umbraco-cms/customizing/section-trees/sections/section-view.md @@ -55,7 +55,7 @@ const sectionViews: Array = [ element: () => import('./my-section.element.ts'), meta: { label: "My View", - icon: "icon-add" + icon: "icon-add", pathname: "my-view", }, conditions: [ @@ -108,4 +108,4 @@ declare global { } } -``` \ No newline at end of file +``` From ecfb84a166484b1a0c5f1eb9fed4fad3b16d1ee3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yari=20Mari=C3=ABn?= Date: Fri, 4 Oct 2024 21:11:07 +0200 Subject: [PATCH 4/6] Sectionview: added more project context about the ecample to make it more clear --- .../section-trees/sections/section-view.md | 47 +++++++++++++++++++ 1 file changed, 47 insertions(+) diff --git a/14/umbraco-cms/customizing/section-trees/sections/section-view.md b/14/umbraco-cms/customizing/section-trees/sections/section-view.md index 799c21f8c86..6c0ffec420b 100644 --- a/14/umbraco-cms/customizing/section-trees/sections/section-view.md +++ b/14/umbraco-cms/customizing/section-trees/sections/section-view.md @@ -68,6 +68,53 @@ const sectionViews: Array = [ ] ``` +For this typescript example we used a entrypoint extension to load the assets.js file. + +We also setup our vite build to output the assets.js file in the `app_plugins/Our.Umbraco.Example` folder. + +The `umbraco-package.json` then would look like this: + +```JSON +{ + "$schema": "../umbraco-package-schema.json", + "name": "Our.Umbraco.Example", + "id": "Our.Umbraco.Example", + "version": "0.1.0", + "allowTelemetry": true, + "extensions": [ + { + "name": "Our.Umbraco.Example.entrypoint", + "alias": "Our.Umbraco.Example.EntryPoint", + "type": "entryPoint", + "js": "/app_plugins/Our.Umbraco.Example/assets.js" + } + ] +} +``` + +Then we just have to register all the manifests on `onInit` using `extensionRegistry.registerMany()` in our entry file. + +So then our `index.ts` file would look like this: + +```typescript +//Import all the manifests here + +const manifests: Array = [ + ...dashboardManifests, + ...menuManifests, + // Manifests for section views + ...sectionManifests, + //... +]; + +export const onInit: UmbEntryPointOnInit = (_host, extensionRegistry) => { + + // register them here. + extensionRegistry.registerMany(manifests); +}; + +``` + ### Lit Element Creating the Section View Element using a Lit Element. From e77041ce621607fb9b218f3fe77fb3b04dc8ee5c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yari=20Mari=C3=ABn?= Date: Mon, 7 Oct 2024 19:19:52 +0200 Subject: [PATCH 5/6] Sectionview: removed missplaced info and added link to entrypoint docs --- .../section-trees/sections/section-view.md | 48 +------------------ 1 file changed, 2 insertions(+), 46 deletions(-) diff --git a/14/umbraco-cms/customizing/section-trees/sections/section-view.md b/14/umbraco-cms/customizing/section-trees/sections/section-view.md index 6c0ffec420b..acee86bbc38 100644 --- a/14/umbraco-cms/customizing/section-trees/sections/section-view.md +++ b/14/umbraco-cms/customizing/section-trees/sections/section-view.md @@ -44,6 +44,8 @@ We can create the manifest using json in the `umbraco-package.json`. The manifest can also be written in TypeScript. +For this typescript example we used a [Backoffice Entry Point](../../extending-overview/extension-types/backoffice-entry-point) extension to register the manifests. + ```typescript import { ManifestSectionView } from "@umbraco-cms/backoffice/extension-registry"; @@ -68,52 +70,6 @@ const sectionViews: Array = [ ] ``` -For this typescript example we used a entrypoint extension to load the assets.js file. - -We also setup our vite build to output the assets.js file in the `app_plugins/Our.Umbraco.Example` folder. - -The `umbraco-package.json` then would look like this: - -```JSON -{ - "$schema": "../umbraco-package-schema.json", - "name": "Our.Umbraco.Example", - "id": "Our.Umbraco.Example", - "version": "0.1.0", - "allowTelemetry": true, - "extensions": [ - { - "name": "Our.Umbraco.Example.entrypoint", - "alias": "Our.Umbraco.Example.EntryPoint", - "type": "entryPoint", - "js": "/app_plugins/Our.Umbraco.Example/assets.js" - } - ] -} -``` - -Then we just have to register all the manifests on `onInit` using `extensionRegistry.registerMany()` in our entry file. - -So then our `index.ts` file would look like this: - -```typescript -//Import all the manifests here - -const manifests: Array = [ - ...dashboardManifests, - ...menuManifests, - // Manifests for section views - ...sectionManifests, - //... -]; - -export const onInit: UmbEntryPointOnInit = (_host, extensionRegistry) => { - - // register them here. - extensionRegistry.registerMany(manifests); -}; - -``` ### Lit Element From 4f5c67aa61fee8b1382cfb55a35f8b33ee258840 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yari=20Mari=C3=ABn?= Date: Wed, 9 Oct 2024 20:51:51 +0200 Subject: [PATCH 6/6] Sectionview: added more context + moved json & typescript manifest examples to tabs --- .../section-trees/sections/section-view.md | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/14/umbraco-cms/customizing/section-trees/sections/section-view.md b/14/umbraco-cms/customizing/section-trees/sections/section-view.md index acee86bbc38..3b1d0d1ff90 100644 --- a/14/umbraco-cms/customizing/section-trees/sections/section-view.md +++ b/14/umbraco-cms/customizing/section-trees/sections/section-view.md @@ -14,9 +14,15 @@ This page is a work in progress and may undergo further revisions, updates, or a ## Creating a custom Section View +In this section, you can learn how to register and create a custom Section View for the Umbraco backoffice. + ### Manifest -**Using Json** +The manifest file can be created using either JSON or Typescript. Both methods are shown below. + +{% tabs %} + +{% tab title="Json" %} We can create the manifest using json in the `umbraco-package.json`. @@ -40,7 +46,10 @@ We can create the manifest using json in the `umbraco-package.json`. } ``` -**Using TypeScript** +{% endtab %} + +{% tab title="Typescript" %} + The manifest can also be written in TypeScript. @@ -70,6 +79,10 @@ const sectionViews: Array = [ ] ``` + {% endtab %} + +{% endtabs %} + ### Lit Element