#2870 Add ability to pass in an array variable or template for dropdown field options #2915

BALEHOK · 2022-03-09T19:19:41Z

Relates to #2870

Array of options with a variable (preview):

Array of options with a variable (rendered):

Set option labels (@options holds the indexes of the source array and its values):

Pass in an array variable containing all the option strings
Pass in an object variable, using the keys as enum and the values as enumNames in the json-schema (maybe this should be opposite with how keys/values are used?)
Use a (string) variable for one of the options
Set a template string for one of the options
Allow hard-coding text for separate option-value and display-label (enum vs enumName in json-schema) for an individual option
Allow passing in variables for the value and label for an individual option
Allow setting string templates for the value and label for an individual option
Allow passing in two array variables at the top level, one for enum and one for enumNames, with the array order dictating which value goes to which name.

BLoe · 2022-03-10T16:00:58Z

src/components/formBuilder/preview/SelectWidgetPreview.tsx

+      <FormGroup>
+        <FormLabel>{props.schema.title}</FormLabel>
+        <div className="text-muted form-text">
+          Dropdown options defined by a variable are not displayed in preview.


Maybe we could show a disabled input here with the variable name or something to indicate in the preview which variable is wired up, like when you put a variable in one of the options?

Looks great, thanks!

BALEHOK · 2022-03-11T13:45:04Z

src/components/formBuilder/edit/FieldEditor.tsx

+          />
+
+          <SchemaField
+            label="Option labels"


The number of items here not necessarily should be equal to the number of options, RJSF is fine with that.

…ble-support

BLoe · 2022-03-11T14:05:55Z

src/components/formBuilder/edit/FieldEditor.tsx

+          <SchemaField
+            label="Options"
+            name={getFullFieldName("enum")}
+            schema={{
+              type: "array",
+              items: {
+                type: "string",
+              },
+            }}
+          />


Should the Options field be required here?

This brings us to our discussion of a required array field. Technically I can leave the field blank and see a dropdown with no options.
Let's first define what a "required array field" means. Is an empty array okay?
Then let's think if we need to mark this field as required.

Ah yeah, because you default it to an empty array in the schema already, right?

BLoe · 2022-03-11T14:08:29Z

src/components/formBuilder/preview/SelectWidgetPreview.tsx

+    // @ts-expect-error -- enumNames is a valid property of the RJSF schema.
+    const { enumNames: labels } = props.schema;


It's odd that the schema type from the json schema library doesn't have the enumNames field. Do you know if we're using an out of date version or something like that?

The spec for json schema also doesn't mention it 🤔

https://datatracker.ietf.org/doc/html/draft-handrews-json-schema-validation-01

Apparently it was a proposal at some point that was rejected from being added to the spec. I found this issue thread of people discussing it:
rjsf-team/react-jsonschema-form#532

Should we use the proposed oneOf implementation from that thread as opposed to enumNames? I understand this is supported by react-jsonschema-form, but what are the implications here if we deviate from the core json schema spec? Does this affect anything else like yup validation or anything like that? Are we blocking ourselves from using other tools/libraries in the future that only support the spec? Just want to be thorough here before we make the decision to diverge from the core spec... Also, it will be annoying to handle type issues with this going forward.

Good one, I'll check this!

