Form

• Graphics Link

Definition

<cst-form>

<sub-theme/>

<sub-font/>

<sub-style/>

<sub-access/>

<sub-help-icon/>

<sub-feature-flag/>

</cst-form>

Example

<cst-form id="" action="" target="" method="">

<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-help-icon name="" position="" title="" link="">

<sub-feature-flag is-fieldset="">

</cst-form>

OR

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

Attributes

Attribute	Value	Description
id	string type	Identifier for component.
value	object type	Specifies an object of form fields value
action	string type	Specifies an address (url) where to submit the form
method	string type	Specifies the HTTP method used when submitting the form.
target	string type	Specifies the target of the address in the action attribute.
disabled	boolean type	Specifies if component should be disabled.(aurelia ext attribute)
autocomplete	boolean type	Specifies if the browser should autocomplete the form.
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-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-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
is-fieldset	boolean type	Specifies to display title as fieldset

Schema Examples

Full schema

Fetch appropriate based on schemaProp

let mySchema = {

type: "object",

required: ["formField"],

properties: {

formField: {

type: "object",

required: ["tenderId", "tenderNotificationNumber", "submissionDate"]

title:"Form Title or Form Group Name",

properties: {

customerName: { //say textbox

type: "string", //=> type = 'text'

minlength: 3,

maxlength: 50,

title:"Customer Name",

cstAttr: {

placeHolder: 'Enter Name',

elementName: 'textbox'

}

},

regionId: {//add earlier dropdown schema

type: "number",

title:"Region",

cstAttr: {

elementName: 'dropdown'

placeHolder: ' -- Select --',

dataSource:

'MASTER_TBL_GROUP_REGION_LEVEL_1', //to check in page object

dataSourceAPI:

'/generic/getMasters?CODE=MASTER_TBL_GROUP_REGION_LEVEL_1',

}

},

tenderId: {// text box

type: "string", //double

minLength: 3,

maxLength: 50,

description: "Tender# is required",

title:"Tender No",

cstAttr: {

elementName: 'textbox

placeHolder: 'Enter Tender No',

}

},

cstElm:{

clearBtn: {

type: "string",

title:"Clear",

cstAttr: {

elementName: 'button'

}

},

searchBtn: {

type: "string",

title:"Save",

cstAttr: {

elementName: 'button',

//in body form object

targetFormDataAPI:

'/generic/saveMaster?Collection=TENDERS',

functionModule:'/filePath.js?fn=genericFunc',

functionId:'ASL_GENERIC_2'

}

}

}

}

cstAttr: {

raw:{ //loop & add to element

disabled : true,

action:'',

method: '',

target: '',

autoComplete: true/false

class:'cst-class1'

},

subStyle:{ //loop & add to element style

name: '',

width:'',

height:'',

fontSize:''

},

subHelpIcon: {

name: '',

position: '',

title:'',

link:''

},

subFeatureFlag: {

isFieldSet:''

},

subTheme:{

name:'',

clrLabel:''

},

subFont:{

name:'',

fontText:'',

fontLabel:'',

fontError:''

},

itemsSource: '', //to check in page object

itemsSourceAPI: ''

}

},

cstLayout:{

small:[

"regionId",

"tenderId"

"customElm.searchBtn",

"customElm.clearBtn"

],

medium:[ //colspan*rowspan

"regionId*3*2, tenderId",

"customElm.searchBtn, customElm.clearBtn"

]

}

}

}

let schemaProp = 'formField';

let value = {

customerName: 'DEMO',

regionId: '',

tenderId: ''

}

let finalSchema = schemaProp ? schema.properties[schemaProp] : schema;

Exact schema

let schema = {

type: "formField",

title: "Fill the details", //= label

cstAttr: {

}

}

let schemaProp = '';

let value = {

customerName: 'DEMO',

regionId: '',

tenderId: ''

}

let finalSchema = schemaProp ? schema.properties[schemaProp] : schema;

Nested object

Nested object schemaProp

let schema = {};

let schemaProp = 'EMDDetails.formField';

let value = {

customerName: 'DEMO',

regionId: '',

tenderId: ''

};

var finalSchema = schema;

let schemaPropSplits = schemaProp.split('.');

for(let prop of schemaPropSplits){

finalSchema = finalSchema.properties[schemaProp];

}

Material Measurement Guidelines

Events

Attribute	Description
onsubmit	Fires when form submit.
oninvalid	Script to be run when an element is invalid.
onreset	Fires when reset button is clicked.
onvalidate	Custom validate hook, must return error message else considered valid; will be called onsubmit.

Event Method signature

method(parentRefObj, evtObj, elm, others)

Parameters description

Parameter	Value	Description
parentRefObj	parentRefObj = { parentContext, loopParentContext, doubleLoopParentContext }	Parent Context references
evtObj	object	Event object
elm	object	Element value
others	any	Other value

OverRidable Classes

• cst-ovr-form-elm
• cst-ovr-form
• cst-ovr-form-label
• cst-ovr-form-helper-text
• cst-ovr-form-error-text

Unit Test Screenshots

Responsiveness Test Screenshots

Design Images

Demo link

Points

• Display form as per given filed and custom layout.
• event callback consistency (evtObj, elm, others,...) //check other libs
• over-rideable classes (cst-ovr-elm) for form, form title, helper text, error text
• Help text for *Required, error labels, text count