Unable to make a custom section's tree in umbraco 14

[ssplyuvrajsingh]

Here is my umbraco-package.json file

{
  "$schema": "../../umbraco-package-schema.json",
  "name": "My Dashboard",
  "version": "0.1.0",
  "extensions": [
    
    {
      "type": "section",
      "alias": "Our.Umbraco.CURD.section",
      "name": "CURD",
      "element": "/App_Plugins/Client/CURD/CURD.js",
      "elementName": "curd-section-element",
      "meta": {
        "label": "CURD",
        "pathname": "CURD"
      }
    },
    {
      "type": "sectionSidebarApp",
      "kind": "menuWithEntityActions",
      "alias": "Our.Umbraco.FormX.sidebar",
      "name": "CURD Sidebar App",
      "meta": {
        "label": "CURD Sidebar",
        "pathname": "curd-sidebar"
      },
      "conditions": [
        {
          "alias": "Umb.Condition.SectionAlias",
          "match": "Our.Umbraco.CURD.section"
        }
      ]
    },
    {
      "type": "menu",
      "alias": "Our.Umbraco.FormX.menu",
      "name": "CURD Menu"
    },
    {
      "type": "menuItem",
      "alias": "curd-menu-items",
      "name": "CURD Menu Items",
      "element": "/App_Plugins/Client/menu/menu.js",
      "meta": {
        "label": "CURD menu item",
        "menus": [ "Our.Umbraco.FormX.menu" ]
      }
    }
  ]
}

Here is my ts file

import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { html, TemplateResult } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { FormXTreeItemResponseModel } from './models/FormXTreeItemResponseModel';


const elementName = 'curd-menu-items';

@customElement(elementName)
export class FormXMenuItems extends UmbLitElement  {
    @state()
    private _items: FormXTreeItemResponseModel[] = []; // Store fetched items
    @state()
    private _loading: boolean = true; // Track loading state
    @state()
    private _error: string | null = null; // Track any errors

    constructor() {
        super();
        this.fetchInitialItems(); // Start fetching on component load
    }

    // Fetch initial items
    async fetchInitialItems() {
        try {
            this._loading = true;
            const response = await fetch('/umbraco/api/get-list/children');
            if (response.ok)
            {
                var data = await response.json();
                this._items = data.items;
            }

            //this._items = ((await FormXTreeResource.getFormxApiV1Tree()).items); // Fetch root-level items
        } catch (e) {
            this._error = 'Error fetching items';
        } finally {
            this._loading = false;
        }
    }

    // Render items
    renderItems(items: FormXTreeItemResponseModel[]): TemplateResult {
        return html`
            ${items.map(element => html`
                <uui-menu-item label="${element.name}" ?has-children=${element.hasChildren}>
                ${element.type === 1
                ? html`<uui-icon slot="icon" name="icon-folder"></uui-icon>`
                : html`<uui-icon slot="icon" name="icon-autofill"></uui-icon>`}
                    ${element.hasChildren ? this.renderItems(element.children ?? []) : ''}
                </uui-menu-item>
            `)}
        `;
    }

    // Main render function
    render() {
        if (this._loading) {
            return html`<uui-loader></uui-loader>`;
        }

        if (this._error) {
            return html`<uui-menu-item active disabled label="Could not load form tree!">
        </uui-menu-item>`;
        }

        // Render items if loading is done and no error occurred
        return html`${this.renderItems(this._items)}`;
    }
}

No output

please provide me solution.

[nielslyngsoe]

Hi @ssplyuvrajsingh

For the extension of type "sectionSidebarApp" and of kind "menuWithEntityActions", you additionally need to declare the alias of the menu it should represent.

As you may see there is no connection between the sidebar and the menu, we need to make that.

You do so by adding "menu": "Our.Umbraco.FormX.menu" and a entityType in the meta object of your sectionSidebarApp manifest. Like this:

{
      "type": "sectionSidebarApp",
      "kind": "menuWithEntityActions",
      "alias": "Our.Umbraco.FormX.sidebar",
      "name": "CURD Sidebar App",
      "meta": {
        "label": "CURD Sidebar",
        "menu": "Our.Umbraco.FormX.menu",
        "entityType": "..... your unique name for your type..."
      },
      "conditions": [
        {
          "alias": "Umb.Condition.SectionAlias",
          "match": "Our.Umbraco.CURD.section"
        }
      ]
    },

The entityType has to be unique. it could be "formXEntryRoot" — this will be used to assign entity actions to it. If you dont want entity Actions, you can pick the kind "menu".

