Welcome to the Alfresco Builder Network

Our technical resource site is still being improved. We'd love to hear your feedback. Tell us what you think

Selectively disables an HTML element or Angular component.

Contents

Basic Usage

<adf-toolbar title="toolbar example">
    <button mat-icon-button
            adf-check-allowable-operation="delete"
            [adf-nodes]="documentList.selection">
        <mat-icon>delete</mat-icon>
    </button>
</adf-toolbar>

<adf-document-list #documentList ...>
 ...
</adf-document-list>

Class members

Properties

NameTypeDefault valueDescription
nodesNodeEntry[][]Nodes to check permission for.
permissionstringnullNode permission to check (create, delete, update, updatePermissions, !create, !delete, !update, !updatePermissions).

Details

The Check Allowable Operation Directive lets you disable an HTML element or Angular component by taking a collection of NodeEntry instances and checking their permissions.

The decorated element will be disabled if:

  • there are no nodes in the collection
  • at least one of the nodes does not have the required permission

HTML element example

A typical use case is to bind a Document List selection property to a toolbar button. In the following example, the "Delete" button should be disabled if no selection is present or if user does not have permission to delete at least one node in the selection:

<adf-toolbar title="toolbar example">
    <button mat-icon-button
            adf-check-allowable-operation="delete"
            [adf-nodes]="documentList.selection">
        <mat-icon>delete</mat-icon>
    </button>
</adf-toolbar>

<adf-document-list #documentList ...>
 ...
</adf-document-list>

The button will be disabled by default and will change state when the user selects or deselects one or more documents that they have permission to delete.

Angular component example

You can add the directive to any Angular component that implements the NodeAllowableOperationSubject interface (the Upload Drag Area component, for example). You can also use it in much the same way as you would with an HTML element:

<alfresco-upload-drag-area
        [rootFolderId]="..."
        [versioning]="..."
        [adf-check-allowable-operation]="'create'"
        [adf-nodes]="getCurrentDocumentListNode()">
 ...
</alfresco-upload-drag-area>

To enable your own component to work with this directive, you need to implement the NodeAllowableOperationSubject interface and also define it as an EXTENDIBLE_COMPONENT parent component, as described in the following sections.

Implementing the NodeAllowableOperationSubject interface

The component must implement the NodeAllowableOperationSubject interface which means it must have a boolean disabled property. This is the property that will be set by the directive:

import { NodePermissionSubject } from '@alfresco/adf-core';

@Component({...})
class UploadDragAreaComponent implements NodeAllowableOperationSubject {
    public disabled: boolean = false;
}

Defining your component as an EXTENDIBLE_COMPONENT parent component

The directive will look up the component in the dependency injection tree, up to the @Host() component. The host component is typically the component that requests the dependency. However, when this component is projected into a parent component, the parent becomes the host. This means you must provide your component with forward referencing as the EXTENDIBLE_COMPONENT and also provide your component as a viewProvider:

import { EXTENDIBLE_COMPONENT } from '@alfresco/adf-core';

@Component({
    ...
    viewProviders: [
        { provide: EXTENDIBLE_COMPONENT, useExisting: forwardRef(() => UploadDragAreaComponent)}
    ]
})
class UploadDragAreaComponent implements NodeAllowableOperationSubject { ... }

Note: the usage of viewProviders (instead of providers) is very important, especially if you want to use this directive on a transcluded component.

Interested in trying Alfresco?

Try Now