Where is the Backoffice UI Documentation?

[karlmacklin]

I am looking for the reference for all things Backoffice UI. Hoping to find lists of all repositories for example.

I managed to get this far:

API Documentation | Umbraco CMS

But the link here:

You can find all reference documentation for the Backoffice UI in the UI Documentation article.

is sadly dead.

I can’t find any file called ui-documentation.md in the repo. Tried with main/14 as well without luck.

Is there a UI Documentation page somewhere or is it coming later?

[greystate (Chriztian Steinmeier)]

Hi Karl

I think you can start here: GitHub - umbraco/Umbraco.UI: Umbraco UI Components - there are links to the Storybook etc.

/Chriztian

[karlmacklin]

Thank you.

I finally managed to find this page as well, this seems to list things like repositories/contexts etc for backoffice extension development:

@umbraco-cms/backoffice

[jacob (Jacob Overgaard 🚀)]

@karlmacklin

I can’t find any file called ui-documentation.md in the repo. Tried with main/14 as well without luck.

Is there a UI Documentation page somewhere or is it coming later?

Thanks for letting us know about this, I have corrected the link just now. It was supposed to link to this article:

UI Library | Umbraco CMS

In that article, you will find quick info on how to use UI components and also a few useful links to the Backoffice Storybook: @storybook/core - Storybook

And the Backoffice JavaScript documentation, where you can find info about contexts and types: @umbraco-cms/backoffice

[karlmacklin]

Thank you.

Bit of a long shot but here goes:
Do you happen to know if there’s any place where the classes for the backoffice javascript docs are more thoroughly described?

For example, I am trying to build an extension that gets a document and its property values.

Following the tutorials and some basic deduction, I’ve managed to find out that I should use UmbDocumentItemRepository shown here: UmbDocumentItemRepository | @umbraco-cms/backoffice

I can call it and get the document but I don’t get any property values. So I am doing something wrong.
Here I am hoping to be able to read somewhere, something like “Use this to get the full document including property values” or something similar.

The docs here however in general only says:

This mixin enables a web-component to host controllers. This enables controllers to be added to the life cycle of this element.
for many files which is confusing.

So I’m stuck and don’t know where to learn this.

[jacob (Jacob Overgaard 🚀)]

Unfortunately, it is not well documented. You would have to figure it out through the source code, but this might get you going:

Consume the UMB_PROPERTY_DATASET_CONTEXT, a context class that holds the values of the current entity, so it would work inside property editors, workspace views, and so on:

import { UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property';

const context = await this.getContext(UMB_PROPERTY_DATASET_CONTEXT);

const allProperties = context?.properties ?? [];
const specificProperty = context?.propertyValueByAlias('alias');

You can find properties on it and set values on specific properties – here I have two variables, the first one holds all properties and the second one holds a value of a specific property by alias.

[karlmacklin]

Thank you! This helps immensly. Grasping the terminology and its use cases seems to be the hardest part of extension building for me right now.

Do you happen to know if one should use a context to fetch other documents than the one you are currently editing? Trying to answer myself the question “am I using context, repository, or both?”

[jacob (Jacob Overgaard 🚀)]

No, in that case you would need to fetch the document through a repository. The context only holds information about the entity currently being shown on the screen. You could use the UmbDocumentDetailRepository in that case.