vuetify-jsonschema-form icon indicating copy to clipboard operation
vuetify-jsonschema-form copied to clipboard

Allow specifying order of elements in form

Open dkumor opened this issue 3 years ago • 1 comments

Would it be reasonable to request that a custom "x-order": ["prop1","prop2"] to be added to objects? That way the desired order of object fields in the form can be clearly specified.

I think this is a feature request on top of #146 - in my case the schema is stored and parsed server-side, which does not preserve order of json keys when sent to the frontend. As requested, I am posting this in a separate issue.

Originally posted by @dkumor in https://github.com/koumoul-dev/vuetify-jsonschema-form/issues/146#issuecomment-756373366

dkumor avatar Jan 07 '21 22:01 dkumor

Sorry but I'm currently not able to file a PR. The one may insert the code below between L168-L169 in lib/mixins/ObjectContainer.js

if (this.fullSchema['x-order']) {
  this.fullSchema.properties.sort((a, b) => {
    const indexA = this.fullSchema['x-order'].indexOf(a.key)
    const indexB = this.fullSchema['x-order'].indexOf(b.key)
    if (indexA === -1 || indexB === -1) return 0
    return indexA - indexB
  })
}

and afterwards specify the order you wish for all keys in the x-order property of the schema. It should work now. I'm building this for the Other... text-field when the user tries to select from a dropdown but found no desired result and they wish to specify the value by themselves.

Hope this helps.

GalvinGao avatar Feb 13 '21 16:02 GalvinGao