Using Property Level UI Permissions with vanilla JavaScript

Questions
,
1

Hi all,

I’ve been trying to create a simple extension that hides a property, just like the example in the documentation. Except: I want to write it in vanilla JavaScript.

I managed to get most of it working myself. I started off with an umbraco-package.json:
{
“$schema”: “../../umbraco-package-schema.json”,
“name”: “Project.Backoffice”,
“version”: “1.0.0”,
“extensions”: [
{
“type”: “workspaceContext”,
“alias”: “Project.Backoffice.WorkspaceContext”,
“name”: “Project Backoffice Workspace context”,
“api”: “/App_Plugins/Project.Backoffice/workspace-context.js”,
“conditions”: [
{
“alias”: “Umb.Condition.WorkspaceAlias”,
“match”: “Umb.Workspace.Document”
}
]
}
]
}

And a worspace context file:

import { UmbControllerBase } from “@umbraco-cms/backoffice/class-api”;
import { UMB_DOCUMENT_WORKSPACE_CONTEXT } from “@umbraco-cms/backoffice/document”;

export class MyDocumentPropertyPermissionWorkspaceContext extends UmbControllerBase {
constructor(host) {
super(host);

    // Consume the document workspace context
    this.consumeContext(
        UMB_DOCUMENT_WORKSPACE_CONTEXT,
        (context) => {
            console.log(context);

            this.observe(context?.structure.propertyStructureByAlias('headerImage'), (property) => {
                console.log(property);

                // Create a guard rule:
                const rule = {
                    unique: 'hideHeaderImage',
                    permitted: false,
                    message: "The property is not writable because of my custom restriction.",
                    propertyType: {
                        unique: property.unique
                    }
                }
                // Add the rule to the write guard
                context.propertyWriteGuard.addRule(rule)
            });
        }
    );
}

}

export { MyDocumentPropertyPermissionWorkspaceContext as api };

The first console.log works fine and returns a context. However, I get an error within the observer:

image
image537×248 8.93 KB

I’m using Umbraco 17.1.0. Has anyone tried this before? Bonus points if you know how to fetch all the properties of a certain tab of the current page. :slight_smile:

Cheers,

Richard

2

Conditional Displayers | Umbraco Marketplace

maybe some pointers here.. the docs suggest extended features.. but not sure is that’s in v17…

Tabs and Groups

The previous documentation talks about property names to configure the editors, but you can also configure them to show or hide tabs and groups. Jump to the extended documentation.

most uui-components have a readonly parameter, that could be of use too?

3

Sadly a problem that I think would have been discovered if you had used TypeScript.

it does not need to be complicated to use TypeScript, but it does require that you run a build script, and under development you would like a Watch script so you do not need to run it again and again.

Anyway, I feel pretty sure that context?.structure.propertyStructureByAlias return a promise, aka is an async method. So you need to put await in front of that call.

To be able to do that you need to make the surrounding method async, put async in front of (context) => { so it becomes async (context) => {

(Update: I corrected the Docs article as well. I see your code properly originated from it. Sorry for that trouble, but good that it is corrected now.)

The rest looks about right, Good luck