Also remember to export your element as element in menu.js. add this line in the bottom of the file: export {FormXMenuItems as element};

For questions like these, please ask them in the discord channel going forward.
https://discord.com/channels/869656431308189746/882984798719729704

Thanks, and good luck with your customizations :-)

[ssplyuvrajsingh]

@nielslyngsoe Thanks! for your reply

Now my umbraco-package.json looks like this

{
  "$schema": "../../umbraco-package-schema.json",
  "name": "My Dashboard",
  "version": "0.1.0",
  "extensions": [
    {
      "type": "dashboard",
      "alias": "My.Dashboard.MyExtension",
      "name": "My Dashboard",
      "element": "/App_Plugins/Client/MyElement/MyElement.js",
      "elementName": "my-element",
      "meta": {
        "label": "My Dashboard",
        "pathname": "my-dashboard"
      }
    },
    {
      "type": "section",
      "alias": "Our.Umbraco.mysection.section",
      "name": "My Section",
      "element": "/App_Plugins/Client/Employees/Employees.js",
      "elementName": "my-section-element",
      "meta": {
        "label": "My Section",
        "pathname": "my-section"
      }
    },
    {
      "type": "section",
      "alias": "Our.Umbraco.CURD.section",
      "name": "CURD",
      "element": "/App_Plugins/Client/CURD/CURD.js",
      "elementName": "curd-section-element",
      "meta": {
        "label": "CURD",
        "pathname": "CURD"
      }
    },
    {
      "type": "sectionSidebarApp",
      "kind": "menuWithEntityActions",
      "alias": "Our.Umbraco.FormX.sidebar",
      "name": "CURD Sidebar App",
      "meta": {
        "label": "CURD Sidebar",
        "menu": "Our.Umbraco.FormX.menu",
        "entityType": "formXEntryRoot"
      },
      "conditions": [
        {
          "alias": "Umb.Condition.SectionAlias",
          "match": "Our.Umbraco.CURD.section"
        }
      ]
    },
    {
      "type": "menu",
      "alias": "Our.Umbraco.FormX.menu",
      "name": "CURD Menu"
    },
    {
      "type": "menuItem",
      "alias": "curd-menu-items",
      "name": "CURD Menu Items",
      "element": "/App_Plugins/Client/menu/menu.js",
      "meta": {
        "label": "CURD menu item",
        "menus": [ "Our.Umbraco.FormX.menu" ]
      }
    }
  ]
}

Here is my menu.ts

import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { html, TemplateResult } from 'lit';
import { customElement, state } from 'lit/decorators.js';

export interface FormXTreeItemResponseModel {
    id: string;
    name: string;
    hasChildren: boolean;
    type: number;
    children?: FormXTreeItemResponseModel[];
}

const elementName = 'curd-menu-items';

@customElement(elementName)
class FormXMenuItems extends UmbLitElement {
    @state()
    private _items: FormXTreeItemResponseModel[] = []; // Store fetched items
    @state()
    private _loading: boolean = true; // Track loading state
    @state()
    private _error: string | null = null; // Track any errors

    constructor() {
        super();
        this.fetchInitialItems(); // Start fetching on component load
    }

    // Fetch initial items
    async fetchInitialItems() {
        try {
            this._loading = true;
            const response = await fetch('/umbraco/api/get-list/children');
            if (response.ok) {
                var data = await response.json();
                this._items = data.items;
            }

            //this._items = ((await FormXTreeResource.getFormxApiV1Tree()).items); // Fetch root-level items
        } catch (e) {
            this._error = 'Error fetching items';
        } finally {
            this._loading = false;
        }
    }

    // Render items
    renderItems(items: FormXTreeItemResponseModel[]): TemplateResult {
        return html`
            ${items.map(element => html`
                <uui-menu-item label="${element.name}" ?has-children=${element.hasChildren}>
                ${element.type === 1
                ? html`<uui-icon slot="icon" name="icon-folder"></uui-icon>`
                : html`<uui-icon slot="icon" name="icon-autofill"></uui-icon>`}
                    ${element.hasChildren ? this.renderItems(element.children ?? []) : ''}
                </uui-menu-item>
            `)}
        `;
    }

    // Main render function
    render() {
        if (this._loading) {
            return html`<uui-loader></uui-loader>`;
        }

        if (this._error) {
            return html`<uui-menu-item active disabled label="Could not load form tree!">
        </uui-menu-item>`;
        }

        // Render items if loading is done and no error occurred
        return html`${this.renderItems(this._items)}`;

    }
}
export { FormXMenuItems as element }

But still menus not showing