Skip to content

Sectionview: fixed existing example + added extra examples #6603

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 30, 2024
Merged

Sectionview: fixed existing example + added extra examples #6603

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
107 changes: 103 additions & 4 deletions 14/umbraco-cms/customizing/extending-overview/extension-types/section-view.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,17 +12,116 @@

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

**Manifest**
## 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

The manifest file can be created using either JSON or Typescript. Both methods are shown below.

Check warning on line 21 in 14/umbraco-cms/customizing/extending-overview/extension-types/section-view.md

View workflow job for this annotation

GitHub Actions / runner / vale 

[vale] reported by reviewdog 🐶
[UmbracoDocs.Names] We prefer TypeScript over 'Typescript'

Raw Output:
{"message": "[UmbracoDocs.Names] We prefer TypeScript over 'Typescript'", "location": {"path": "14/umbraco-cms/customizing/extending-overview/extension-types/section-view.md", "range": {"start": {"line": 21, "column": 55}}}, "severity": "WARNING"}

{% tabs %}

{% tab title="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",
}
]
}
```

{% endtab %}

{% tab title="Typescript" %}

Check warning on line 51 in 14/umbraco-cms/customizing/extending-overview/extension-types/section-view.md

View workflow job for this annotation

GitHub Actions / runner / vale 

[vale] reported by reviewdog 🐶
[UmbracoDocs.Names] We prefer TypeScript over 'Typescript'

Raw Output:
{"message": "[UmbracoDocs.Names] We prefer TypeScript over 'Typescript'", "location": {"path": "14/umbraco-cms/customizing/extending-overview/extension-types/section-view.md", "range": {"start": {"line": 51, "column": 15}}}, "severity": "WARNING"}


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.

Check warning on line 56 in 14/umbraco-cms/customizing/extending-overview/extension-types/section-view.md

View workflow job for this annotation

GitHub Actions / runner / vale 

[vale] reported by reviewdog 🐶
[UmbracoDocs.Names] We prefer TypeScript over 'typescript'

Raw Output:
{"message": "[UmbracoDocs.Names] We prefer TypeScript over 'typescript'", "location": {"path": "14/umbraco-cms/customizing/extending-overview/extension-types/section-view.md", "range": {"start": {"line": 56, "column": 10}}}, "severity": "WARNING"}

```typescript
import { ManifestSectionView } from "@umbraco-cms/backoffice/extension-registry";

const sectionViews: Array<ManifestSectionView> = [
{
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',
}
]
}
]
```

{% endtab %}

{% endtabs %}


### 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`
<uui-box headline="Sectionview Title goes here">
Sectionview content goes here
</uui-box>
`
}

static override styles = [
css`
:host {
display: block;
padding: 20px;
}
`,
];

}

export default MySectionViewElement;

declare global {
interface HTMLElementTagNameMap {
'my-sectionview-element': MySectionViewElement;
}
}

```
107 changes: 103 additions & 4 deletions 15/umbraco-cms/customizing/extending-overview/extension-types/section-view.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,17 +12,116 @@

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

**Manifest**
## 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

The manifest file can be created using either JSON or Typescript. Both methods are shown below.

Check warning on line 21 in 15/umbraco-cms/customizing/extending-overview/extension-types/section-view.md

View workflow job for this annotation

GitHub Actions / runner / vale 

[vale] reported by reviewdog 🐶
[UmbracoDocs.Names] We prefer TypeScript over 'Typescript'

Raw Output:
{"message": "[UmbracoDocs.Names] We prefer TypeScript over 'Typescript'", "location": {"path": "15/umbraco-cms/customizing/extending-overview/extension-types/section-view.md", "range": {"start": {"line": 21, "column": 55}}}, "severity": "WARNING"}

{% tabs %}

