Added `ui:*Template` properties #1152

loganvolkers · 2019-01-22T20:14:18Z

Reasons for making this change

Makes customizing templates for a form a more granular experience.

Resolves #1010

Checklist

I'm updating documentation
- I've checked the rendering of the Markdown text I've added
I'm adding or updating code
- I've added and/or updated tests
- I've updated docs if needed
- I've run npm run cs-format on my branch to conform my code to prettier coding style
I'm adding a new feature
- I've updated the playground with an example use of the feature

…CRLF endings to LF to stop Husky complaining.

loganvolkers · 2019-01-22T20:18:18Z

@epicfaace pull request for adding ui:template.

Would be interested in some feedback on the naming convention. Since an array template has both a SchemaField template and an ArrayField template nested inside, it wasn't possible to have a single ui:template property, as it is ambiguous which template needs to be overridden.

Instead I opted to follow the naming convention for overriding fields globally:

ui:FieldTemplate for all fields
ui:ArrayFieldTemplate for the array field subtemplates
ui:ObjectFieldTemplate for the object field subtemplates

I found this the most consistent with the current API. In the future it would be handy if the templating system could be consolidated in a way that a single ui:template field would make sense, but that's a substantial non-backwards-compatible undertaking.

This is I think the best compromise between allowing granular overriding of field templates and respecting existing behaviour and API design.

test/FieldTemplate_test.js

epicfaace · 2019-01-22T22:54:13Z

test/ObjectFieldTemplate_test.js

+        DescriptionField,
+      },
+    }).node;
+    sharedIts();
  });


Can you add a test in which a template is globally configured and a template is configured in ui:ObjectFieldTemplate so it has to override?

test/FieldTemplate_test.js

epicfaace · 2019-01-22T22:55:51Z

test/ArrayFieldTemplate_test.js

+            uiSchema,
+          }).node;
+        });
+        sharedIts();
      });


Can you add a test in which a template is globally configured and a template is configured in ui:ArrayFieldTemplate so it has to override?

epicfaace · 2019-01-22T22:56:53Z

test/ArrayFieldTemplate_test.js

+            uiSchema,
+          }).node;
+        });
+        sharedIts();
      });


Can you add a test in which a template is globally configured and a template is configured in ui:ArrayFieldTemplate so it has to override?

package.json

epicfaace · 2019-01-22T23:10:46Z

ui:FieldTemplate for all fields

ui:ArrayFieldTemplate for the array field subtemplates

ui:ObjectFieldTemplate for the object field subtemplate

@loganvolkers that works. What I'm thinking, though, is what if we have our uiSchema in JSON and want to reference "ui:FieldTemplate", "ui:arrayFieldTemplate", or "ui:ObjectFieldTemplate" through a string, not a React component? The way it's done right now for ui:widget and ui:field is through the widgets and fields props on the Form, respectively.

Is the only way to do this to define fieldTemplates, arrayFieldTemplates, and objectFieldTemplates props on the Form as well? That seems like it will clutter the props a lot, especially given that we already have props called FieldTemplate, ArrayFieldTemplate, and ObjectFieldTemplate.

Here's my proposal. On the other hand, if we just use ui:template for all three (and don't let FieldTemplate be customized for array fields), then we have a nice prop called templates that we can use for this purpose. If we really want to customize FieldTemplate for array fields, maybe we can allow ui:FieldTemplate just for array fields, but it will also read from the templates prop.

Any thoughts?

loganvolkers · 2019-01-23T01:07:12Z

What I'm thinking, though, is what if we have our uiSchema in JSON and want to reference "ui:FieldTemplate", "ui:arrayFieldTemplate", or "ui:ObjectFieldTemplate" through a string
then we have a nice prop called templates that we can use for this purpose

I agree with this. templates could be added to the registry and use the same capabilities that exist for string-referenced widgets and fields.

e.g. for an object field:

<Form
  {...props}
  templates={{"tabs":MyTabTemplate}}
  uiSchema={{"ui:ObjectFieldTemplate":"tabs"}}
/>

and don't let FieldTemplate be customized for array fields

This is a non-starter for me. The goal is to provide UI customization and there is a lot of template-related stuff in the FieldTemplate, especially for Object fields with the new oneOf support.

epicfaace · 2019-01-23T16:29:32Z

@loganvolkers that sounds good, using ui:ArrayFieldTemplate, ui:FieldTemplate, and ui:ObjectFieldTemplate and then adding support for the templates prop in a later PR. For now, can you add the additional tests I mentioned and update the docs? -- and then I think it'll be ready to be merged.

epicfaace · 2019-02-25T22:20:48Z

@loganvolkers will you have time to make these changes? I'd like to merge this PR

epicfaace · 2019-03-16T20:40:24Z

@loganvolkers just bumping this!

DavidHenri008 · 2019-05-09T19:08:49Z

@loganvolkers any update on this? This looks really promising.

…chema-form into ui-templates

loganvolkers · 2019-05-29T18:10:11Z

Working on wrapping this up.

