alfresco-ng2-components/docs/core/interfaces/card-view-item.interface.md

Title, Added, Status, Last reviewed

Title	Added	Status	Last reviewed
Card View Item interface	v2.0.0	Active	2018-05-08

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

Name	Type	Default	Description
label	string	""	Item label
value	any		The original data value for the item
key	string	""	Identifying key (important when editing the item)
default	any		The default value to display if the value is empty
displayValue	string	""	The value to display
editable	boolean	false	Toggles whether the item is editable
clickable	boolean	false	Toggles whether the item is clickable
icon	string		The material icon to show beside clickable items
data	any	null	Any 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';
   
   export 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 */
       ...
   })
   export 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 */
       ...
   })
   export 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