Card View Item interface

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

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. 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

• Card View component
• Card Item Types service