Add textarea in Query Parameter of Swagger

Question

I am new to swagger. Currently, I am using swagger ui version v2.1.4. My API consists query parameters. Into that one parameter accepts JSON body. I want to show this parameter into textarea. Currently, it showing in the input tag . also, I want to display Parameter content type below that textarea. How I do that please help me?

Answer 1

In the current swagger 2.0 specification, you can not use complex values as query parameters. They can be primitives or arrays of primitive values. You can find out more from the specification directly:

https://github.com/OAI/OpenAPI-Specification/blob/master/versions/2.0.md#parameter-object

As this has been a commonly requested feature, it will be supported in the next version of the specification, but the feature will not be backported to the swagger 2.0 tooling.

Answer 2

add format in describing parameters eg:

parameters:
  - name: key
    type: string
    in: query
    format: textarea

add custom plugin when init swagger-ui

       // Custom plugin that adds extra stuff
       const TextAreaPlugin = function() {
           return {
               wrapComponents: {
                   // add text above InfoContainer - same effect as above title
                   JsonSchema_string: (Original, runtime) => (props) => {
                       var React = runtime.React,
                           schema = props.schema || {},
                           errors = props.errors || {},
                           format = schema.format || "",
                           isDisabled = props.disabled;

                        errors = errors.toJS ? errors.toJS() : []

                       function handleOnChange(e) {
                           const inputValue = e.target.value;

                           props.onChange(inputValue)
                       }

                       if (format == "textarea") {
                           return React.createElement("div", null,
                                   React.createElement("textarea", {
                                       title: errors.length ? errors : "",
                                       className: errors.length ? "invalid" : "",
                                       value: props.value,
                                       disabled: isDisabled,
                                       onChange: handleOnChange
                                   })
                           )
                       }

                       return React.createElement(Original, props);
                   },
               }
           }
       };

       // Begin Swagger UI call region
        var ui = SwaggerUIBundle({
            url: "./swagger.json",
            dom_id: '#swagger-ui',
            deepLinking: true,
            presets: [
                SwaggerUIBundle.presets.apis,
                SwaggerUIStandalonePreset
            ],
            plugins: [
                TextAreaPlugin,
                SwaggerUIBundle.plugins.DownloadUrl
            ],
            layout: "StandaloneLayout"
        });

Answer 3

Objects as query parameters are now supported in OpenAPI 3.0. See this Q&A for an example:
Use object type query param in Swagger documentation