Image Resolver Model

Defines the Image Resolver function used by the Document List Component.

Definitions

• type ImageResolver = (row: DataRow, column: DataColumn) => string
  • row: DataRow - Data that defines the row
  • column: DataColumn - Data that defines the column
  • Returns File path for the image

Details

An image resolver function selects an image file path for an item in a Document List Component or another component that uses the Document List (such as the Content Node Selector Panel Component). You can supply your own image resolver to manage the way folder/file icons and thumbnails are resolved (ie, which image is shown for which item).

Note: Image resolvers are executed only for columns of the image type.

A typical image resolver implementation receives DataRow and DataColumn objects as parameters:

myImageResolver(row: DataRow, col: DataColumn): string {
    return '/path/to/image';
}

Your function can return null or false values to fall back to the default image resolving behavior.

Note that for the sake of simplicity the example code below was reduced to the main points of interest only.

View1.component.html

<adf-document-list 
    [imageResolver]="folderImageResolver">
    
    <data-columns>
        <data-column key="name" type="image"></data-column>
    </data-columns>
    
</adf-document-list>

View1.component.ts

import { DataColumn, DataRow } from '@alfresco/adf-core';
import { ImageResolver } from '@alfresco/adf-content-services';

class View1 {

    folderImageResolver: ImageResolver;
    
    constructor() {
        
        // Customize folder icons, leave file icons untouched
        
        this.folderImageResolver = (row: DataRow, col: DataColumn) => {
            let isFolder = <boolean> row.getValue('isFolder');
            if (isFolder) {
                
                // (optional) You may want dynamically getting the column value
                let name = row.getValue(col.key);
                
                // Format image url
                return `http://<my custom path to folder icon>/${name}`;
            }
            
            // For the rest of the cases just fallback to default behaviour.
            return null;
        };
        
    }

}

See also

• Document List Component
• Content Node Selector Panel Component