Use JSONArray instead of JSONObject in "properties" to preserve form order

[rahulpsd18]

Hi, this is a great tool, thank you for creating it :blush:

I am having an issue with my form elements being rendered not in the order I set them in the JSON. I am getting the JSON schema over HTTP and so the properties object is automatically rearranged and are not in the order I want them to be in.

I am setting properties on server as:

{
  //...id,type,title,description
  "properties": { 
    "username": {...}, 
    "password": {...}, 
    "somethingElse1": {...},
    "somethingElse2": {...},
  }
}

but getting it on client as:

{
  //...id,type,title,description
  "properties": { 
    "somethingElse2": {...},
    "username": {...}, 
    "somethingElse1": {...},
    "password": {...}, 
  }
}

This is expected as the properties field is JSONObject and as per the JSON specification at JSON.org:

An object is an unordered set of name/value pairs

and so JSON libraries are free to rearrange the order of the elements as they see fit.

Could we maybe store this data in properties as JSONArray instead of JSONObject?

If there is any other way to do this which I missed out in the documentation, please ignore this and point me in the right direction. Thank you!

[duan602728596]

This is the case, the form's configuration file is subject to the schema specification, that is, the value of the form, using schema validation is no problem. This is why it is a JSONObject. Your question, my suggestion is to convert it to a string to pass. In our project, we do the same.

[rahulpsd18]

In that case, could we add a new custom attribute $UIorder: number or something and tweak the library to render the UI in the order (value) received.

The issue is I don't want to JSON.parse the data on the client-side again, as I do it already on the server-side before sending it over HTTP to make sure valid JSON is being sent.

E.g.:

{
  //...id,type,title,description
  "properties": { 
    "username": {
      "id": "$root/properties/username",
      "type": "string",
      "title": "Username",
      "$UIorder": 1    // <-- Pass the order here
    }, 
    "password": {
      ..., 
      "$UIorder": 3, 
      ...
    }, 
    "somethingElse1": {
      ..., 
      "$UIorder": 4, 
      ...
    },
    "somethingElse2": {
      ..., 
      "$UIorder": 2, 
      ...
    },
  }
}

Then maybe when you render the elements, you could order it according to the $UIorder attribute received.

The render order for the above example would be: username > somethingElse2 > password > somethingElse1

I haven't gone through the codebase yet and so don't know how correct or achievable this is. So please ignore if this is a silly suggestion. We can discuss alternative ways to achieve this.

[ShubhamKhandare]

Yes, We need something like this ! I came across same issue and for our project stringifying json is not valid solution because in that case we will need to take care of parsing it on both client and server end.

We need better solution for this !

[duan602728596]

@rahulpsd18 @ShubhamKhandare Added $order to sort the component's rendering order.https://github.com/duan602728596/antd-schema-form/commit/ee8bed2745e7f1771d7443bf628d552f94713b1a#diff-f743a860d04348765588d643ca74288dR44