{% tab title="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",
}
]
}
```

{% endtab %}

{% tab title="Typescript" %}

Check warning on line 51 in 15/umbraco-cms/customizing/extending-overview/extension-types/section-view.md

View workflow job for this annotation

GitHub Actions / runner / vale 

[vale] reported by reviewdog 🐶
[UmbracoDocs.Names] We prefer TypeScript over 'Typescript'

Raw Output:
{"message": "[UmbracoDocs.Names] We prefer TypeScript over 'Typescript'", "location": {"path": "15/umbraco-cms/customizing/extending-overview/extension-types/section-view.md", "range": {"start": {"line": 51, "column": 15}}}, "severity": "WARNING"}


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.

Check warning on line 56 in 15/umbraco-cms/customizing/extending-overview/extension-types/section-view.md

View workflow job for this annotation

GitHub Actions / runner / vale 

[vale] reported by reviewdog 🐶
[UmbracoDocs.Names] We prefer TypeScript over 'typescript'

Raw Output:
{"message": "[UmbracoDocs.Names] We prefer TypeScript over 'typescript'", "location": {"path": "15/umbraco-cms/customizing/extending-overview/extension-types/section-view.md", "range": {"start": {"line": 56, "column": 10}}}, "severity": "WARNING"}

```typescript
import { ManifestSectionView } from "@umbraco-cms/backoffice/extension-registry";

const sectionViews: Array<ManifestSectionView> = [
{
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',
}
]
}
]
```

{% endtab %}

{% endtabs %}


### 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`
<uui-box headline="Sectionview Title goes here">
Sectionview content goes here
</uui-box>
`
}

static override styles = [
css`
:host {
display: block;
padding: 20px;
}
`,
];

}

export default MySectionViewElement;

declare global {
interface HTMLElementTagNameMap {
'my-sectionview-element': MySectionViewElement;
}
}

```
107 changes: 103 additions & 4 deletions 15/umbraco-cms/customizing/section-trees/sections/section-view.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,17 +12,116 @@

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

**Manifest**
## 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

The manifest file can be created using either JSON or Typescript. Both methods are shown below.

Check warning on line 21 in 15/umbraco-cms/customizing/section-trees/sections/section-view.md

View workflow job for this annotation

GitHub Actions / runner / vale 

[vale] reported by reviewdog 🐶
[UmbracoDocs.Names] We prefer TypeScript over 'Typescript'

Raw Output:
{"message": "[UmbracoDocs.Names] We prefer TypeScript over 'Typescript'", "location": {"path": "15/umbraco-cms/customizing/section-trees/sections/section-view.md", "range": {"start": {"line": 21, "column": 55}}}, "severity": "WARNING"}

{% tabs %}

{% tab title="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",
}
]
}
```

{% endtab %}

{% tab title="Typescript" %}

Check warning on line 51 in 15/umbraco-cms/customizing/section-trees/sections/section-view.md

View workflow job for this annotation

GitHub Actions / runner / vale 

[vale] reported by reviewdog 🐶
[UmbracoDocs.Names] We prefer TypeScript over 'Typescript'

Raw Output:
{"message": "[UmbracoDocs.Names] We prefer TypeScript over 'Typescript'", "location": {"path": "15/umbraco-cms/customizing/section-trees/sections/section-view.md", "range": {"start": {"line": 51, "column": 15}}}, "severity": "WARNING"}


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.

Check warning on line 56 in 15/umbraco-cms/customizing/section-trees/sections/section-view.md

View workflow job for this annotation

GitHub Actions / runner / vale 

[vale] reported by reviewdog 🐶
[UmbracoDocs.Names] We prefer TypeScript over 'typescript'

Raw Output:
{"message": "[UmbracoDocs.Names] We prefer TypeScript over 'typescript'", "location": {"path": "15/umbraco-cms/customizing/section-trees/sections/section-view.md", "range": {"start": {"line": 56, "column": 10}}}, "severity": "WARNING"}

```typescript
import { ManifestSectionView } from "@umbraco-cms/backoffice/extension-registry";

const sectionViews: Array<ManifestSectionView> = [
{
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',
}
]
}
]
```

{% endtab %}

{% endtabs %}


### 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`
<uui-box headline="Sectionview Title goes here">
Sectionview content goes here
</uui-box>
`
}

static override styles = [
css`
:host {
display: block;
padding: 20px;
}
`,
];

}

export default MySectionViewElement;

declare global {
interface HTMLElementTagNameMap {
'my-sectionview-element': MySectionViewElement;
}
}

```
Loading