@BALEHOK Ben and I confirmed that this approach works in RJSF (PR was merged in here: rjsf-team/react-jsonschema-form#581)

We should use the const keyword form:

properties: choiceField: oneOf: - const: a title: Choice A - const: b title: Choice B

Yup: RJSF doesn't use Yup (the do their own validation, probably directly vs. the JSON Schema)

Considerations:

If the form definition is currently using enum (is from the workshop), should be easy to convert on mount?

If the existing form uses enum + enumNames, you can either convert on mount, or show the edit in workshop message

BLoe · 2022-03-11T14:47:36Z

src/components/formBuilder/preview/SelectWidgetPreview.tsx

+      <FormGroup>
+        <FormLabel>{props.schema.title}</FormLabel>
+        <div className="text-muted form-text">
+          Dropdown options defined by a variable are not displayed in preview.


Looks great, thanks!

…ble-support

twschiller · 2022-03-14T19:53:42Z

Overall looking good. Found a couple bugs:

Getting a preview error when switching the initial field to a dropdown with labels

If you've passed a variable value, you can't switch from Dropdown to Dropdown with Labels

…ble-support

twschiller · 2022-03-15T21:20:36Z

src/components/formBuilder/edit/FormEditor.test.tsx

-      userEvent.click(textOption);
-    });
+    await selectSchemaFieldType(
+      `${RJSF_SCHEMA_PROPERTY_NAME}.schema.properties.${fieldName}.default`,


This should probably be be using joinName to correctly handle spaces/special characters in field names (unless we block them on the entry side)

Hmm, this is a test file, do you think it can be a problem in the test?

Oops, didn't notice the file name! This is perfectly ok here

twschiller

Thanks for the tests! I noticed one spot that might have problems with some field names. But not a blocker to getting this merged in

…ble-support

BALEHOK added 2 commits March 9, 2022 16:34

2870 using ArrayWidget for dropdown options in the Form Builder

2daaddc

2870 fixing preview

e96fa49

BALEHOK requested a review from BLoe March 9, 2022 19:21

BLoe reviewed Mar 10, 2022

View reviewed changes

twschiller added page editor editor parity labels Mar 10, 2022

2870 Pull fields and widgets from BS4 theme

e16575b

BALEHOK requested a review from BLoe March 11, 2022 13:41

BALEHOK commented Mar 11, 2022

View reviewed changes

BALEHOK requested a review from twschiller March 11, 2022 13:45

Merge remote-tracking branch 'origin/main' into feature/2870-dd-varia…

431b87b

…ble-support

BLoe reviewed Mar 11, 2022

View reviewed changes

BALEHOK added 5 commits March 14, 2022 15:03

Merge remote-tracking branch 'origin/main' into feature/2870-dd-varia…

37f5531

…ble-support

2870 Dropdown with labels

de665d2

2870 tests

5be51ed

2870 fixing types

16deb54

2870 fixing types

d82da8c

2870 Fixing default and no option errors

d335cb8

twschiller added this to the 1.5.7 milestone Mar 15, 2022

BALEHOK added 2 commits March 15, 2022 14:35

Merge remote-tracking branch 'origin/main' into feature/2870-dd-varia…

cb408b7

…ble-support

2870 Dropdown text option tests

5761b04

twschiller assigned BALEHOK Mar 15, 2022

BALEHOK added 2 commits March 15, 2022 20:40

2870 Enable var in Dropdown with labels

573b231

2870 removing options mapping

d9ba8b3

BALEHOK force-pushed the feature/2870-dd-variable-support branch from ee5f609 to d9ba8b3 Compare March 15, 2022 19:50

BALEHOK added 3 commits March 15, 2022 20:58

Merge remote-tracking branch 'origin/main' into feature/2870-dd-varia…

8e0975c

…ble-support

2870 Fixing merge conflicts

f145e93

2870 linting

da2c141

twschiller reviewed Mar 15, 2022

View reviewed changes

twschiller approved these changes Mar 15, 2022

View reviewed changes

Merge remote-tracking branch 'origin/main' into feature/2870-dd-varia…

02b25da

…ble-support

BALEHOK enabled auto-merge (squash) March 15, 2022 21:31

BALEHOK merged commit dda063e into main Mar 15, 2022

BALEHOK deleted the feature/2870-dd-variable-support branch March 15, 2022 21:35

fregante mentioned this pull request Jan 22, 2023

Drop unused code #5067

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

#2870 Add ability to pass in an array variable or template for dropdown field options #2915

#2870 Add ability to pass in an array variable or template for dropdown field options #2915

BALEHOK commented Mar 9, 2022 •

edited

Loading

BLoe Mar 10, 2022

BLoe Mar 11, 2022

BALEHOK Mar 11, 2022

BLoe Mar 11, 2022

BALEHOK Mar 11, 2022 •

edited

Loading

BLoe Mar 11, 2022 •

edited

Loading

BALEHOK Mar 14, 2022

BLoe Mar 11, 2022

BLoe Mar 11, 2022

BALEHOK Mar 11, 2022

twschiller Mar 13, 2022 •

edited

Loading

BLoe Mar 11, 2022

twschiller commented Mar 14, 2022

twschiller Mar 15, 2022 •

edited

Loading

BALEHOK Mar 15, 2022

twschiller Mar 15, 2022

twschiller left a comment

		// @ts-expect-error -- enumNames is a valid property of the RJSF schema.
		const { enumNames: labels } = props.schema;

#2870 Add ability to pass in an array variable or template for dropdown field options #2915

#2870 Add ability to pass in an array variable or template for dropdown field options #2915

Conversation

BALEHOK commented Mar 9, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

BALEHOK Mar 11, 2022 • edited Loading

Choose a reason for hiding this comment

BLoe Mar 11, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

twschiller Mar 13, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

twschiller commented Mar 14, 2022

twschiller Mar 15, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

twschiller left a comment

Choose a reason for hiding this comment

BALEHOK commented Mar 9, 2022 •

edited

Loading

BALEHOK Mar 11, 2022 •

edited

Loading

BLoe Mar 11, 2022 •

edited

Loading

twschiller Mar 13, 2022 •

edited

Loading

twschiller Mar 15, 2022 •

edited

Loading