uSync to v14 - part 2/n

27/09/2023 - again

• Master blog for all the entries
• Github Commit for this post

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 :

{
  "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"
    }
  ]
},

Menu

the thing we can put items in.

{
  "type": "menu",
  "alias": "uSync.Menu",
  "name": "uSync Menu",
  "meta": {
    "label": "uSync"
  }
},

Menu item

thing shown in the tree.

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

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"
  }
}

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".