Welcome to the Alfresco Builder Network

Defines the implementation of an item in a Card View component.

Definition

export interface CardViewItem {
    label: string;
    value: any;
    key: string;
    default?: any;
    type: string;
    displayValue: string;
    editable?: boolean;
    icon?: string;
    data?: any;
}

Properties

NameTypeDefaultDescription
labelstring""Item label
valueanyThe original data value for the item
keystring""Identifying key (important when editing the item)
defaultanyThe default value to display if the value is empty
displayValuestring""The value to display
editablebooleanfalseToggles whether the item is editable
clickablebooleanfalseToggles whether the item is clickable
iconstringThe material icon to show beside clickable items
dataanynullAny custom data which is needed to be provided and stored in the model for any reason. During an update or a click event this can be a container of any custom data which can be useful for 3rd party codes.

Details

Card item components are loaded dynamically by the main Card View component. This allows you to define your own component for a custom item type.

For example, follow the steps given below to add a stardate type to display Captain Picard's birthday (47457.1):

  1. Define the model for the custom type.

    Your model must extend the CardViewBaseItemModel class and implement the CardViewItem and DynamicComponentModel interfaces. See the Card View Text Item model source for an example of how to do this.

    import { CardViewBaseItemModel, CardViewItem, DynamicComponentModel } from '@alfresco/adf-core';
    
    class CardViewStarDateItemModel extends CardViewBaseItemModel implements CardViewItem, DynamicComponentModel {
        type: string = 'star-date';
    
        get displayValue() {
            return this.convertToStarDate(this.value) || this.default;
        }
    
        private convertToStarDate(starTimeStamp: number): string {
            // Do the magic
        }
    }
    
  2. Define the component for the custom type.

    The selector is not important given that this is a dynamically loaded component. You can choose any name for the selector, but it makes sense to follow the Angular standards.

    @Component({
        selector: 'card-view-stardateitem' /* For example */
        ...
    })
    class CardViewStarDateItemComponent {
        @Input()
        property: CardViewStarDateItemModel;
    
        @Input()
        editable: boolean;
    
        constructor(private cardViewUpdateService: CardViewUpdateService) {}
    
        isEditable() {
            return this.editable && this.property.editable;
        }
    
        showStarDatePicker() {
            ...
        }
    }
    

    See the Card View Text Item component source or the Card View Date Item component source for examples of how to make the field editable.

  3. Add your custom component to your module's entryComponents list.

    You must register your component in your module's entryComponents array to enable Angular to load it dynamically:

    @NgModule({
        imports: [...],
        declarations: [
            CardViewStarDateItemComponent
        ],
        entryComponents: [
            CardViewStarDateItemComponent
        ],
        exports: [...]
    })
    class MyModule {}
    
  4. Bind your custom component to the custom model type so that Angular's dynamic component loader can find it.

    @Component({
        ...
        providers: [ CardItemTypeService ] /* If you don't want to pollute the main instance of the CardItemTypeService service */
        ...
    })
    class SomeParentComponent {
    
        constructor(private cardItemTypeService: CardItemTypeService) {
            cardItemTypeService.setComponentTypeResolver('star-date', () => CardViewStarDateItemComponent);
        }
    }
    

    The Card Item Type service maps each item type to the corresponding component. See its doc page for further details.

See also

Interested in trying Alfresco?

Try Now