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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

card-view.component.md

card-view.component.md

Card View component

Basic Usage

Class members

Properties

Details

Editing

Defining properties

Card Text Item

Using pipes with a Card Text Item

Card Map Item

Card Date Item

Card Datetime Item

Card Bool Item

Card Int Item

Card Float Item

Card Key Value Pairs Item

Card Select Item

Card Array Item

See also

Files

card-view.component.md

Latest commit

History

card-view.component.md

File metadata and controls

Card View component

Basic Usage

Class members

Properties

Details

Editing

Defining properties

Card Text Item

Using pipes with a Card Text Item

Card Map Item

Card Date Item

Card Datetime Item

Card Bool Item

Card Int Item

Card Float Item

Card Key Value Pairs Item

Card Select Item

Card Array Item

See also