From af9873cfcedbbfa2becdab6d467c98050b3b5324 Mon Sep 17 00:00:00 2001 From: Deepak Paul Date: Wed, 28 Feb 2018 23:43:39 +0530 Subject: [PATCH] [ADF-2261] Missing documentation to render json in a form component (#2920) * [ADF-2261] Missing documentation to render json in a form component * Added documentation on how to render form by using form definition JSON * * Updated documentation --- docs/form.component.md | 191 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 191 insertions(+) diff --git a/docs/form.component.md b/docs/form.component.md index f10022f069..51198dbc6a 100644 --- a/docs/form.component.md +++ b/docs/form.component.md @@ -238,6 +238,197 @@ also implement your own custom validators to replace or extend the set. See the ### Common scenarios +#### Render form by using form definition JSON + +Below is a sample form definition JSON. + +```json + { + "id": 1001, + "name": "ISSUE_FORM", + "processDefinitionId": "ISSUE_APP:1:2504", + "processDefinitionName": "ISSUE_APP", + "processDefinitionKey": "ISSUE_APP", + "taskId": "2510", + "taskDefinitionKey": "sid-F67A2996-1684-4774-855A-4591490081FD", + "tabs": [], + "fields": [ + { + "fieldType": "ContainerRepresentation", + "id": "1498212398417", + "name": "Label", + "type": "container", + "value": null, + "required": false, + "readOnly": false, + "overrideId": false, + "colspan": 1, + "placeholder": null, + "minLength": 0, + "maxLength": 0, + "minValue": null, + "maxValue": null, + "regexPattern": null, + "optionType": null, + "hasEmptyValue": false, + "options": null, + "restUrl": null, + "restResponsePath": null, + "restIdProperty": null, + "restLabelProperty": null, + "tab": null, + "className": null, + "dateDisplayFormat": null, + "sizeX": 2, + "sizeY": 1, + "row": -1, + "col": -1, + "numberOfColumns": 2, + "fields": { + "1": [ + { + "fieldType": "RestFieldRepresentation", + "id": "label", + "name": "Label", + "type": "dropdown", + "value": "Choose one...", + "required": false, + "readOnly": false, + "overrideId": false, + "colspan": 1, + "placeholder": null, + "minLength": 0, + "maxLength": 0, + "minValue": null, + "maxValue": null, + "regexPattern": null, + "optionType": null, + "hasEmptyValue": true, + "options": [ + { + "id": "empty", + "name": "Choose one..." + }, + { + "id": "option_1", + "name": "test1" + }, + { + "id": "option_2", + "name": "test2" + }, + { + "id": "option_3", + "name": "test3" + } + ], + "restUrl": null, + "restResponsePath": null, + "restIdProperty": null, + "restLabelProperty": null, + "tab": null, + "className": null, + "params": { + "existingColspan": 1, + "maxColspan": 2 + }, + "dateDisplayFormat": null, + "layout": { + "row": -1, + "column": -1, + "colspan": 1 + }, + "sizeX": 1, + "sizeY": 1, + "row": -1, + "col": -1, + "visibilityCondition": null, + "endpoint": null, + "requestHeaders": null + }, + { + "fieldType": "FormFieldRepresentation", + "id": "Date", + "name": "Date", + "type": "date", + "value": null, + "required": false, + "readOnly": false, + "overrideId": false, + "colspan": 1, + "placeholder": null, + "minLength": 0, + "maxLength": 0, + "minValue": null, + "maxValue": null, + "regexPattern": null, + "optionType": null, + "hasEmptyValue": null, + "options": null, + "restUrl": null, + "restResponsePath": null, + "restIdProperty": null, + "restLabelProperty": null, + "tab": "tab1", + "className": null, + "params": { + "existingColspan": 1, + "maxColspan": 2 + }, + "dateDisplayFormat": null, + "layout": { + "row": -1, + "column": -1, + "colspan": 1 + }, + "sizeX": 1, + "sizeY": 1, + "row": -1, + "col": -1, + "visibilityCondition": null + } + ] + } + } + ], + "outcomes": [], + "javascriptEvents": [], + "className": "", + "style": "", + "customFieldTemplates": {}, + "metadata": {}, + "variables": [], + "customFieldsValueInfo": {}, + "gridsterForm": false, + "globalDateFormat": "D-M-YYYY" + } +``` + +The component below with the form definition JSON assigned to the variable `formDefinitionJSON`, shows how a form is rendered by using form definition JSON. + +```ts +@Component({ + selector: 'sample-form', + template: `
+ + +
` +}) +export class SampleFormComponent implements OnInit { + + form: FormModel; + formDefinitionJSON: any; + + constructor(private formService: FormService) { + } + + ngOnInit() { + this.form = this.formService.parseForm(this.formDefinitionJSON); + } +} +``` + #### Changing field value based on another field Create a simple Form with a dropdown widget (id: `type`), and a multiline text (id: `description`).