InformationGrid webcomponents documentation

ig-form #

Overview #

The Form component is able to generate and render HTML forms based on resource types. For each property of the resource type a form element will be rendered, based on the value type of the property. This enables you to quickly integrate forms into an application without having to code anything. When the linked resource type changes, the form will update automatically according to those changes.

The FormConfiguration provides a convenient way to configure a form using a domain specific language (DSL).

Properties #

Property Attribute Description Type Default
data – Data which should be prefilled in the form. Object undefined
debug debug When set to true, the debug overlay is displayed to inspect the data while interacting with the form. boolean false
fieldRenderActions – When provided, the given function will be called for the specified field (path). This can be used to display crud icons like edit, delete.

The function should return a list of objects with the properties ‘html’ (function which returns the html to render) and ‘callback’ (callback function which is called upon clicking the element). Example:

this.formCmp[‘fieldRenderActions’] = { ‘student.name’: [{
html: (value) => <span title="Edit" class="glyphicon-pencil"></span>,
callback: (path, value) => this.editStudentName(value)
}]
};
 { [path: string]: FieldAction[]; } undefined
form – Instead of passing a formId, the form blueprint to render can also be specified directly using this property. A form can be retrieved using the REST endpoints ‘/ig/rest/form/generate’ or ‘/ig/rest/form/generateforschema’. Form undefined
formId form-id The identifier of the form configuration as configured within InformationGrid. string undefined
initialValidate initial-validate When set to true, validation of the form is executed directly upon the initial form load. boolean true
labelProvider – A label provider function can be provided which will be called for every label (both form section labels as field labels) to provide translations. Label providers will be called with 2 arguments: the default label (string), and the path of the property the label belongs to (string). Function undefined
observableResourcePaths – optional array of paths for which a dataPartChanged event should be emitted string[] []
suggestionDataProvider – A suggestion data provider can be provided in case the form data itself is not sufficient for retrieving the suggestions (editor: any) => object undefined
suggestionPathProvider – A suggestion path provider can be provided in case the form data itself is not sufficient for retrieving the suggestions for a certain path (editor: any) => object undefined

Events #

Event Description Type
dataChanged Emitted when the data has changed in any way CustomEvent<any>
dataPartChanged If observableResourcePaths is set, this event will be emitted when data changed for one of the provided resource paths. CustomEvent<any>
formSubmitted Emitted when the form is submitted. Can be used to e.g. store the data and redirect the user to an overview. CustomEvent<any>
formValidated Emitted when the form is validated by applying the constraints as specified in the form. Can be used to e.g. trigger additional validation in the back-end.
The event provides a callback method and the data object. The callback method must be called in order to continue the submit process. Validation results (if any) can be provided as argument to the callback method.
Example: formCmp.addEventListener(‘formValidated’, (event) => {
// do additional validation and pass the results to the callback
doBackEndValidation.then(result => e.detail.callback(result));

// OR just fire the callback without arguments
event.detail.callback();
}); 		CustomEvent<any>
formValidationPerformed Emitted when all validation is done and the validation messages (if any) are displayed within the form. CustomEvent<any>
onLoad this event will be emitted when the form has been rendered for the first time. CustomEvent<HTMLElement>
sectionsVisibilityUpdate this event will be emitted when values for resource paths are changed which are included in the expression of a form section visibility CustomEvent<any>

Methods #

getData() => Promise<object> #

Returns all the entered data in the form so far.

Returns #

Type: Promise<object>

getIdentifyingFieldValue() => Promise<string | null> #

Returns the value of the identifying field. If the associated resource type doesn’t have an identifying field, null is returned.

Returns #

Type: Promise<string>

getLabelProvider() => Promise<Function> #

Returns the configured label provider.

Returns #

Type: Promise<Function>

getLocale() => Promise<string> #

Returns the locale of this form

Returns #

Type: Promise<string>

getResourceTypeId() => Promise<string | null> #

Return the identifier of the resource type this form was generated for.

Returns #

Type: Promise<string>

refresh() => Promise<void> #

Returns #

Type: Promise<void>

refreshLookupField(resourcePath: any) => Promise<void> #

Notify lookup field to refresh its suggestions

Parameters #

Name Type Description
resourcePath any

Returns #

Type: Promise<void>

setData(path: string, value: any) => Promise<void> #

Sets a new value for the given path.

Parameters #

Name Type Description
path string the path to set a value for. Brackets can be used to target arrays. E.g. student.addresses[1].street
value any the new value to set.

Returns #

Type: Promise<void>

setExternalValidationResult(validationResult: IgFormCmp.ValidationResult) => Promise<void> #

Sets the given external validation result and display the appropriate messages (if any)

Parameters #

Name Type Description
validationResult ValidationResult

Returns #

Type: Promise<void>

submitForm() => Promise<void> #

Triggers submission of the form. When the returned promise resolves, the form is valid and submitted.

Returns #

Type: Promise<void>

Dependencies #

Used by #

Depends on #

Graph #

graph TD;
  ig-form --> ig-modal
  ig-form --> ig-form-section
  ig-modal --> ig-modal
  ig-form-section --> ig-tooltip
  ig-form-section --> ig-form-field
  ig-form-section --> ig-popover
  ig-tooltip --> ig-popover
  ig-form-field --> ig-form-field-translatable-string
  ig-form-field --> ig-form-field-dsl
  ig-form-field --> ig-form-field-text-editor
  ig-form-field --> ig-form-field-lookup
  ig-form-field --> ig-form-field-date
  ig-form-field --> ig-form-field-upload
  ig-form-field --> ig-form-field-primitive
  ig-form-field --> ig-form-field-enum
  ig-form-field --> ig-form-field-array
  ig-form-field --> ig-form-field-map
  ig-form-field --> ig-form-field-resource-type
  ig-form-field --> ig-form-field-resource-type-group
  ig-form-field-translatable-string --> ig-form-field
  ig-form-field-translatable-string --> ig-popover
  ig-form-field-lookup --> ig-popover
  ig-form-field-array --> ig-form-field
  ig-form-field-array --> ig-popover
  ig-form-field-map --> ig-form-field
  ig-form-field-map --> ig-popover
  ig-form-field-resource-type --> ig-form-section
  ig-form-field-resource-type-group --> ig-form-section
  ig-aggregate-manager --> ig-form
  ig-collection-manager --> ig-form
  ig-command-form --> ig-form
  style ig-form fill:#f9f,stroke:#333,stroke-width:4px