inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-2261] Missing documentation to render json in a form component (#2920)

Browse Source 
* [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
This commit is contained in:
Deepak Paul
2018-02-28 23:43:39 +05:30
committed by Eugenio Romano
parent 45426fd246
commit af9873cfce
1 changed files with 191 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

191
docs/form.component.md
View File

@@ -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: `<div class="form-container">
<adf-form
[form]="form">
</adf-form>
</div>`
})
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`).