Hi I am seeking help to get name, lastname and age renderered in ui which is under nested objects.
i am able to render the id field with below data json but cant get rendered the name and other fields inside userdetails. I am trying to render it inside the table with this custom renderr for the array table renderer
{
id : "12",
address: [
{
roomNo : "345",
userDetails: {
"name" : "Ankit",
"lastname" : "Pal",
"age" : "NA"
}
}
]
}
I’m using jsonforms 2.5.2 with Angular
I’ve made a stackblitz for this with schema, uischema and data json for reference in the below stackblitz
i’m seeking help to get the number rendered in to the ui in a seperate column for table but couldnt see it getting rendered in ui . I am using custom component for table-renderer
This is actually a bug this shouldnt happen when i tried logging the routes and scoped schema noticed that it wasnt reading any of the scoped schemas for nested object anyways i fixed it thanks for looking
Hi @howdyAnkit ,
I’m glad you could solve your problem. In cae you are just starting out, I’d like to suggest using JsonForms 3.0, concretely the tag v3.1.0-alpha.1. This might fix the issue you had and also severely increased the performance of the angular renderers.
Thanks @lucas-koehler for mentioning also wanted to know the approach for one of below custom renderer
i want to build a custom renderer for a field let say for example firstname and lastname now this data comes speratley in backend. i want to map this to the schema json and uischema json. can you suggest me how can i achieve this and map this same data to custom renderer.
I’m assuming my firstname and lastname should have seperate schemas so that can bind together in custom ui but I cant think of a way how can i map in custom renderer should i apply this to value field in text ?
reading this again and i think i didnt explained the query above properly
I waant the firstname field and lastname field in a single fild as fullname in ui.
Hi @sdirix and @lucas-koehler
I am using jsonforms@3.1.0
Can you please help me render this data.json in to table. I am using this custom renderer and able to render data uptill now (https://github.com/eclipsesource/jsonforms/blob/master/packages/angular-material/src/other/table.renderer.ts)
now that i want to render some other data of below schema i have trouble rendering this nested scopedSchema data and cant find a way around this
{
user: [
{
basciInfo: [
{
"name" :"Ankit",
"lastname" : "Pal"
},
],
"sex" :"Male"
},
{
basicInfo: [
{
"name" :"NA",
"lastname" : "NA"
},
],
"sex" :"Female"
}
]
}
I am having trouble rendering the name and lastname in UI as this are nested array. and they come up as no Applicable renderer found when i try to bind the firstname to a input custom renderer it comes with input but data dosent get bind in the input for the table.
I am able to render the sex of a user easily without any changes
Please add more information as otherwise we are unable to help.
Thanks @sdirix fore replying please find the below attached schema and uischema
{
"definition": {
"items": {
"type": "object",
"properties": {
"user": {
"type": "array",
"items": {
"type": "object",
"properties": {
"contact": {
"type": "array",
"items": {
"type": "object",
"properties": {
"email": {
"type": "string"
},
"phoneNumber": {
"type": "string"
}
}
}
}
}
}
}
}
}
},
"type": "object",
"properties" : {
"userdata": {
"type" : "array",
"items": {
"$ref": "#/definitions/items"
}
}
}
}
UISCHEMA BELOW
{
"type": "ListWithDetail",
"scope" : "#/properties/userdata",
"options": {
"detail":{
"type" : "VerticalLayout",
"elements" : [
{
"type": "HorizontalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/user"
}
]
}
]
}
}
}
data.json
{
"user": [
{
"contact": [
{
"email" : "palankit",
"phoneNumber": "+91"
}
],
"sex" : "male"
}
]
}
Now the sex male get’s binded and rendererd in the custom renderer table
and but the nested structure data dosent get binded the whole code is similar to table custom renderer but having issues getting this email and phone number data rendererd and in the column input field it’s showing no renderer found
WARNING IN THE FIELD
No Applicable renderer found
In my view the path is not reaching there
Hi @howdyAnkit,
I don’t understand what you are trying to achieve. The JSON Schema does not seem to declare the sex property.
The off-the-shelf array/table renderers work fine
So if your custom renderer does not work, you should check what the difference is to the provided off-the-shelf-table renderer.
As you are running into a No Applicable renderer found error, some dispatched props do not fit together, i.e. the schema/uischema combination you are dispatching to for the nested props.
Edit: Adding a sex property to the JSON Schema like this
{
"definitions": {
"items": {
"type": "object",
"properties": {
"user": {
"type": "array",
"items": {
"type": "object",
"properties": {
"contact": {
"type": "array",
"items": {
"type": "object",
"properties": {
"email": {
"type": "string"
},
"phoneNumber": {
"type": "string"
}
}
}
},
"sex": {
"type": "string"
}
}
}
}
}
}
},
"type": "object",
"properties" : {
"userdata": {
"type" : "array",
"items": {
"$ref": "#/definitions/items"
}
}
}
}
also works fine with the off-the-shelf renderers
Thanks @sdirix
for replying this is the look we are trying to avoid. I purely want to use the table renderer component.
So that E-mail, Phone Number and Sex all come in same row . being the Email and Phone Number nested inside the object. they don’t appear in same line. but end up rendering Email and Phone Number on top of an existing table where as the Sex appears in normal line as normal Input.
I mostly think’s it’s due to code of getValidColumnProps which not able to go inside the nested fields and it just loops untill the root element such as sex which is at root of user. but since the contact is nested with array of objects it’s not able to deeply iterate throught it keys.
2nd Question
we also tried setting up array-renderer on top table renderer to make Email and Phone Number appear in same row. but the Email and phone Number are coming up as VerticalLayout instead of Horizontal Layout.
But since we are targeting user object which is itself an Array of objects for table renderer
like this
{
"type": "ListWithDetail",
"scope" : "#/properties/userdata",
"options": {
"detail":{
"type" : "VerticalLayout",
"elements" : [
{
"type": "HorizontalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/user"
}
]
}
]
}
}
}
Are there any suggestions how can we make the User And Phone Number as HorizontalLayout instead of vertical layout
Do you suggest that i use elements and options in the user ui-schema to make it render?
Fixed it thanks for checking