uSync to v14 - part 2/n
Tags: umbraco, usync, migration
Published: 2023-09-27 20:55:33

_27/09/2023 - again_
- [Master blog for all the entries](https://dev.to/kevinjump/usync-to-v14-a-journey-14ho)
- [Github Commit for this post](https://github.com/KevinJump/uSync/commit/2f118b01e9bc1e8d871ff4183eca6ec062d05976)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/54gn1pkej7fj1xntqsf9.png)

```json
{
  "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. 

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

### Menu item 
thing shown in the tree. 

![A sidebar menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qrtmd2m7pkwmif8eaqfa.png)

```json
 {
   "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.

```json
{
  "type": "workspace",
  "alias": "uSync.Workspace",
  "name": "uSync Workspace",
  "js": "/App_Plugins/uSync/usync.js",
  "meta": {
    "label": "uSync View",
    "entityType": "usync-dashboard"
  }
}
```

![A loaded 'workspace'](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/akpnu9v4ejr4ppm44831.png)

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