Mapping ag-grid within JSONForms to render complex data-grid

General
1

Hi to all.
Sorry to disturb you, but i’m new to JSONForms?

As i’ve been trying to user ag-grid within the JSONForms in order to render complex data grid, i am stuck due to my lack of knowledge.

Can you please advise?

[original thread by JoaoCarimo]

2

Hi @joaocarimo, thanks for your interest in JSON Forms. Could you provide more details about what are you trying to achieve?

3

[JoaoCarimo]

I have imported as-grid: npm install --save ag-grid-community ag-grid-angular

4

[JoaoCarimo]

Hi Stefan, Thank you coming back to me.
I am learning JSONForms as i want to use it as a form engine within Angular 7.
I am using the: GitHub - eclipsesource/jsonforms-angular-seed: Angular-based JSON Forms seed app as a base.

There is a ag-grid ui which i intend to automatically render:

I have imported it as a component but i have been struggling to map it as for example ‘type’: ‘grid’
and defining related properties.

This is an example:
private schema = {
‘type’: ‘object’,
‘properties’: {
‘name’: {
‘type’: ‘string’,
‘minLength’: 3
},
‘personalData’: {
‘type’: ‘object’,
‘properties’: {
‘age’: {
‘type’: ‘integer’
},
‘height’: {
‘type’: ‘number’
}
},
‘required’: [‘age’, ‘height’]
},
‘vegetarian’: {
‘type’: ‘boolean’
},
‘birthDate’: {
‘type’: ‘string’,
‘format’: ‘date’
},
‘nationality’: {
‘type’: ‘string’,
‘enum’: [‘DE’, ‘IT’, ‘JP’, ‘US’, ‘RU’, ‘Other’]
},
‘occupation’: {
‘type’: ‘string’
},
‘investments’: {
‘type’: ‘object’,
‘properties’: {
‘type’: ‘grid’,
‘className’: ‘ag-theme-balham’,
‘templateOptions’: {
‘height’: ‘200px’,
‘class’: ‘ag-fresh’,
‘gridOptions’: {
‘rowHeight’: 42,
‘paginationPageSize’: 15,
‘pagination’: true,
‘columnDefs’: [
{‘headerName’: ‘User Group’, ‘field’: ‘group’, ‘sortable’: true, ‘filter’: true, ‘checkboxSelection’: true },
{‘headerName’: ‘Role’, ‘field’: ‘role’, ‘sortable’: true, ‘filter’: true},
{‘headerName’: ‘Status’, ‘field’: ‘status’, ‘sortable’: true, ‘filter’: true }
],
},
}
}
}
},
‘required’: [‘occupation’, ‘nationality’]
};

private uischema = {
‘type’: ‘VerticalLayout’,
‘elements’: [
{
‘type’: ‘HorizontalLayout’,
‘elements’: [
{
‘type’: ‘Control’,
‘label’: {
‘text’: ‘Name’,
‘show’: true
},
‘scope’: {
‘$ref’: ‘#/properties/name’
}
},
{
‘type’: ‘Control’,
‘label’: {
‘text’: ‘Age’
},
‘scope’: {
‘$ref’: ‘#/properties/personalData/properties/age’
}
},
{
‘type’: ‘Control’,
‘label’: ‘Height’,
‘scope’: {
‘$ref’: ‘#/properties/personalData/properties/height’
}
}
]
},
{
‘type’: ‘HorizontalLayout’,
‘elements’: [
{
‘type’: ‘Control’,
‘label’: ‘Nationality’,
‘scope’: {
‘$ref’: ‘#/properties/nationality’
}
},
{
‘type’: ‘Control’,
‘label’: ‘Occupation’,
‘scope’: {
‘$ref’: ‘#/properties/occupation’
},
‘suggestion’: [‘Accountant’, ‘Engineer’, ‘Freelancer’,
‘Journalism’, ‘Physician’, ‘Student’, ‘Teacher’, ‘Other’]
},
{
‘type’: ‘Control’,
‘label’: ‘Birthday’,
‘scope’: {
‘$ref’: ‘#/properties/birthDate’
}
}
]
},
{
‘type’: ‘Control’,
‘label’: ‘list’,
‘scope’: {
‘$ref’: ‘#/properties/investments’
}
}
]
};
private data = {
name: ‘John Doe’,
birthDate: ‘1985-06-02’,
investments : [
{ make: ‘Toyota’, model: ‘Celica’, price: 35000 },
{ make: ‘Ford’, model: ‘Mondeo’, price: 32000 },
{ make: ‘Porsche’, model: ‘Boxter’, price: 72000 }
]
};

Edited

1:27pm
I have imported as-grid: npm install --save ag-grid-community ag-grid-angular

1:30pm
schema= { ‘investments’: {
‘type’: ‘object’,
‘properties’: {
‘type’: ‘grid’,
‘className’: ‘ag-theme-balham’,
‘templateOptions’: {
‘height’: ‘200px’,
‘class’: ‘ag-fresh’,
‘gridOptions’: {
‘rowHeight’: 42,
‘paginationPageSize’: 15,
‘pagination’: true,
‘columnDefs’: [
{‘headerName’: ‘User Group’, ‘field’: ‘group’, ‘sortable’: true, ‘filter’: true, ‘checkboxSelection’: true },
{‘headerName’: ‘Role’, ‘field’: ‘role’, ‘sortable’: true, ‘filter’: true},
{‘headerName’: ‘Status’, ‘field’: ‘status’, ‘sortable’: true, ‘filter’: true }
],
},
}
}
}
};

1:33pm
private uischema = {
‘type’: ‘VerticalLayout’,
‘elements’: [
{
{
‘type’: ‘Control’,
‘label’: ‘list’,
‘scope’: {
‘$ref’: ‘#/properties/investments’
}
}
]
};

1:36pm
How do i register ag-grid and define controls so that i can render?
<ag-grid-angular #agGrid style=“width: 100%; height: 100%;”
class=“ag-theme-balham”
[rowData]=“rowData | async”
[columnDefs]=“columnDefs”
rowSelection=“multiple”>

5

[JoaoCarimo]

how do i set up a control? perhaps its the control i am missing here

6

Please make sure that your schema is a valid JSON Schema. JSON Schema is a public standard which you can find here: https://json-schema.org/

In your schema you have a lot of properties related to angular grid. From a first look they should probably be part of a renderer.

Taking a step back: When I understand correctly, you want to render an angular grid. You will need to provide a custom renderer for that which will take the information provided by your schema and will render an appropriate angular grid. Your schema should describe your data, so it should probably include User Groups, Roles etc.

7

[JoaoCarimo]

Can you please provide me directions on how to implement a custom renderer?

8

We offer a registerRenderer action on the redux store. You can see it in use in our react-seed: jsonforms-react-seed/index.tsx at 985cd7c2588b97be0d600702652bfe57002de65c · eclipsesource/jsonforms-react-seed · GitHub

9

[JoaoCarimo]

Many thanks, i will give it a try, but then again, i have no experience