Skip to content

Latest commit

 

History

History
104 lines (79 loc) · 3.92 KB

process-attachment-list.component.md

File metadata and controls

104 lines (79 loc) · 3.92 KB
Title Added Status Last reviewed
Process Attachment List component
v2.0.0
Active
2019-01-14

Displays documents attached to a specified process instance.

process-attachment-list-sample

Basic Usage

<adf-process-attachment-list
    [processInstanceId]="YOUR_PROCESS_INSTANCE_ID"
    (attachmentClick)="YOUR_ATTACHMENT_CLICK_EMITTER_HANDLER">
</adf-process-attachment-list>

Make sure to override the UploadService with the ProcessUploadService

import { UploadService } from '@alfresco/adf-core';
import { ProcessUploadService } from '@alfresco/adf-process-services';

@Component({
    selector: 'my-custom-process-attachment',
    providers: [
        { provide: UploadService, useClass: ProcessUploadService }
    ]
})
export class MyCustomProcessAttachmentComponent {
    constructor() {}
}

Any content inside the <adf-process-attachment-list> element will be shown when the list is empty:

<adf-process-attachment-list ...>
    <div><!-- Custom empty list message goes here --></div>
</adf-process-attachment-list>

custom-no-content-drag-drop-template-sample

A default template will be used if you don't supply a custom one to override it:

default-no-content-template-sample

Class members

Properties

Name Type Default value Description
disabled boolean false Disable/Enable read-only mode for attachment list.
processInstanceId string (required) The ID of the process instance to display.

Events

Name Type Description
attachmentClick EventEmitter<any> Emitted when the attachment is double-clicked or the view option is selected from the context menu by the user from within the component. Returns a Blob representing the object that was clicked.
error EventEmitter<any> Emitted when the attachment list is not able to fetch the attachments (eg, following a network error).
success EventEmitter<any> Emitted when the attachment list has fetched all the attachments. Returns a list of attachments.

Details

How to Add Drag and Drop Functionality

You can wrap the attachment list with an Upload Drag Area component to let the user upload attachments to empty lists. When you do this, you can also supply a custom no content template (using <adf-empty-list>) to invite the user to add their attachments:

<adf-upload-drag-area
    [rootFolderId]="YOUR_PROCESS_ID"
    [showNotificationBar]="BOOLEAN">
    <adf-process-attachment-list  
        [processId]="YOUR_PROCESS_ID"
        (attachmentClick)="YOUR_HANDLER">
            <div adf-empty-list> //no content template
                <adf-empty-list>
                    <div adf-empty-list-header>{{This List is empty}}</div>
                    <div adf-empty-list-body>{{Drag and drop to upload}}</div>
                    <div adf-empty-list-footer>
                        <img [src]="Your custom image URL"></div> 
                </adf-empty-list>
            </div>
    </adf-process-attachment-list>
</adf-upload-drag-area>