Allow JSON registration of custom ArrayTemplateField and ObjectTemplateField

[timkindberg]

Prerequisites

• I have read the documentation;
• In the case of a bug report, I understand that providing a SSCCE example is tremendously useful to the maintainers.

Description

Currently custom ArrayTemplateField and ObjectTemplateField components must be set via a function reference. This means you cannot use them in plain JSON.

Expected behavior

I'd like to register these like I do custom widgets/fields.

const table = (props) => { ...a component that renders a <table> with rows... };

const templateFields = { table };

const uiSchema = {
  "ui:ArrayTemplateField": "table"
}

render((
  <Form
    schema={schema}
    uiSchema={uiSchema}
    templateFields={templateFields} />
), document.getElementById("app"));

Actual behavior

Not possible, you must do this:

const table = (props) => { ...a component that renders a <table> with rows... };

const uiSchema = {
  "ui:ArrayFieldTemplate": table  // HAVE TO USE FUNCTION REFERENCE
}

render((
  <Form
    schema={schema}
    uiSchema={uiSchema} />
), document.getElementById("app"));

Version

1.8.0

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Please leave a comment if this is still an issue for you. Thank you.

[timkindberg]

bump

[heath-freenome]

@timkindberg in 5.x we provided a templates prop on Form that takes in any of the 4.x and a bunch of new 5.x templates. There will probably never be a way to specify a template implementation using JSON, but you can do it with fields and widgets. Unless what you want is to be able to register any kind of template with a name like you can for widgets and fields and reference it in the uiSchema. That is still not supported, but if you are willing to build the feature, then I can guide you through how to do it.

[mbalc]

bump, I also would like to see this feature come to life, as it seems registering templates by a custom names is not possible at the moment - unlike widgets and fields

[heath-freenome]

@mbalc Are you willing to implement this feature with guidance?

[selfesteemteam]

I was able to implement this in a simplistic manner by editing the js file that getTemplate.ts maps to. I simply check the type of uiOptions[name] and return templates[uiOptions[name]] if its a string instead of the normal behavior:

export default function getTemplate(name, registry, uiOptions = {}) {
    const { templates } = registry;
    if (name === 'ButtonTemplates') {
        return templates[name];
    }

    if (typeof uiOptions[name] === "string") {
        return templates[uiOptions[name]];
    } else if (typeof uiOptions[name] === "function") {
        return uiOptions[name];
    } else {
        return templates[name];
    }
}