DEV Community

Kevin Jump
Kevin Jump

Posted on

uSync to v14 - part 2/n

27/09/2023 - again

OK - so you come right back to something and find the thing you were looking for, right in the place where you looked.

The Umbraco Storybook, has examples for sections, menus and all that jazz.

https://apidocs.umbraco.com/v14/ui/?path=/docs/guides-extending-the-backoffice-sections-intro--docs

But i think Its a little out of date ? - because it mentions sections as lot in the "meta" section of the config, and they now live in "conditions"

So, with a combination of the storybook, and looking in the code, (and another 2-minute typo in a property name 🤦)

I have the following to show a menu item.

Sidebar App

To make the title appear in the settings menu :

A Sidebar Section

{
  "type": "sectionSidebarApp",
  "kind": "menu",
  "alias": "uSync.SidebarMenu",
  "name": "uSync SidebarMenu",
  "weight": 500,
  "meta": {
    "label": "Syncronization",
    "menu": "uSync.Menu"
  },
  "conditions": [
    {
      "alias": "Umb.Condition.SectionAlias",
      "match": "Umb.Section.Settings"
    }
  ]
},
Enter fullscreen mode Exit fullscreen mode

Menu

the thing we can put items in.

{
  "type": "menu",
  "alias": "uSync.Menu",
  "name": "uSync Menu",
  "meta": {
    "label": "uSync"
  }
},
Enter fullscreen mode Exit fullscreen mode

Menu item

thing shown in the tree.

A sidebar menu

 {
   "type": "menuItem",
   "alias": "uSync.Menu.Dashboard",
   "name": "uSync Dashboard Item",
   "weight": 300,
   "meta": {
     "label": "uSync",
     "icon": "umb:infinity",
     "entityType": "usync-dashboard",
     "menus": [ "uSync.Menu" ]
   }
 },
Enter fullscreen mode Exit fullscreen mode

Next the 'view'

So, this has the menu, not 100% sure how to get something on the right-hand side in the view. This is workspaces. So that's where i am going to look.


Ha, a lucky guess. (because the core is using loader : () => - in the umbraco-package.json its just like a dashboard.

{
  "type": "workspace",
  "alias": "uSync.Workspace",
  "name": "uSync Workspace",
  "js": "/App_Plugins/uSync/usync.js",
  "meta": {
    "label": "uSync View",
    "entityType": "usync-dashboard"
  }
}
Enter fullscreen mode Exit fullscreen mode

A loaded 'workspace'

formatting and all that to come...

_throughout this bit of the process i am looking at how the Log Viewer has been built into the tree, i figured its fairly simple (one page) and its not a core type (datatype,doctype,etc) so its going to be very similar to how to get something non-custom into the back office. _

https://github.com/umbraco/Umbraco.CMS.Backoffice/blob/main/src/packages/log-viewer/workspace/logviewer/

but i am now looking at the workspace and it seems quite funky, so when i come back to this, i might try find an even simpler example ? like "Languages" or even "Extensions".

Top comments (0)