Allow custom rendering of fields and values

[josdejong]

This topic is (indirectly) discussed here and there already. This is an explicit issue to address this feature.

It would be great to allow custom rendering of both the field (property) and values. That would allow you for example to:

• Render a JSON schema title instead of the property name in a form (Upgrade to ajv@6 #635 (comment))
• Render your own dropdown or HTML output, render a map when having a geolocation, render a date picker or stuff like that in certain cases, etc.

The API and usage could look something like:

onRenderValue({ path, field, value, schema, onChange }) => {
  const html = document.createElement('INPUT')
  html.value = value
  html.onchange = function (event) {
    onChange(event.target.value)
  }
  
  return {
    html, 
    update: (value) => {
      html.value = value
    },
    destroy: () => { 
      // clean up any instantiated DOM stuff if needed
    }
  }
}

// onRenderField similar to onRenderValue

[Thaina]

Is there anything that don't make this feature possible?

[josdejong]

@Thaina you could hack into the editor and replace some of the code but I think that will be tricky.

[123survesh]

Hey @josdejong , can I give this feature a try?

[josdejong]

yes please :), thanks for your offer!

[123survesh]

Hi @josdejong , its been a while I told that I will try this feature out. I have been busy the past few months. Sorry I cannot take it up 😅 .

[josdejong]

No problem at all, thanks for the update 👍 . I hope all is well with you and your family.

[123survesh]

Thanks for asking, Yes we are doing well here. We have a strict quarantine in place, so we don't go out, except to buy necessary items. Hope its all well and good with you and your family as well.

[josdejong]

We're bound to home here too, tough no strict quarantine. It's going alright :).