I just made some progress on merging the latest to bring this branch up to speed, but there are still some changes requested for tests and docs.

loganvolkers · 2019-05-29T18:27:39Z

@epicfaace can you please review? I believe this should meet your requests.

epicfaace · 2019-05-30T15:22:51Z

Thanks @loganvolkers looks good -- can you update the docs?

loganvolkers · 2019-07-12T00:56:09Z

@epicfaace merged latest changes and updated docs. Please take a look.

epicfaace · 2019-07-13T17:56:05Z

Looks good -- thanks!

timkindberg · 2019-08-07T18:13:20Z

I agree with this. templates could be added to the registry and use the same capabilities that exist for string-referenced widgets and fields.

Was this piece implemented?

loganvolkers · 2019-08-07T18:27:09Z

No, it was not.

…

On Wed, Aug 7, 2019, 11:13 AM Tim Kindberg, ***@***.***> wrote: I agree with this. templates could be added to the registry and use the same capabilities that exist for string-referenced widgets and fields. Was this piece implemented? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1152>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAI2PXQADHOXBR7FODSF7H3QDMGETANCNFSM4GRVX3ZA> .

epicfaace · 2019-08-07T19:50:05Z

I agree with this. templates could be added to the registry and use the same capabilities that exist for string-referenced widgets and fields.

Was this piece implemented?

It's now being tracked in #1387, though.

LV: Added ui:*Template properties for the various templates. Fixed …

ef36aa4

…CRLF endings to LF to stop Husky complaining.

epicfaace requested changes Jan 22, 2019

View reviewed changes

Fixed typeo in test/FieldTemplate_test.js

b577b0f

epicfaace added the awaiting changes label Jan 23, 2019

epicfaace mentioned this pull request Jan 25, 2019

Adding a block of text or image #1146

Closed

duranmla mentioned this pull request Apr 24, 2019

Research using JSON Schema for tools definitions debtcollective/disputes#7

Closed

Merge tag 'v1.5.0' of https://github.com/mozilla-services/react-jsons…

293038c

…chema-form into ui-templates

Added tests for overriding

8673da0

loganvolkers added 4 commits July 11, 2019 17:34

Merge branch 'master' into ui-templates

0c16070

Update advanced-customization.md

86e9c44

Update advanced-customization.md

fd4acec

Update advanced-customization.md

624894f

epicfaace merged commit 310b8a5 into rjsf-team:master Jul 13, 2019

snyk-bot mentioned this pull request Jan 30, 2020

[Snyk] Upgrade react-jsonschema-form from 1.2.0 to 1.8.1 preset-io/superset#11

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Added `ui:*Template` properties #1152

Added `ui:*Template` properties #1152

loganvolkers commented Jan 22, 2019

loganvolkers commented Jan 22, 2019

epicfaace Jan 22, 2019

loganvolkers May 29, 2019

epicfaace Jan 22, 2019

loganvolkers May 29, 2019

epicfaace Jan 22, 2019

loganvolkers May 29, 2019

epicfaace commented Jan 22, 2019 •

edited

loganvolkers commented Jan 23, 2019

epicfaace commented Jan 23, 2019

epicfaace commented Feb 25, 2019

epicfaace commented Mar 16, 2019

DavidHenri008 commented May 9, 2019

loganvolkers commented May 29, 2019

loganvolkers commented May 29, 2019

epicfaace commented May 30, 2019

loganvolkers commented Jul 12, 2019

epicfaace commented Jul 13, 2019

timkindberg commented Aug 7, 2019 •

edited

loganvolkers commented Aug 7, 2019 via email

epicfaace commented Aug 7, 2019

Added ui:*Template properties #1152

Added ui:*Template properties #1152

Conversation

loganvolkers commented Jan 22, 2019

Reasons for making this change

Checklist

loganvolkers commented Jan 22, 2019

epicfaace Jan 22, 2019

Choose a reason for hiding this comment

loganvolkers May 29, 2019

Choose a reason for hiding this comment

epicfaace Jan 22, 2019

Choose a reason for hiding this comment

loganvolkers May 29, 2019

Choose a reason for hiding this comment

epicfaace Jan 22, 2019

Choose a reason for hiding this comment

loganvolkers May 29, 2019

Choose a reason for hiding this comment

epicfaace commented Jan 22, 2019 • edited

loganvolkers commented Jan 23, 2019

epicfaace commented Jan 23, 2019

epicfaace commented Feb 25, 2019

epicfaace commented Mar 16, 2019

DavidHenri008 commented May 9, 2019

loganvolkers commented May 29, 2019

loganvolkers commented May 29, 2019

epicfaace commented May 30, 2019

loganvolkers commented Jul 12, 2019

epicfaace commented Jul 13, 2019

timkindberg commented Aug 7, 2019 • edited

loganvolkers commented Aug 7, 2019 via email

epicfaace commented Aug 7, 2019

Added `ui:*Template` properties #1152

Added `ui:*Template` properties #1152

epicfaace commented Jan 22, 2019 •

edited

timkindberg commented Aug 7, 2019 •

edited