How do I use repositories with @umbraco-cms/backoffice

Questions
,
1

In a dashboard, I want to get a document by id. I think I need to use the UmbDocumentDetailRepository, but I’m not sure where to find documentation on how to use a repository?

This is what I tried but got undefined:

constructor() {
    super();
    this.test();
}

async test() {
    let test = new UmbDocumentDetailRepository(this);
    let product = await test.byUnique("test-document-id-43e0009cb105");
    this.observe(product, function (p) {
        console.log("Testing document: ", p);
    });
}
2

Documentation is pretty thin - I’d suggest taking a look into the Umbraco source code to see how they do it in the core. For example, doing a search for UmbDocumentDetailRepository gives lots of examples as to how to use the repo.

Here’s a sample dashboard that goes and grabs a document by Guid and just throws it out into console on creation:

import { LitElement, customElement } from "@umbraco-cms/backoffice/external/lit";
import { UmbElementMixin } from "@umbraco-cms/backoffice/element-api";
import { UmbDocumentDetailRepository } from '@umbraco-cms/backoffice/document';

@customElement('example-dashboard')
export class ExampleDashboardElement extends UmbElementMixin(LitElement) {

  #documentRepository = new UmbDocumentDetailRepository(this);

  constructor() {
    super();
    this.#getDocumentData();
  }

  async #getDocumentData() {
    const { data } = await this.#documentRepository.requestByUnique('45fb3911-8049-4343-bb01-61655c9f0168');
    // I get some data!
    console.log(data);
  }
}

export default ExampleDashboardElement;

declare global {
  interface HTMLElementTagNameMap {
    'example-dashboard': ExampleDashboardElement;
  }
}

Assuming you already have this bit, but just in case it’s useful, here’s the manifest for the above:

export const manifests: Array<UmbExtensionManifest> = [
  {
    name: "Your Package Name Dashboard",
    alias: "YourPackageName.Dashboard",
    type: 'dashboard',
    js: () => import("./dashboard.element"),
    meta: {
      label: "Example Dashboard",
      pathname: "example-dashboard"
    },
    conditions: [
      {
        alias: 'Umb.Condition.SectionAlias',
        match: 'Umb.Section.Content',
      }
    ],
  }
];

Oh yeah - this reference guide is pretty useful as I personally find trying to match the source code to the namespace in the bundled files challenging.

3

Thank you! That was super helpful! Just having a working example makes it so much easier to understand.

1 Like