A Secure Online Service from Utah.gov

Utah.gov

STAT 2.0

A Service from Utah.gov

STAT.formbuilders

Build STAT uniform fields, fieldsets, and button sets

Build STAT Fields

stat.build.fieldsFromDataMap(fieldmap, data)

Generic function that will build fields from a specified datamap object and optionally map the values from an response object

  • @param {Object} fieldmap - required
  • @param {Object} data (from xhr.respsonse must match 'datakey' in datamap)
    See testDataMap example further down the page
  • @returns: [{Fields},]

Example:

// Define Fields
let myFields = stat.build.fieldsFromDataMap(testDataMap.fields);
// returns Array(10) [ p, p, p, p, p, p, p.radioGroup, p, p.radioGroup, p.yesNo ]
// Append Fields
for (let i = 0, length1 = myFields.length; i < length1; i++) {
	stat.build.putElement(myFields[i], '.fieldsbuilder');
}

Build STAT Buttons

stat.build.buttonsFromDataMap(buttonnmap)

Generic function that will build buttons from a specified datamap object

  • @param {Object} buttonmap - required
  • @returns: <p class="buttons"> elementObject containing buttons as child elements

Example:

// Define Buttons
let myButtons = stat.build.buttonsFromDataMap(testDataMap.buttons);
// returns <p class="buttons"> elementObject
// Append Buttons
stat.build.putElement(myButtons, '.buttonsbuilder');

Build Generic STAT Format Fieldset

stat.build.fieldset(title, dataMap)

Generic function that will build an appropriate fieldset from a specified datamap object

  • @param {string} title
  • @param {Object} dataMap - required

Example:

// Define Fieldset
let fieldset = stat.build.fieldset('Title of Fieldset', testDataMap);
// Place Fieldset
stat.build.putElement(fieldset, 'article');

DataMap Example

  • Required: 'fields' array
  • Optional: 'legendButtons' array
  • Optional: 'buttons' array
let testDataMap = {
	'legendButtons': [
		{
			'element': 'button',
			'text': 'Button Text',
			'attr': {
				'id': 'blerg',
				'class': 'mybutton iscool'
			}
		},
		{
			'element': 'a',
			'text': 'Anchor Button Text',
			'attr': {
				'id': 'bloop',
				'href': 'https://www.utah.gov'
			}
		}
	],
	'fields': [
		{
			'label': 'Example Input',
			'element': 'input',
			'parentClass': 'customClassA customClassB',
			'subtext': {
				'class': 'instructions',
				'text': 'Example Instructions text for this field.'
			},
			'attr': {
				'type': 'text',
				'name': 'exampleInput',
				'id': 'exampleInput',
				'placeholder': '',
				'required': 'required'
			}
		},
		{
			'label': 'Example Select Menu',
			'element': 'select',
			'attr': {
				'name': 'exampleSelectMenu',
				'id': 'exampleSelectMenu',
				'placeholder': ''
			},
			'options': {
				'-- Select Contact Type': '',
				'Company Owner/Principle': 'COMPANY_OWNER_PRINCIPLE',
				'Insurance': 'INSURANCE',
				'Facility': 'FACILITY',
				'Compliance': 'COMPLIANCE',
				'Handler Certification': 'HANDLER_CERTIFICATION',
				'Annual Reports': 'ANNUAL_REPORTS',
				'Physical Address': 'PHYSICAL_ADDRESS'
			},
			'subtext': {
				'class': 'optional',
				'text': 'Example Optional text for this field.'
			}
		},
		{
			'label': 'Example Date Input',
			'element': 'input',
			'subtext': {
				'class': 'error',
				'text': 'Example Error text for this field.'
			},
			'attr': {
				'type': 'date',
				'name': 'exampleDate',
				'id': 'exampleDate',
				'placeholder': 'MM/DD/YYYY'
			}
		},
		{
			'label': 'Example Email',
			'element': 'input',
			'subtext': {
				'class': 'success',
				'text': 'Example Success text for this field.'
			},
			'attr': {
				'type': 'email',
				'name': 'exampleEmail',
				'id': 'exampleEmail',
				'placeholder': 'j.contact@abc.com'
			}
		},
		{
			'label': 'Example Phone',
			'element': 'input',
			'attr': {
				'type': 'tel',
				'name': 'phone',
				'id': 'phone',
				'placeholder': '888-888-8888',
				'pattern': '\\d{3}[\\-]\\d{3}[\\-]\\d{4}'
			}
		},
		{
			'label': 'Example State Select',
			'element': 'select',
			'attr': {
				'name': 'state',
				'id': 'state',
				'placeholder': ''
			},
			'options': {
				'-- Select State --': '',
				'Utah': 'UT',
				'Vermont': 'VT',
				'Virginia': 'VA',
				'Wyoming': 'WY'
			},
			'selected': 'UT'
		},
		{
			'label': 'Example Checkbox Group',
			'element': 'checkboxGroup',
			'parentClass': 'customClassA customClassB',
			'attr': {
				'type': 'checkbox',
				'name': 'exampleCheckboxGroup',
				'id': 'exampleCheckboxGroup'
			},
			'options': {
				'Option A': 'OPTION_A',
				'Option B': 'OPTION_B',
				'Option C': 'OPTION_C',
				'Option D': 'OPTION_D',
				'Option E': 'OPTION_E'
			}
		},
		{
			'element': 'input',
			'attr': {
				'type': 'hidden',
				'name': 'exampleHidden',
				'id': 'exampleHidden'
			}
		},
		{
			'label': 'Example Radio Group',
			'element': 'radioGroup',
			'attr': {
				'type': 'radio',
				'name': 'exampleRadioGroup',
				'id': 'exampleRadioGroup'
			},
			'options': {
				'Radio A': 'Radio_A',
				'Radio B': 'Radio_B',
				'Radio C': 'Radio_C',
				'Radio D': 'Radio_D',
				'Radio E': 'Radio_E'
			}
		},
		{
			'label': 'Example YesNo Radio',
			'element': 'yesNo',
			'attr': {
				'type': 'radio',
				'name': 'exampleYesNo',
				'class': 'exampleYesNo'
			},
			'options': {
				'Yes': 'YES',
				'No': 'NO'
			}
		}
	],
	'buttons': [
		{
			'title': 'Example Submit',
			'element': 'button',
			'attr': {
				'type': 'submit',
				'class': 'btn submit float-right'
			}
		},
		{
			'title': 'Cancel',
			'element': 'button',
			'attr': {
				'type': 'button',
				'class': 'btn cancel'
			}
		}
	]
};