Properties with same name

Hey, I’ve written an algorithm that takes a request body and transforms it into a JSON form. I have for example the following response body

{
   "traveller":{
      "address":{
         "city":"string",
         "country":"string",
         "street":"string",
         "zipCode":"string"
      },
      "email":"string",
      "firstName":"string",
      "lastName":"string",
      "nationality":"string",
      "visaApplication":"string"
   },
   "trip":{
      "begin":"2021-09-02",
      "city":"string",
      "country":"string",
      "end":"2021-09-02",
      "visaRequired":true
   }
}

which is transformed into the following schema

{
  "type": "object",
  "properties": {
    "city": {
      "type": "string"
    },
    "country": {
      "type": "string"
    },
    "street": {
      "type": "string"
    },
    "zipCode": {
      "type": "string"
    },
    "email": {
      "type": "string"
    },
    "firstName": {
      "type": "string"
    },
    "lastName": {
      "type": "string"
    },
    "nationality": {
      "type": "string"
    },
    "visaApplication": {
      "type": "string"
    },
    "begin": {
      "type": "string",
      "format": "date"
    },
    "end": {
      "type": "string",
      "format": "date"
    },
    "visaRequired": {
      "type": "boolean"
    }
  }
}

and following uischema

{
  "type": "HorizontalLayout",
  "elements": [
    {
      "type": "Group",
      "label": "traveller",
      "elements": [
        {
          "type": "Control",
          "label": "city",
          "scope": "#/properties/city"
        },
        {
          "type": "Control",
          "label": "country",
          "scope": "#/properties/country"
        },
        {
          "type": "Control",
          "label": "street",
          "scope": "#/properties/street"
        },
        {
          "type": "Control",
          "label": "zipCode",
          "scope": "#/properties/zipCode"
        },
        {
          "type": "Control",
          "label": "email",
          "scope": "#/properties/email"
        },
        {
          "type": "Control",
          "label": "firstName",
          "scope": "#/properties/firstName"
        },
        {
          "type": "Control",
          "label": "lastName",
          "scope": "#/properties/lastName"
        },
        {
          "type": "Control",
          "label": "nationality",
          "scope": "#/properties/nationality"
        },
        {
          "type": "Control",
          "label": "visaApplication",
          "scope": "#/properties/visaApplication"
        }
      ]
    },
    {
      "type": "Group",
      "label": "trip",
      "elements": [
        {
          "type": "Control",
          "label": "begin",
          "scope": "#/properties/begin"
        },
        {
          "type": "Control",
          "label": "city",
          "scope": "#/properties/city"
        },
        {
          "type": "Control",
          "label": "country",
          "scope": "#/properties/country"
        },
        {
          "type": "Control",
          "label": "end",
          "scope": "#/properties/end"
        },
        {
          "type": "Control",
          "label": "visaRequired",
          "scope": "#/properties/visaRequired"
        }
      ]
    }
  ]
}

as you can see, traveller and trip are two groups in the uischema that have properties that have the same name but have a different meaning, e.g. city in trip and city in traveller don’t mean the same thing. However, because in the schema object only one property with the same name is allowed, city and address will share the some properties in the data object of the realized form. For example, if I fill out city in the group traveller, city in the group trip will also be filled out.

Is there a way to have multiple same named properties in the schema or represent different groups in the schema?

Hi!

The JSON Schema models exactly how your eventual data object shall look like while the UI Schema is only concerned with the UI. Therefore if your schema only has one city property, you can’t have them “separated” in JSON Forms.

What you need to do is to restructure your JSON Schema a bit for example to accurately represent your data:

{
  "type": "object",
  "properties": {
    "traveller": {
      "type": "object",
      "properties": {
        "city": { "type": "string"}
      }
    },
    "trip": {
      "type": "object",
      "properties": {
        "city": { "type": "string"}
      }
    }
  }
}

In the UI Schema you can then refer to the city you want:

{
  "type": "Control",
  "label": "city",
  "scope": "#/properties/traveller/properties/city"
}