Card Component v1.0
Overview
the card component will provide the Solution Developer a way to summarize and display a preview of the related data to each record. This component is flexible enough in order to configure the labels, Images and status look and feel
EPIC ID | ZPT-663 |
Document Owner(s) | |
Dev Engineer(s) | |
QA Engineer(s) | |
Product Manager | |
Reviewer(s) | |
CC | - |
Tech Implementation
Problem Statement
Currently the only graphic representation for a dynamic number of records is the datagrid. This component does not provide the best experience since is difficult to preview the information on each record. Causing users to always open a Side Panel to review the information related to the record.
Solution : card component
the card component will provide the Solution Developer a way to summarize and display a preview of the related data to each record. This component is flexible enough in order to configure the labels, Images and status look and feel
Risks
none
Guard Rails and Limitations
version 1 :
error message and long text support is not available.
max number of extra fields is 2
either of status or progress bar can be shown. not both at a time. (as per current figma provided)
Backward Compatibility
*this is the first version*
Configuration
Key | Description | Value Type | Accepted Values |
|---|---|---|---|
| global title of component | string | any string type value |
| component type | string |
|
| card title | string | any string type value |
| card body text | string | any string type value |
| number of extra fields (max allowed is 2) | int | 0,1,2 any other value will result in zero extra fields |
| label of 1st extra field | string | any string type value |
| value of 1st extra field | string | any string type value |
| label of 2nd extra field | string | any string type value |
| value of 2nd extra field | string | any string type value |
| action associated with the right icon | - | - |
| value of status field | string | any string type value |
| color of status field | string | hex codes of various colors |
| percentage of progress bar filled | int | any number >=0 , <=100 |
| url of thumbnail Image | string | s3 url with any image |
| helper text for component | string | any string type value |
Required fields are denoted with *
Sample JSON
Sample JSON object which needs to be added in the page definition:
CODE
{
"title": "Card Component",
"type": "cardComponent",
"cardTitle": "title",
"cardBodyText": "Body Text",
"noOfExtraFields": 2,
"label1": "@pageContext.label1",
"value1": "@pageContext.value1",
"label2": "@pageContext.label2",
"value2": "@pageContext.value2",
"actionOnClick": "@actions.openModal1",
"cardStatusValue": "Status",
"cardStatusColor": "#EE82EE",
"progressValue": 90,
"thumbnailUrl": "https://z2-nvirginia-edison.s3.amazonaws.com/1646905455238img3.jpg",
"hoverText": {
"title": "@lang.['xyz','Card Component']"
}
}Sample page definition with Card Component configured:
CODE
{
"pageContext": {},
"actionOnLoad": [
"@actions.passPhoneNumber1",
"@actions.passPhoneNumber2"
],
"jslib": {},
"header": {
"children": [
{
"name": "@lang.['fseDelete','delete']",
"icon": "@iconlib.TrashGray",
"tooltip": "@lang.['fseClickToDelete','click to delete']",
"actionOnClick": [
"@actions.openModal1"
],
"type": "buttonIcon"
},
{
"buttonType": "primary",
"actionOnClick": [
"@actions.onSubmit",
"@actions.closePanel1",
"@actions.clearPageContext",
"@actions.refreshDataGrid1"
],
"disabled": false,
"id": "submit",
"type": "button",
"title": "@lang.['fseSave','Save']"
},
{
"icon": "@iconlib.Close",
"actionOnClick": [
"@actions.closePanel1",
"@actions.clearPageContext"
],
"id": "close",
"type": "buttonIcon"
}
],
"title": "@lang.['fseEdit','Edit']"
},
"body": {
"children": [
{
"children": [
{
"disabled": true,
"id": "id",
"label": "@lang.['id1','Id']",
"placeholder": "@lang.['fseEnterName','Enter unique Id']",
"type": "input",
"value": "@pageContext.id",
"hoverText": {
"title": "@lang.['fseUniqueID','Primary key for the record']"
}
},
{
"isRequired": true,
"id": "customerName",
"label": "@lang.['fseName','Customer Name']",
"placeholder": "@lang.['fseEnterName','Enter name']",
"type": "input",
"value": "@pageContext.customerName",
"hoverText": {
"title": "@lang.['name1','Name of the customer']"
}
},
{
"isRequired": true,
"disabled": false,
"id": "phoneNumber1",
"placeholder": "@lang.['fsecp1','Enter number']",
"label": "@lang.['cp1','Contact Number']",
"type": "phoneNumber",
"value": "@pageContext.phoneNumber1",
"hoverText": {
"title": "@lang.['name1','ContactInfo of the customer']"
}
}
],
"label": "@lang.['fseGeneralInformation','Phone Number Component checks']",
"id": "PhoneNumberSection101",
"type": "section"
},
{
"hidden": false,
"children": [
{
"children": [
{
"children": [
{
"readOnly": true,
"id": "manufacturer2",
"label": "@lang.['m','Manufacturer']",
"type": "input",
"value": "@pageContext.relevantData.removed.manufacturer",
"placeHolder": ""
}
],
"flex": "3",
"type": "column"
},
{
"children": [
{
"readOnly": true,
"id": "modelName2",
"label": "@lang.['mn','Model Name']",
"type": "input",
"value": "@pageContext.relevantData.removed.modelName",
"placeHolder": ""
}
],
"flex": "3",
"id": "dataRow3",
"type": "column"
}
],
"id": "manufacturerRow2",
"type": "row"
},
{
"children": [
{
"children": [
{
"readOnly": true,
"id": "modelNumber2",
"label": "@lang.['mn1','Model Number']",
"type": "input",
"value": "@pageContext.relevantData.removed.modelNumber",
"placeHolder": ""
}
],
"flex": "3",
"type": "column"
},
{
"children": [
{
"readOnly": true,
"id": "category2",
"label": "@lang.['c33','Category']",
"type": "input",
"value": "@pageContext.relevantData.removed.category",
"placeHolder": ""
}
],
"flex": "3",
"id": "dataRow4",
"type": "column"
}
],
"id": "categoryRow2",
"type": "row"
},
{
"children": [
{
"children": [
{
"readOnly": true,
"id": "serialNumber2",
"label": "@lang.['serialNumber','Serial Number']",
"type": "input",
"value": "@pageContext.relevantData.removed.serialNumber",
"placeHolder": ""
}
],
"flex": "3",
"type": "column"
}
],
"id": "serialNoRow2",
"type": "row"
}
],
"id": "removedAsset",
"label": "@lang.['ra','Removed Asset']",
"type": "collapseSection",
"isSectionOpen":true
},
{
"children": [
{
"disabled": true,
"id": "phoneNumberDisabled1",
"label": "@lang.['cp2','PhoneNumber (Empty)']",
"placeholder": "@lang.['fsecp2','Enter number']",
"type": "phoneNumber",
"value": "@pageContext.phoneNumberDisabled1"
},
{
"disabled": true,
"id": "phoneNumberDisabled2",
"label": "@lang.['cp3','PhoneNumber (with value)']",
"placeholder": "@lang.['fsecp3','Enter number']",
"type": "phoneNumber",
"value": "@pageContext.phoneNumberDisabled2"
}
],
"label": "@lang.['fseGeneralInformation','Phone Number Component Disabled']",
"id": "PhoneNumberSection102",
"type": "section"
},
{
"children": [
{
"hidden": true,
"id": "phoneNumberHidden",
"type": "phoneNumber",
"value": "@pageContext.phoneNumberHidden"
}
],
"label": "@lang.['fseGeneralInformation','Phone Number Component Hidden']",
"id": "PhoneNumberSection103",
"type": "section"
},
{
"children": [
{
"isRequired": true,
"disabled": false,
"id": "phoneNumberRequired",
"placeholder": "@lang.['fsecp4','Enter number']",
"type": "phoneNumber",
"value": "@pageContext.phoneNumberRequired"
}
],
"label": "@lang.['fseGeneralInformation','Phone Number Component Required']",
"id": "PhoneNumberSection104",
"type": "section"
},
{
"children": [
{
"isRequired": false,
"disabled": false,
"id": "phoneNumberOptional",
"placeholder": "@lang.['fsecp4','Enter number']",
"type": "phoneNumber",
"value": "@pageContext.phoneNumberOptional"
}
],
"label": "@lang.['fseGeneralInformation','Phone Number Component Optional']",
"id": "PhoneNumberSection106",
"type": "section"
},
{
"children": [
{
"isRequired": true,
"disabled": false,
"id": "phoneNumberPageContext",
"placeholder": "@lang.['fsecp4','Enter number']",
"type": "phoneNumber",
"value": "@pageContext.phoneNumberPageContext"
}
],
"label": "@lang.['fseGeneralInformation','Phone Number through pageContext']",
"id": "PhoneNumberSection105",
"type": "section"
},
{
"children": [
{
"isRequired": false,
"actionOnChange": [
"@actions.setValue1"
],
"disabled": false,
"id": "phoneNumberActionOnChange",
"placeholder": "@lang.['fsecp4','Enter number']",
"type": "phoneNumber",
"value": "@pageContext.phoneNumberActionOnChange"
},
{
"id": "nameShownOnChange",
"label": "Value shown on Change",
"placeholder": "This field shows data on changing the phoneNumber",
"type": "input",
"value": "@pageContext.nameShownOnChange"
},
{
"title": "Card Component",
"type": "cardComponent",
"cardTitle": "title",
"cardBodyText": "Body Text",
"noOfExtraFields": 2,
"label1": "@pageContext.label1",
"value1": "@pageContext.value1",
"label2": "@pageContext.label2",
"value2": "@pageContext.value2",
"actionOnClick": "@actions.openModal1",
"cardStatusValue": "Status",
"cardStatusColor": "#EE82EE",
"progressValue": 90,
"thumbnailUrl": "https://z2-nvirginia-edison.s3.amazonaws.com/1646905455238img3.jpg",
"hoverText": {
"title": "@lang.['xyz','Card Component']"
}
}
],
"label": "@lang.['fseGeneralInformation','Phone Number ActionOnChange']",
"id": "PhoneNumberSection105",
"type": "section"
}
]
},
"actions": [
{
"endPoint": "model/update",
"name": "onSubmit",
"type": "api",
"actionDef": {
"data": [
{
"modelName": "phoneNumberCheck",
"phoneNumberPageContext": "@pageContext.phoneNumberPageContext",
"recver": "@pageContext.recver",
"nameShownOnChange": "@pageContext.nameShownOnChange",
"phoneNumberOptional": "@pageContext.phoneNumberOptional",
"phoneNumber1": "@pageContext.phoneNumber1",
"phoneNumberActionOnChange": "@pageContext.phoneNumberActionOnChange",
"id": "@pageContext.id",
"phoneNumberRequired": "@pageContext.phoneNumberRequired",
"customerName": "@pageContext.customerName"
}
],
"columns": [
"customerName",
"phoneNumberPageContext",
"nameShownOnChange",
"phoneNumber1",
"phoneNumberActionOnChange",
"phoneNumberRequired",
"phoneNumberOptional",
"customerName"
]
}
},
{
"endPoint": "model/delete",
"name": "deleteRecord",
"type": "api",
"actionDef": {
"data": [
{
"modelName": "phoneNumberCheck",
"recver": "@pageContext.recver",
"id": "@pageContext.id"
}
],
"purge": true
}
},
{
"subTitle": "@lang.['fseAreYouSureYouWantToDeleteThisManufacturer','Are you sure you want to delete this record?']",
"name": "openModal1",
"options": [
{
"buttonType": "primary",
"name": "yes",
"actionOnClick": [
"@actions.deleteRecord",
"@actions.closeModal1",
"@actions.closePanel1",
"@actions.clearPageContext",
"@actions.refreshDataGrid1"
],
"type": "button",
"title": "@lang.['fseYesContinue','Yes, Continue']"
},
{
"buttonType": "secondary",
"name": "no",
"actionOnClick": "@actions.closeModal1",
"type": "button",
"title": "@lang.['fseCancel','Cancel']"
}
],
"type": "openModal",
"title": "@lang.['fseConfirmDelete','Confirm delete']"
},
{
"name": "closeModal1",
"type": "closeModal"
},
{
"name": "setValue1",
"type": "script",
"actionDef": "function(pageContext){if(typeof pageContext.phoneNumberActionOnChange!=='undefined'&&pageContext.phoneNumberActionOnChange!==''&&pageContext.phoneNumberActionOnChange!='+'){return pageContext.nameShownOnChange='Action performed on Phone Number component';}else{return pageContext.nameShownOnChange='';}}"
},
{
"name": "passPhoneNumber1",
"type": "script",
"actionDef": "function(pageContext){pageContext.phoneNumberDisabled2='+918856478891';pageContext.value1='Test Value1'; pageContext.label1='Test Label1'; pageContext.value2='Test Value2'; pageContext.label2='Test Label2';}"
},
{
"name": "passPhoneNumber2",
"type": "script",
"actionDef": "function(pageContext){pageContext.phoneNumberPageContext='+1-541-754-3010';}"
},
{
"name": "clearPageContext",
"type": "clearPageContext"
},
{
"name": "closePanel1",
"type": "closePanel"
},
{
"name": "refreshDataGrid1",
"type": "refreshDataGrid"
}
]
}note : card component also supports array of actions on click of right button :
sample json for above feature :
CODE
{
"value2": "@pageContext.value2",
"value1": "@pageContext.value1",
"cardStatusValue": "Status",
"title": "Card Component",
"type": "cardComponent",
"progressValue": 90,
"cardTitle": "title",
"label1": "@pageContext.label1",
"label2": "@pageContext.label2",
"noOfExtraFields": 2,
"actionOnClick": [
"@actions.openModal1",
"@actions.setPageContextAction"
],
"cardBodyText": "Body Text",
"cardStatusColor": "#EE82EE",
"thumbnailUrl": "https://z2-nvirginia-edison.s3.amazonaws.com/1646905455238img3.jpg",
"hoverText": {
"title": "@lang.['xyz','Card Component']"
}
}