alfresco-ng2-components/docs/core/components/card-view.component.md

Title, Added, Status, Last reviewed

Title	Added	Status	Last reviewed
Card View component	v2.0.0	Active	2018-05-09

Card View component

Displays a configurable property list renderer.

Basic Usage

Defining properties from HTML:

<adf-card-view
    [properties]="[{label: 'My Label', value: 'My value'}]"
    [editable]="false">
</adf-card-view>

Defining properties from Typescript:

 this.properties = [
    new CardViewTextItemModel({
        label: 'Name',
        value: 'Spock',
        key: 'name',
        default: 'default bar' ,
        multiline: false,
        icon: 'icon',
        clickCallBack : ()=>{ myClickImplementation()} 
    }),
    new CardViewMapItemModel({
        label: 'My map',
        value: new Map([['999', 'My Value']]),
        key: 'map',
        default: 'default map value' ,
        clickable: true,
    }),
    new CardViewDateItemModel({
        label: 'Date of birth',
        value: someDate,
        key: 'date-of-birth',
        default: new Date(),
        format: '<any format that momentjs accepts>',
        editable: true
    }),
    new CardViewDatetimeItemModel({
        label: 'Datetime of birth',
        value: someDatetime,
        key: 'datetime-of-birth',
        default: new Date(),
        format: '<any format that momentjs accepts>',
        editable: true
    }),
    new CardViewBoolItemModel({
        label: 'Vulcanian',
        value: true,
        key: 'vulcanian',
        default: false
    }),
    new CardViewIntItemModel({
        label: 'Intelligence',
        value: 213,
        key: 'intelligence',
        default: 1
    }),
    new CardViewFloatItemModel({
        label: 'Mental stability',
        value: 9.9,
        key: 'mental-stability',
        default: 0.0
    }),
    new CardViewKeyValuePairsItemModel({
        label: 'Variables',
        value: [],
        key: 'key-value-pairs'
    }),
    new CardViewSelectItemModel({
        label: 'Select box',
        value: 'one',
        options$: of([{ key: 'one', label: 'One' }, { key: 'two', label: 'Two' }]),
        key: 'select'
    }),
    new CardViewArrayItemModel({
        label: 'Array of items',
        value: '',
        items$: of([
            { icon: 'person', value: 'One' }, { icon: 'person', value: 'Two' },
            { icon: 'person', value: 'Three' }, { icon: 'person', value: 'Four' }
            ]),
        key: 'array',
        default: 'Empty',
        noOfItemsToDisplay: 2
    })
    ...
]

Class members

Properties

Name	Type	Default value	Description
copyToClipboardAction	boolean	true	Toggles whether or not to enable copy to clipboard action.
displayClearAction	boolean	true	Toggles whether or not to display clear action.
displayEmpty	boolean	true	Toggles whether or not to show empty items in non-editable mode.
displayNoneOption	boolean	true	Toggles whether or not to display none option.
editable	boolean		Toggles whether or not the items can be edited.
multiValueSeparator	string	DEFAULT_SEPARATOR	String separator between multi-value property items.
properties	CardViewItem[]		(required) Items to show in the card view.
useChipsForMultiValueProperty	boolean	true	Toggles whether or not to enable chips for multivalued properties.

Details

You define the property list, the CardViewComponent does the rest. Each property represents a card view item (a row) in the card view component. The following item types are available by default:

• CardViewTextItemModel - for text items
• CardViewMapItemModel - for map items
• CardViewDateItemModel - for date items
• CardViewDatetimeItemModel - for datetime items
• CardViewBoolItemModel - for bool items (checkbox)
• CardViewIntItemModel - for integer items
• CardViewFloatItemModel - for float items
• CardViewKeyValuePairsItemModel - for key-value-pairs items
• CardViewSelectItemModel - for select items
• CardViewArrayItemModel - for array items

Each of these types implements the Card View Item interface:

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

You can also define your own item types. See the Card View Item interface page for details of how to do this.

Editing

You can optionally set up the card view so that its properties can be edited. You can control the editing of properties at two levels:

• Global level - via the editable parameter of the card-view.component
• Property level - in each property via the editable attribute

If you set the global editable parameter to false, no properties can be edited regardless of their individual editable settings.

See the Card View Update service page for details of how to use the service to respond to clicks and edits in a card view. You can use this, for example, to save the edits within your application or to highlight a clicked item.

Defining properties

The properties array contains instances of models that represent the layout of the Card View. The ordering of the models in the array matches the ordering of items in the view. Each of the models extends the abstract CardViewBaseItemModel class to add functionality for specific data types, as described below.

Card Text Item

CardViewTextItemModel is a property type for text properties.

