Skip to content

Commit bb44b50

Browse files
sofietoftsofietoft
authored
Merge pull request #6603 from Yinzy00/feature/add-sectionview-docs-new
Sectionview: fixed existing example + added extra examples
2 parents e975476 + a2cf5f6 commit bb44b50

File tree

3 files changed

+309
-12
lines changed

3 files changed

+309
-12
lines changed

‎14/umbraco-cms/customizing/extending-overview/extension-types/section-view.md

Lines changed: 103 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,17 +12,116 @@ This page is a work in progress and may undergo further revisions, updates, or a
1212

1313
<figure><img src="../../../.gitbook/assets/section-views.svg" alt=""><figcaption><p>Section View</p></figcaption></figure>
1414

15-
**Manifest**
15+
## Creating a custom Section View
16+
17+
In this section, you can learn how to register and create a custom Section View for the Umbraco backoffice.
18+
19+
### Manifest
20+
21+
The manifest file can be created using either JSON or Typescript. Both methods are shown below.
22+
23+
{% tabs %}
24+
25+
{% tab title="Json" %}
26+
27+
We can create the manifest using json in the `umbraco-package.json`.
1628

1729
```json
1830
{
1931
"type": "sectionView",
2032
"alias": "My.SectionView",
2133
"name": "My Section View",
34+
"element": "./my-section.element.js",
2235
"meta": {
23-
"sections": ["My.Section"],
2436
"label": "My View",
25-
"pathname": "/my-view"
26-
}
37+
"icon": "icon-add",
38+
"pathname": "my-view"
39+
},
40+
"conditions": [
41+
{
42+
"alias": "Umb.Condition.SectionAlias",
43+
"match": "My.Section",
44+
}
45+
]
2746
}
2847
```
48+
49+
{% endtab %}
50+
51+
{% tab title="Typescript" %}
52+
53+
54+
The manifest can also be written in TypeScript.
55+
56+
For this typescript example we used a [Backoffice Entry Point](../../extending-overview/extension-types/backoffice-entry-point) extension to register the manifests.
57+
58+
```typescript
59+
import { ManifestSectionView } from "@umbraco-cms/backoffice/extension-registry";
60+
61+
const sectionViews: Array<ManifestSectionView> = [
62+
{
63+
type: "sectionView",
64+
alias: "My.SectionView",
65+
name: "My Section View",
66+
element: () => import('./my-section.element.ts'),
67+
meta: {
68+
label: "My View",
69+
icon: "icon-add",
70+
pathname: "my-view",
71+
},
72+
conditions: [
73+
{
74+
alias: 'Umb.Condition.SectionAlias',
75+
match: 'My.Section',
76+
}
77+
]
78+
}
79+
]
80+
```
81+
82+
{% endtab %}
83+
84+
{% endtabs %}
85+
86+
87+
### Lit Element
88+
89+
Creating the Section View Element using a Lit Element.
90+
91+
92+
**my-section.element.ts:**
93+
```typescript
94+
import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
95+
import { css, html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
96+
97+
@customElement('my-sectionview-element')
98+
export class MySectionViewElement extends UmbLitElement {
99+
100+
render() {
101+
return html`
102+
<uui-box headline="Sectionview Title goes here">
103+
Sectionview content goes here
104+
</uui-box>
105+
`
106+
}
107+
108+
static override styles = [
109+
css`
110+
:host {
111+
display: block;
112+
padding: 20px;
113+
}
114+
`,
115+
];
116+
117+
}
118+
119+
export default MySectionViewElement;
120+
121+
declare global {
122+
interface HTMLElementTagNameMap {
123+
'my-sectionview-element': MySectionViewElement;
124+
}
125+
}
126+
127+
```

‎15/umbraco-cms/customizing/extending-overview/extension-types/section-view.md

Lines changed: 103 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,17 +12,116 @@ This page is a work in progress and may undergo further revisions, updates, or a
1212

1313
<figure><img src="../../../.gitbook/assets/section-views.svg" alt=""><figcaption><p>Section View</p></figcaption></figure>
1414

15-
**Manifest**
15+
## Creating a custom Section View
16+
17+
In this section, you can learn how to register and create a custom Section View for the Umbraco backoffice.
18+
19+
### Manifest
20+
21+
The manifest file can be created using either JSON or Typescript. Both methods are shown below.
22+
23+
{% tabs %}
24+
25+
{% tab title="Json" %}
26+
27+
We can create the manifest using json in the `umbraco-package.json`.
1628

