Novice help 🥶

[lynn1286]

Prerequisites

• [X] 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.