const textItemProperty = new CardViewTextItemModel(options);

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 property responds to clicks
clickableCallBack	function	null	Function to execute when click the element
copyToClipboardAction	boolean	true	Toggles whether or not to enable copy to clipboard action.
useChipsForMultiValueProperty	boolean	true	Toggles whether or not to enable chips for multivalued properties.
multiValueSeparator	string	','	String separator between multi-value property items.
icon	string		The material icon to show beside the item if it is clickable
multiline	boolean	false	Single or multiline text
pipes	CardViewTextItemPipeProperty[]	[]	Pipes to be applied to the text before display

Using pipes with a Card Text Item

You can use pipes for text items in almost the same way as you would do it in an HTML template. You can provide an array of pipes with additional pipe parameters using the pipes property:

const myWonderfulPipe1: PipeTransform = <whatever PipeTransform implmentation>;
const myWonderfulPipe2: PipeTransform = <whatever PipeTransform implmentation>;

new CardViewTextItemModel({
    label: 'some label',
    value: someValue,
    key: 'some-key',
    pipes: [
	{ pipe: myWonderfulPipe1, params: ['first-param', 'second-param'] },
	{ pipe: myWonderfulPipe2, params: ['first-param', 'second-param'] }
    ]
});

Card Map Item

CardViewMapItemModel is a property type for map properties.

const mapItemProperty = new CardViewMapItemModel(options);

Name	Type	Default	Description
label*	string		Item label
value*	Map		A map that contains the key value pairs
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
clickable	boolean	false	Toggles whether the property responds to clicks

Card Date Item

CardViewDateItemModel is a property type for date properties.

const dateItemProperty = new CardViewDateItemModel(options);

Name	Type	Default	Description
label*	string		Item label
value*	any		The original data value for the item
copyToClipboardAction	boolean	true	Toggles whether or not to enable copy to clipboard action.
key*	string		Identifying key (important when editing the item)
default	any		The default value to display if the value is empty
displayValue*	any		The value to display
editable	boolean	false	Toggles whether the item is editable
format	string	"MMM DD YYYY"	Any date format that momentjs accepts

Card Datetime Item

CardViewDatetimeItemModel is a property type for datetime properties.

const datetimeItemProperty = new CardViewDatetimeItemModel(options);

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	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
format	string	"MMM DD YYYY HH:mm"	Any datetime format that momentjs accepts

Card Bool Item

CardViewBoolItemModel is a property type for boolean properties.

const boolItemProperty = new CardViewBoolItemModel(options);

Name	Type	Default	Description
label*	string		Item label
value*	boolean		The original data value for the item
key*	string		Identifying key (important when editing the item)
default	boolean	false	The default value to display if the value is empty
displayValue*	boolean		The value to display
editable	boolean	false	Toggles whether the item is editable

Card Int Item

CardViewIntItemModel is a property type for integer properties.

const intItemProperty = new CardViewIntItemModel(options);

Name	Type	Default	Description
label*	string		Item label
value*	integer		The original data value for the item
key*	string		Identifying key (important when editing the item)
default	integer		The default value to display if the value is empty
displayValue*	integer		The value to display
editable	boolean	false	Toggles whether the item is editable

Card Float Item

CardViewFloatItemModel is a property type for float properties.

const floatItemProperty = new CardViewFloatItemModel(options);

Name	Type	Default	Description
label*	string		Item label
value*	float		The original data value for the item
key*	string		Identifying key (important when editing the item)
default	float		The default value to display if the value is empty
displayValue*	float		The value to display
editable	boolean	false	Toggles whether the item is editable

Card Key Value Pairs Item

CardViewKeyValuePairsItemModel is a property type for key-value properties.

const keyValuePairsItemProperty = new CardViewKeyValuePairsItemModel(options);

Name	Type	Default	Description
label*	string		Item label
key*	string		Identifying key (important when editing the item)
editable	boolean	false	Toggles whether the item is editable
value*	[{ name: '', value: '' }, ...]		The original data value for the item

Card Select Item

CardViewSelectItemModel is a property type for select properties.

const selectItemProperty = new CardViewSelectItemModel(options);

Name	Type	Default	Description
label*	string		Item label
key*	string		Identifying key (important when editing the item)
editable	boolean	false	Toggles whether the item is editable
value	string		The original data value for the item
options$*	Observable<CardViewSelectItemOption[]>		The original data value for the item

Card Array Item

CardViewArrayItemModel is a property type for array properties.

const arrayItemProperty = new CardViewArrayItemModel(items);

Name	Type	Default	Description
label*	string		Item label
key*	string		Identifying key (important when editing the item)
editable	boolean	false	Toggles whether the item is editable
value	Observable<CardViewArrayItem[]>		The original data value for the item

See also

• Card View Update service
• Card View Item interface