Usage
The HTML and JavaScript tabs build the identical Form setup shown above, declaratively via
attributes or imperatively via the JS API.
<div id="countryComboBox"
ui-type="ComboBox"
ui-action="clone"
ui-placeholder="- Select -"
ui-allow-input="false"
ui-item-list='[
{"value":"NL","text":"Netherlands"},
{"value":"BE","text":"Belgium"},
{"value":"DE","text":"Germany"},
{"value":"FR","text":"France"},
{"value":"US","text":"United States"}
]'></div>
<cui-form id="form"
ui-render-when-connected="true"
ui-display-mode="0"
ui-bind-to-custom-model="true"
ui-render-navigation-buttons="false"
ui-has-data-bind-root-context="true"
ui-field-sets='[
{
"type": "FieldSet", "label": "Information", "fields": [
{ "type": "Field", "name": "firstName", "label": "First Name", "placeholder": "- Empty -" },
{ "type": "Field", "name": "lastName", "label": "Last Name", "placeholder": "- Empty -" },
{
"type": "Field", "name": "gender", "label": "Gender", "placeholder": "- Empty -",
"inputType": 3, "lineBreak": true,
"options": [
{ "label": "Male", "value": "Male" },
{ "label": "Female", "value": "Female" }
]
},
{
"type": "Field", "name": "birthDate", "label": "Date of birth",
"placeholder": "- Empty -", "inputType": 8, "lineBreak": true
}
]
},
{
"type": "FieldSet", "label": "Additional Info", "fields": [
{ "type": "Field", "name": "address", "label": "Address", "placeholder": "- Empty -" },
{
"type": "Field", "name": "country", "label": "Country", "placeholder": "- Select -",
"inputType": 7, "inputId": "countryComboBox", "lineBreak": true
},
{
"type": "Field", "name": "comment", "label": "Comment",
"placeholder": "- Empty -", "inputType": 1, "lineBreak": true
},
{
"type": "Field", "name": "newsletter", "label": "Subscribe to newsletter",
"inputType": 2, "lineBreak": true,
"options": [
{ "label": "Yes, send me updates", "value": "yes" }
]
}
]
}
]'></cui-form>
// Country combobox, exists only to be cloned into the Country field via
// inputId, it is never rendered on its own (see ui-action="clone" in the
// HTML tab for the declarative equivalent).
const countryCombo = $UI.createComponent(componyx.UI.ComboBox, {
id: 'countryComboBox',
placeholder: '- Select -',
allowInput: false,
itemList: [
{ value: 'NL', text: 'Netherlands' },
{ value: 'BE', text: 'Belgium' },
{ value: 'DE', text: 'Germany' },
{ value: 'FR', text: 'France' },
{ value: 'US', text: 'United States' }
],
containerElement: document.body
});
const form = $UI.createComponent(componyx.UI.Form, {
id: 'form',
displayMode: componyx.UI.Form.DisplayModeOption.EDIT,
bindToCustomModel: true,
renderNavigationButtons: false,
hasDataBindRootContext: true,
fieldSets: [
new componyx.UI.Form.FieldSet({
label: 'Information',
fields: [
new componyx.UI.Form.Field({ name: 'firstName', label: 'First Name', placeholder: '- Empty -' }),
new componyx.UI.Form.Field({ name: 'lastName', label: 'Last Name', placeholder: '- Empty -' }),
new componyx.UI.Form.Field({
name: 'gender',
label: 'Gender',
placeholder: '- Empty -',
inputType: componyx.UI.Form.InputTypeOption.RADIO,
lineBreak: true,
options: [
new componyx.UI.Form.FieldOption({ label: 'Male', value: 'Male' }),
new componyx.UI.Form.FieldOption({ label: 'Female', value: 'Female' })
]
}),
new componyx.UI.Form.Field({
name: 'birthDate',
label: 'Date of birth',
placeholder: '- Empty -',
inputType: componyx.UI.Form.InputTypeOption.DATEPICKER,
lineBreak: true
})
]
}),
new componyx.UI.Form.FieldSet({
label: 'Additional Info',
fields: [
new componyx.UI.Form.Field({ name: 'address', label: 'Address', placeholder: '- Empty -' }),
new componyx.UI.Form.Field({
name: 'country',
label: 'Country',
placeholder: '- Select -',
inputType: componyx.UI.Form.InputTypeOption.COMBOBOX,
inputId: 'countryComboBox',
lineBreak: true
}),
new componyx.UI.Form.Field({
name: 'comment',
label: 'Comment',
placeholder: '- Empty -',
inputType: componyx.UI.Form.InputTypeOption.TEXTAREA,
lineBreak: true
}),
new componyx.UI.Form.Field({
name: 'newsletter',
label: 'Subscribe to newsletter',
inputType: componyx.UI.Form.InputTypeOption.CHECKBOX,
lineBreak: true,
options: [
new componyx.UI.Form.FieldOption({ label: 'Yes, send me updates', value: 'yes' })
]
})
]
})
],
containerElement: document.body
});
form.show();