React-jsonschema-form: Ordering of nested elements

[gmwishwas]

Is there a way to create UI order on nested elements when ordering is required at both the parent and child ?

For Eg:

In the nested example on the playground, If I had to wanted to get the tasks before and title and also tasks->details before tasks->title and if title had mainTitle and subTitle which also had to be ordered, Can someone please give an example ?

JSON Schema:

{ "title": "A list of tasks", "type": "object", "required": [ "title" ], "properties": { "title": { "type": "string", "title": "Task list title" }, "tasks": { "type": "array", "title": "Tasks", "items": { "type": "object", "required": [ "title" ], "properties": { "title": { "type": "object", "required": [ "main" ], "properties": { "main": { "type": "string", "description": "Enter the main title" }, "subtitle": { "type": "string", "description": "Enter the subtitle" } } }, "details": { "type": "string", "title": "Task details", "description": "Enter the task details" }, "done": { "type": "boolean", "title": "Done?", "default": false } } } } } }

FormData:

{ "title": "My current tasks", "tasks": [ { "title": { "main": "main title" }, "details": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.", "done": true }, { "title": { "main": "main title" }, "details": "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur", "done": false } ] }

[glasserc]

I'm not 100% sure I understand what order you want, but I was able to order the items within the nested array using:

{
  "ui:order": [
    "tasks",
    "title"
  ],
  "tasks": {
    "items": {
      "ui:order": [
        "details",
        "title",
        "done"
      ]
    }
  }
}

Note the use of "items" for array items. This isn't obvious, but it is at least documented in https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object.

[gmwishwas]

I wanted to order items at the same level. For Eg. If tasks had _tasksChild1_ which had the details, title and done and also had _tasksChild2_ with name and date, I want the _tasksChild2_ before _tasksChild1_ and also the order inside of _tasksChild1_. Please note : In this case the root for both _ui:order_ elements will be tasks.

[glasserc]

I still don't understand what you're trying to do. It sounds like you want to order two different tasks, but I don't think that's what you want to do. Maybe we can choose a different example. How about this JSON Schema?

{
  "title": "A registration form",
  "type": "object",
  "properties": {
    "address": {
      "title": "Address",
      "type": "object",
      "properties": {
        "country": {
          "type": "string",
          "title": "Country"
        },
        "street": {
          "type": "string",
          "title": "Street Address"
        }
      }
    },
    "name": {
      "title": "Name",
      "type": "object",
      "properties": {
        "familyName": {
          "type": "string",
          "title": "Family name"
        },
        "firstName": {
          "type": "string",
          "title": "First name"
        }
      }
    }
  }
}

In this schema, all the fields at each level and sublevel are ordered alphabetically, but they're backwards of what I would expect. So to reverse the order of the "name" fields, I'd use a uiSchema of:

{
  "name": {
    "ui:order": [
      "firstName",
      "familyName"
    ]
  }
}

To reorder the fields within "address", I'd do:

{
  "address": {
    "ui:order": [
      "street",
      "country"
    ]
  }
}

To cause the name to appear before the address, you would use:

{
  "ui:order": [
    "name",
    "address"
  ]
}

Putting it all together, I have:

{
  "ui:order": [
    "name",
    "address"
  ],
  "address": {
    "ui:order": [
      "street",
      "country"
    ]
  },
  "name": {
    "ui:order": [
      "firstName",
      "familyName"
    ]
  }
}

(Playground link.) Does this help?

[gmwishwas]

This is the example I am looking at.

I would like the order to be

location, campaigns

Inside campaigns : campaign name, campaign type and tags

Inside campaign / tags: columnName, tagValues

For the later two cases, campaigns will be the root of both

{
  "$schema": "http://json-schema.org/draft-04/schema#",
  "type": "object",
  "title": "Ad Campaign",
  "properties": {
    "location": {
      "description": "Campaign Location",
      "type": "string",
      "enum": [
        "CA",
        "MA",
        "NY"
      ]
    },
    "campaigns": {
      "minItems": 1,
      "description": "Campaigns for generating opportunities",
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "campaignName": {
            "type": "string"
          },
          "campaignType": {
            "type": "string"
          },
          "tags": {
            "type": "array",
            "items": {
              "type": "object",
              "properties": {
                "tagValues": {
                  "description": "Values of the tag",
                  "type": "array",
                  "items": {
                    "type": "string"
                  }
                },
                "columnName": {
                  "description": "Column Name / Key of the tag",
                  "type": "string"
                }
              }
            }
          }
        }
      }
    }
  }
}

and

{
    "campaigns": {
      "items": {
        "ui:order": [
          "campaignType",
          "campaignName",
          "tags",
          "*"
        ]
      }
    },
     "campaigns": {
      "items": {
        "tags":{
          "items": {
        "ui:order": [
          "columnName",
          "tagValues",
          "*"
        ]
      }
        }
      }
    },
    "ui:order": [
      "location",
      "campaigns",
      "*"
    ]
  }

[glasserc]

Your uiSchema isn't valid JSON because you repeat a key (campaigns). Try this:

{
  "campaigns": {
    "items": {
      "ui:order": [
        "campaignType",
        "campaignName",
        "tags",
        "*"
      ],
      "tags": {
        "items": {
          "ui:order": [
            "columnName",
            "tagValues",
            "*"
          ]
        }
      }
    }
  },
  "ui:order": [
    "location",
    "campaigns",
    "*"
  ]
}

[gmwishwas]

Thanks for the help @glasserc ! This works. I had tried it under the same key but had not tried it without items.