List Page

• Graphics Link

Definition

<cst-list-page>

<sub-theme/>

<sub-font/>

<sub-style/>

<sub-access/>

<sub-summary-count/>

<sub-help-icon/>

<sub-feature-flag/>

</cst-list-page>

Example

<cst-list-page id="">

<sub-theme name="" clr-var1="" clr-var2=""/>

<sub-font name="" font-var1="" font-var2=""/>

<sub-style name="" width="" height=""/>

<sub-access can-view="" can-modify=""/>

<sub-summary-count title="" position="" display-count="" total-count=""/>

<sub-help-icon name="" position="" title="" link="">

<sub-feature-flag>

</cst-list-page>

OR

<cst-element name="list-page" schema="" schema-prop="" value=""/>

Attributes

Attribute	Value	Description
id	string type	Identifier for component.
class	string type	Specifies class to be applied(Multiple classes can be given with space).
sub-theme	object type	Specifies theme to be used for component.
sub-font	object type	Specifies fonts to be used for component.
sub-style	object type	Specifies style to be applied to component.
sub-summary-count	object type	Specifies the detail should display about the summary of the total cards and total loaded cards. Remaining count will increase in scroll
sub-help-icon	object type	Specifies help icon to be displayed.
sub-feature-flag	object	Specifies what features to enable/disable.
other	any type	Any other info.
schema	object type	Specifies JSON schema.
schema-prop	string type	Specifies property to be used to pick schema.

Sub element attributes

sub-theme

Property	Value	Description
name	primary(default)/secondary/custom	Name of the theme.
clr-label	string type	If custom then specific/ named color variables

sub-font

Property	Value	Description
name	roboto (default)/custom	Name of the font
font-text	string type	If custom then specific/ named font variables.
font-label	string type
font-error	string type

sub-style

Property	Value	Description
name	material/skeuomorphic	Name of design to be used.
width	percentage/pixels/string(x-small,small,medium,large,x-large)	Gives width/any other prop value

sub-summary-count

Property	Value	Description
title	string type	Title of summary.
position	string type(left, right, center)	Position of the summary count
display-count	number type	How many items are loaded
total-count	number type	Total numbers of item

sub-help-icon

Property	Value	Description
name	string type	Icon name.
position	left/right	Position of the icon.
title	string type	Icon tooltip
link	string type	Link to be opened on click.

sub-feature-flag

Property	Value	Description

Schema Examples

Full schema

Fetch appropriate based on schemaProp

let jsonSchema = {

searchSchema: {

type: 'object',

properties: {

vendorName: {

type: 'string',

title: 'Vendor Name',

cstAttr: {

elementName: 'dropdown',

placeHolder: ' -- Select --',

itemsSource: 'MASTER_TBL_GROUP_REGION_LEVEL_1',

itemsSourceAPI:

'/generic/getMasters?CODE=MASTER_TBL_GROUP_REGION_LEVEL_1',

subFeatureFlag: {

allowSelection: false,

allowSearch: false

},

raw:{ //loop & add to element

disabled : true,

autofocus : false,

class:'outline cst-class1',

multiple: false

},

subStyle:{ //loop & add to element style

name: '',

width:'',

height:'',

fontSize:''

},

subLabel:{

position:'',

text:''

},

subLrIcons:[{

name:'',

position:'',

title:''

}],

subOptions:{

itemsProp: '',

itemTextProp: '',

itemSubTextProp: '',

itemValueProp: '',

checkboxPosition: ''

},

subHelpIcon: {

name: '',

position: '',

title:'',

link:''

},

subTheme:{

name:'',

clrLabel:''

},

subFont:{

name:'',

fontText:'',

fontLabel:'',

fontError:''

},

}

},

buyer: {

type: 'string',

minLength: 0,

maxLength: 20,

title: 'Buyer',

cstAttr: {

elementName: 'textbox',

}

}

},

cstAttr: {

itemSourceAPI:''

}

},

listSchema: {

type: "",

properties: {

customerName: {

title: "Customer Name",

type: 'string',

cstAttr: {

tooltip: '',

maxlength: 30,

isSortable: true/false,

typeOptions: {}

}

},

payoutDateTime: {

type: "date",

title: "Payout Date",

cstAttr: {

tooltip: '',

isSortable: true,

isClickable: false,

typeOptions: {

format: 'DD/MM/YYYY'

}

}

},

validityUpto: {

type: 'date',

title: 'Validity Upto',

cstAttr: {

tooltip: '',

isSortable: true,

isClickable: false,

typeOptions: {

format: 'DD/MM/YYYY HH:mm'

}

}

},

transactionType: {

type: 'string',

title: 'Transaction Type',

cstAttr: {

tooltip: '',

isSortable: false

}

},

vendorStatus: {

type: 'string',

title : 'Vendor Status',

cstAttr: {

isSortable: false

}

},

feeStatus: {

type: 'string',

title : 'Fee Status',

cstAttr: {

isSortable: false

}

}

cstElm:{

itemActionIcons: // more properties according to icon set component

{

tableHeader: '',

icons: [{

name: 'refund',

tooltip:'',

showCondition: {

propName: '',

values: []

}

}],

moreAfterCount: 5,

evtClickCallback: ''

}, // by naming convention

listActionIcons: // more properties of quick icon

{

icons:[{

id: ''.

name: 'refund',

tooltip:'',

showCondition: {

propName: '',

values: []

},

superScript: '',

subScript: '',

label: '',

position: '', // start,center,end. Default: center

redirectRoute: '',

isGoBack:

}], //then only checkbox selection

evtClickCallback: ''

},

subSummaryCount: {

title: '',

position: '',

displayCount: '',

totalCount: ''

},

}

},

cstLayout: {

tile: {

small: [

"customerName",

"payoutDateTime"

"validityUpto",

"~transactionType", //in more

"vendorStatus",

"feeStatus"

],

medium: [ //colspan*rowspan

"customerName*2, payoutDateTime",

"validityUpto, transactionType",

"~vendorStatus,feeStatus" //in more

],

large: [ //colspan*rowspan

"customerName*2*3, payoutDateTime",

"validityUpto, transactionType",

"~vendorStatus,feeStatus" //in more

]

},

table: {

medium: [

"customerName,payoutDateTime,C,D", //columns

"validityUpto,transactionTypeF*3",

"~vendorStatus,feeStatus"

],

large: [

"customerName,payoutDateTime,C,D", //columns

"validityUpto,transactionTypeF*3",

"~vendorStatus,feeStatus"

]

}

},

cstAttr: {

getIds:'',

getDetailsByIds:'',

}

},

cstAttr: {

subTheme:{

name:'',

clrLabel:''

},

subFont:{

name:'',

fontText:'',

fontLabel:'',

fontError:''

},

subStyle:{ //loop & add to element style

name: '',

width:'',

height:'',

fontSize:''

},

subFeatureFlag :{

}

}

}

Material Measurement Guidelines

Events

Event Method signature

OverRidable Classes

• cst-ovr-list-page-elm
• cst-ovr-list-page
• cst-ovr-list-page-label
• cst-ovr-list-page-helper-text
• cst-ovr-list-page-error-text

Unit Test Screenshots

Responsiveness Test Screenshots

Design Images

Demo link

Points