Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Docs should have examples for radio / select / checkboxes using oneOf and const instead of enum and enumNames #1754

Closed
1 task done
jnachtigall opened this issue May 15, 2020 · 2 comments

Comments

@jnachtigall
Copy link
Contributor

jnachtigall commented May 15, 2020

Prerequisites

Description

The docs seem to concentrate on using enum and json-schema non-compliant enumNames for creating radio, select or checkboxes. A compliant way seems to be to use oneOf (anyOf) and const

Would be great if there were some examples for this like the following:

    radioExample: {
      type: "number",
      title: "radio title",
      description: "Using const",
      oneOf: [
        { const: 1, title: "One" },
        { const: 2, title: "2" },
        { const: 3, title: "Three" }
      ]
    },
    radioExample2: {
      type: "number",
      title: "radio2 title",
      description: "Using enum",
      oneOf: [
        {
          type: "number",
          title: "One",
          enum: [1]
        },
        {
          type: "number",
          title: "2",
          enum: [2]
        },
        {
          type: "number",
          title: "Num 3",
          enum: [3]
        }
      ]
    },

and

const uiSchema = {
  radioExample: {
    "ui:widget": "radio",
  },
  radioExample: {
    "ui:widget": "radio",
  }
};

Using something like this can be preferred as it as a clear value attribute whereas the enums alone can result in special characters in the value in the html.

Same for checkboxes where an example like the following would be great:

    "selectboxesExample2": {
      "title": "Select-Boxes (Multi-Select with several checkboxes) Titel",
      "type": "array",
      "uniqueItems": true,
      "items": {
        "type": "number",
        "anyOf": [
          {
            "const": 1,
            "title": "One"
          },
          {
            "const": 2,
            "title": "2"
          },
          {
            "const": 3,
            "title": "Three"
          }
        ]
      }
    },

const uiSchema = {
  selectboxesExample: {
    "ui:widget": "checkboxes"
  }
}

at the moment there's only this as example

    selectboxesExample: {
      type: "array",
      title: "Select boxes, that is multiple checkboxes",
      items: {
        type: "string",
        enum: [
          "A Checkbox1",
          "A Checkbox2",
          "A Checkbox3",
          "A Checkbox4"
        ]
      },
      uniqueItems: true
    }

These should be in the docs somewhere I could only find these in the PR at #581 Especially, with const I find the schema very readable and clear.

PS
what I find strange is that there's no working example for using oneOf (or anyOf) using a select dropdown. This renders as number, but maybe I am doing it wrong:

    "selectExample": {
      "title": "Should render a Select Dropdown but renders a Number widget",
      "type": "array",
      "uniqueItems": true,
      "items": {
        "type": "number",
        // could also be "oneOf":
        "anyOf": [
          {
            "const": 1,
            "title": "One"
          },
          {
            "const": 2,
            "title": "2"
          },
          {
            "const": 3,
            "title": "Three"
          }
        ]
      }
    },

EDIT: Forget the PS part. It works with (although, which should also be added to the docs):

      "selectExample": {
        "title": "a select with const",
        "type": "number",
        "oneOf": [
          {
            "const": 1,
            "title": "One"
          },
          {
            "const": 2,
            "title": "2"
          },
          {
            "const": 3,
            "title": "Three"
          }
        ]
      },
@jnachtigall
Copy link
Contributor Author

I know there's https://react-jsonschema-form.readthedocs.io/en/latest/usage/single/#alternative-json-schema-compliant-approach but it only gives an example for a select (not radio or checkboxes), also it does not use the shorter const

@stale
Copy link

stale bot commented May 15, 2022

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.

@stale stale bot added the wontfix label May 15, 2022
@stale stale bot closed this as completed May 29, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants