Novice help 🥶

[lynn1286]

Prerequisites

• I have read the documentation

What theme are you using?

antd

What is your question?

I'm using the @rjsf/antd library and I have the following problems that I can't solve:

1. Does the form support landscape layout? I tried configuring formContext and the effect was not very satisfactory

formContext={{
    descriptionLocation: 'tooltip',
    readonlyAsDisabled: false,
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
}}

2. What should I do to change the drop-down selection interactive mode in array append mode to multi-select box interactive mode?

 "special_feature": {
      "title": "Additional Features",
      "description": "An additional text field where you can indicate any additional relevant product information.",
      "examples": ["max number of images 36,  Operating Time 6 hours"],
      "type": "array",
      "minItems": 1,
      "minUniqueItems": 1,
      "maxUniqueItems": 62,
      "selectors": ["marketplace_id", "language_tag"],
      "items": {
        "type": "object",
        "required": ["language_tag", "marketplace_id", "value"],
        "properties": {
          "value": {
            "title": "Special Features",
            "description": "Provide any special features an item has that distinguish it from other, comparable products",
            "editable": true,
            "hidden": false,
            "examples": ["Corded"],
            "type": "string",
            "minLength": 0,
            "maxLength": 500,
            "maxUtf8ByteLength": 2000,
            "anyOf": [
              {
                "type": "string"
              },
              {
                "type": "string",
                "enum": [
                  "Dust Resistant",
                  "Eco-Friendly",
                  "Fade Resistant",
                  "Flame Resistant",
                  "Foldable",
                  "Lightweight",
                  "Tear Resistant",
                  "UV Resistant",
                  "Washable",
                  "Water Resistant",
                  "Waterproof",
                  "Weather Resistant",
                  "Wrinkle Resistant"
                ],
                "enumNames": [
                  "Dust Resistant",
                  "Eco-Friendly",
                  "Fade Resistant",
                  "Flame Resistant",
                  "Foldable",
                  "Lightweight",
                  "Tear Resistant",
                  "UV Resistant",
                  "Washable",
                  "Water Resistant",
                  "Waterproof",
                  "Weather Resistant",
                  "Wrinkle Resistant"
                ]
              }
            ]
          },
          "language_tag": {
            "$ref": "#/$defs/language_tag"
          },
          "marketplace_id": {
            "$ref": "#/$defs/marketplace_id"
          }
        },
        "additionalProperties": false
      }
    }

The above data rendering interface is as follows 😭:

Actually I want this 🤣:

[nickgros]

@lynn1286 I don't know how much I can help with your first question, as I'm not familiar with how antd lets you style their components, and how much our formContext integration supports. If you need more fine-grained control of styles and layout, you could provide custom templates. I would recommend looking at the templates in @rjsf/antd and @rjsf/core as starting points and iterating from there until you have what you want.

For your second question, have you tried using the CheckboxesWidget? We have a playground example (see the checkboxes property). Though you may need to create a custom widget to support your 'custom value' functionality, but you could start with the CheckboxesWidget implementation as a foundation.