search

koumoul-dev / vuetify-jsonschema-form

Create beautiful and low-effort forms that output valid data. Published on npm as @koumoul/vjsf.
https://koumoul-dev.github.io/vuetify-jsonschema-form/latest/
MIT License
538 stars 154 forks source link

Allow specifying order of elements in form #187

Open dkumor opened 3 years ago

dkumor commented 3 years ago

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

GalvinGao commented 3 years ago

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.