1729
```json
1830
{
1931
"type": "sectionView",
2032
"alias": "My.SectionView",
2133
"name": "My Section View",
34+
"element": "./my-section.element.js",
2235
"meta": {
23-
"sections": ["My.Section"],
2436
"label": "My View",
25-
"pathname": "/my-view"
26-
}
37+
"icon": "icon-add",
38+
"pathname": "my-view"
39+
},
40+
"conditions": [
41+
{
42+
"alias": "Umb.Condition.SectionAlias",
43+
"match": "My.Section",
44+
}
45+
]
2746
}
2847
```
48+
49+
{% endtab %}
50+
51+
{% tab title="Typescript" %}
52+
53+
54+
The manifest can also be written in TypeScript.
55+
56+
For this typescript example we used a [Backoffice Entry Point](../../extending-overview/extension-types/backoffice-entry-point) extension to register the manifests.
57+
58+
```typescript
59+
import { ManifestSectionView } from "@umbraco-cms/backoffice/extension-registry";
60+
61+
const sectionViews: Array<ManifestSectionView> = [
62+
{
63+
type: "sectionView",
64+
alias: "My.SectionView",
65+
name: "My Section View",
66+
element: () => import('./my-section.element.ts'),
67+
meta: {
68+
label: "My View",
69+
icon: "icon-add",
70+
pathname: "my-view",
71+
},
72+
conditions: [
73+
{
74+
alias: 'Umb.Condition.SectionAlias',
75+
match: 'My.Section',
76+
}
77+
]
78+
}
79+
]
80+
```
81+
82+
{% endtab %}
83+
84+
{% endtabs %}
85+
86+
87+
### Lit Element
88+
89+
Creating the Section View Element using a Lit Element.
90+
91+
92+
**my-section.element.ts:**
93+
```typescript
94+
import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
95+
import { css, html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
96+
97+
@customElement('my-sectionview-element')
98+
export class MySectionViewElement extends UmbLitElement {
99+
100+
render() {
101+
return html`
102+
<uui-box headline="Sectionview Title goes here">
103+
Sectionview content goes here
104+
</uui-box>
105+
`
106+
}
107+
108+
static override styles = [
109+
css`
110+
:host {
111+
display: block;
112+
padding: 20px;
113+
}
114+
`,
115+
];
116+
117+
}
118+
119+
export default MySectionViewElement;
120+
121+
declare global {
122+
interface HTMLElementTagNameMap {
123+
'my-sectionview-element': MySectionViewElement;
124+
}
125+
}
126+
127+
```

‎15/umbraco-cms/customizing/section-trees/sections/section-view.md

Lines changed: 103 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,17 +12,116 @@ This page is a work in progress and may undergo further revisions, updates, or a
1212

1313
<figure><img src="../../../.gitbook/assets/section-views.svg" alt=""><figcaption><p>Section View</p></figcaption></figure>
1414

15-
**Manifest**
15+
## Creating a custom Section View
16+
17+
In this section, you can learn how to register and create a custom Section View for the Umbraco backoffice.
18+
19+
### Manifest
20+
21+
The manifest file can be created using either JSON or Typescript. Both methods are shown below.
22+
23+
{% tabs %}
24+
25+
{% tab title="Json" %}
26+
27+
We can create the manifest using json in the `umbraco-package.json`.
1628

1729
```json
1830
{
1931
"type": "sectionView",
2032
"alias": "My.SectionView",
2133
"name": "My Section View",
34+
"element": "./my-section.element.js",
2235
"meta": {
23-
"sections": ["My.Section"],
2436
"label": "My View",
25-
"pathname": "/my-view"
26-
}
37+
"icon": "icon-add",
38+
"pathname": "my-view"
39+
},
40+
"conditions": [
41+
{
42+
"alias": "Umb.Condition.SectionAlias",
43+
"match": "My.Section",
44+
}
45+
]
2746
}
2847
```
48+
49+
{% endtab %}
50+
51+
{% tab title="Typescript" %}
52+
53+
54+
The manifest can also be written in TypeScript.
55+
56+
For this typescript example we used a [Backoffice Entry Point](../../extending-overview/extension-types/backoffice-entry-point) extension to register the manifests.
57+
58+
```typescript
59+
import { ManifestSectionView } from "@umbraco-cms/backoffice/extension-registry";
60+
61+
const sectionViews: Array<ManifestSectionView> = [
62+
{
63+
type: "sectionView",
64+
alias: "My.SectionView",
65+
name: "My Section View",
66+
element: () => import('./my-section.element.ts'),
67+
meta: {
68+
label: "My View",
69+
icon: "icon-add",
70+
pathname: "my-view",
71+
},
72+
conditions: [
73+
{
74+
alias: 'Umb.Condition.SectionAlias',
75+
match: 'My.Section',
76+
}
77+
]
78+
}
79+
]
80+
```
81+
82+
{% endtab %}
83+
84+
{% endtabs %}
85+
86+
87+
### Lit Element
88+
89+
Creating the Section View Element using a Lit Element.
90+
91+
92+
**my-section.element.ts:**
93+
```typescript
94+
import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
95+
import { css, html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
96+
97+
@customElement('my-sectionview-element')
98+
export class MySectionViewElement extends UmbLitElement {
99+
100+
render() {
101+
return html`
102+
<uui-box headline="Sectionview Title goes here">
103+
Sectionview content goes here
104+
</uui-box>
105+
`
106+
}
107+
108+
static override styles = [
109+
css`
110+
:host {
111+
display: block;
112+
padding: 20px;
113+
}
114+
`,
115+
];
116+
117+
}
118+
119+
export default MySectionViewElement;
120+
121+
declare global {
122+
interface HTMLElementTagNameMap {
123+
'my-sectionview-element': MySectionViewElement;
124+
}
125+
}
126+
127+
```

0 commit comments

Comments
 (0)