diff --git a/demo-shell/src/app/components/form/demo-form.ts b/demo-shell/src/app/components/form/demo-form.ts index daae995c37..a56d3ca55c 100644 --- a/demo-shell/src/app/components/form/demo-form.ts +++ b/demo-shell/src/app/components/form/demo-form.ts @@ -21,11 +21,6 @@ export class DemoForm { return { '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': [ { diff --git a/docs/docassets/demo-form.json b/docs/docassets/demo-form.json new file mode 100644 index 0000000000..d675ce3cc0 --- /dev/null +++ b/docs/docassets/demo-form.json @@ -0,0 +1,329 @@ +{ + 'id': 1001, + 'name': 'ISSUE_FORM', + '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 + }, + { + 'fieldType': 'FormFieldRepresentation', + 'id': 'label5', + 'name': 'Label5', + 'type': 'boolean', + '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': 1 + }, + 'dateDisplayFormat': null, + 'layout': { + 'row': -1, + 'column': -1, + 'colspan': 1 + }, + 'sizeX': 1, + 'sizeY': 1, + 'row': -1, + 'col': -1, + 'visibilityCondition': null + }, + { + 'fieldType': 'FormFieldRepresentation', + 'id': 'label6', + 'name': 'Label6', + 'type': 'boolean', + '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': 1 + }, + 'dateDisplayFormat': null, + 'layout': { + 'row': -1, + 'column': -1, + 'colspan': 1 + }, + 'sizeX': 1, + 'sizeY': 1, + 'row': -1, + 'col': -1, + 'visibilityCondition': null + }, + { + 'fieldType': 'FormFieldRepresentation', + 'id': 'label4', + 'name': 'Label4', + 'type': 'integer', + '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 + }, + { + 'fieldType': 'RestFieldRepresentation', + 'id': 'label12', + 'name': 'Label12', + 'type': 'radio-buttons', + 'value': null, + 'required': false, + 'readOnly': false, + 'overrideId': false, + 'colspan': 1, + 'placeholder': null, + 'minLength': 0, + 'maxLength': 0, + 'minValue': null, + 'maxValue': null, + 'regexPatt§12212ern': null, + 'optionType': null, + 'hasEmptyValue': null, + 'options': [ + { + 'id': 'option_1', + 'name': 'Option 1' + }, + { + 'id': 'option_2', + 'name': 'Option 2' + } + ], + '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, + 'endpoint': null, + 'requestHeaders': null + } + ] + } + } + ], + 'outcomes': [], + 'javascriptEvents': [], + 'className': '', + 'style': '', + 'customFieldTemplates': {}, + 'metadata': {}, + 'variables': [], + 'customFieldsValueInfo': {}, + 'gridsterForm': false, + 'globalDateFormat': 'D-M-YYYY' +} diff --git a/docs/form.component.md b/docs/form.component.md index 51198dbc6a..26874c5504 100644 --- a/docs/form.component.md +++ b/docs/form.component.md @@ -240,169 +240,7 @@ also implement your own custom validators to replace or extend the set. See the #### 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" - } -``` +Please give a look to the [demo-form](docassets/demo-form.json) as a sample of form definition JSON. The component below with the form definition JSON assigned to the variable `formDefinitionJSON`, shows how a form is rendered by using form definition JSON.