Selectively disables an HTML element or Angular component.
<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>
Name | Type | Default value | Description |
---|---|---|---|
nodes | NodeEntry [] | [] | Nodes to check permission for. |
permission | string | null | Node permission to check (create, delete, update, updatePermissions, !create, !delete, !update, !updatePermissions). |
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:
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.
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.
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;
}
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.
© 2023 Alfresco Software, Inc. All Rights Reserved.
By using this site, you are agreeing to allow us to collect and use cookies as outlined in Alfresco’s Cookie Statement and Terms of Use (and you have a legitimate interest in Alfresco and our products, authorizing us to contact you in such methods). If you are not ok with these terms, please do not use this website.