swagger-ui icon indicating copy to clipboard operation
swagger-ui copied to clipboard

"Try it out" doesn't prompt with form when parameters are a schema

Open andrew-regan opened this issue 7 years ago • 9 comments

The following path used to provide username/password text input fields. In 3.0.2 it now requires the "Example Value" text box to be edited. It looks like this happens when the input parameters are specified using schema.

        "/auth/token": {
            "post": {
                "tags": [
                    "auth"
                ],
                "summary": "Get an API key",
                "description": "",
                "operationId": "getApiKey",
                "security": [],
                "consumes": [
                    "application/json"
                ],
                "produces": [
                    "application/json; version=1.0"
                ],
                "parameters": [
                    {
                        "in": "body",
                        "name": "body",
                        "description": "Authentication",
                        "required": true,
                        "schema": {
                            "$ref": "#/definitions/auth_credentials"
                        }
                    }
                ],
                "responses": {
                    "200": {
                        "description": "Successful Authentication",
                        "schema": {
                            "description": "Authorization Result",
                            "allOf": [
                                {
                                    "$ref": "#/definitions/Response"
                                },
                                {
                                    "properties": {
                                        "result": {
                                            "description": "API Key",
                                            "type": "string",
                                            "example": "example_api-key_iZkjs8-Yc2LzRjpwKbai11kkPZg"
                                        }
                                    }
                                }
                            ]
                        }
                    },
                    "400": {
                        "description": "Invalid Format",
                        "schema": {
                            "$ref": "#/definitions/ErrorResponse"
                        }
                    },
                    "401": {
                        "description": "Invalid Credentials",
                        "schema": {
                            "$ref": "#/definitions/AuthErrorResponse"
                        }
                    }
                }
            }
        }
...
        "auth_credentials": {
            "type": "object",
            "properties": {
                "username": {
                    "type": "string",
                    "minLength": 1,
                    "title": "Username"
                },
                "password": {
                    "type": "string",
                    "format": "password",
                    "minLength": 1,
                    "title": "Password",
                    "secret": true
                }
            },
            "additionalProperties": false,
            "required": [
                "username",
                "password"
            ]
        },

screen shot 2017-03-22 at 1 03 41 pm

As an example the following path which does not use schema provides a text input field for name:

        "/support_bundles/{name}": {
            "delete": {
                "tags": [
                    "support_bundles"
                ],
                "summary": "Delete a single support bundle",
                "description": "",
                "operationId": "deleteSupportBundle",
                "produces": [
                    "application/json; version=1.0"
                ],
                "parameters": [
                    {
                        "name": "name",
                        "in": "path",
                        "description": "Name of support bundle",
                        "required": true,
                        "type": "string"
                    }
                ],
                "responses": {
                    "200": {
                        "description": "Success",
                        "schema": {
                            "$ref": "#/definitions/Response"
                        }
                    }
                }
            }
        },

screen shot 2017-03-22 at 1 07 17 pm

andrew-regan avatar Mar 22 '17 17:03 andrew-regan

That's because it's a JSON object. In the previous version we had a community contribution of a JSON Schema form editor, but we couldn't migrate it as-is and it wasn't well maintained.

We might be able to bring in a similar functionality to 3.X as we have experience doing so, however, the efforts in doing so are great (it introduces a lot of UI issues). Is this something you'd consider assisting with? We'll give guidance for the process.

webron avatar Mar 22 '17 17:03 webron

If I had the skills I would, but you don't want me writing Javascript. 😄

andrew-regan avatar Mar 22 '17 17:03 andrew-regan

Any idea if/when this will get implemented? Just curious...I assume the P3 label means its lower on the list? Thanks!

andrew-regan avatar Aug 19 '17 01:08 andrew-regan

It's not on any of our immediate plans, there's no ETA for it.

webron avatar Aug 21 '17 16:08 webron

How about, instead of crafting a input fields from the model, make the current input text area a real Json editor?

Like the left side of the swagger editor tool (with all bells and whistles of the ACE editor) but with the model as the "schema" to validate against. (e.g. create a basic JSON schema of the model and use it to validate the input).

It will also make is easier to try our multiple different inputs by copy pasting. Which isn't possible when it are individual form fields. And on top of that, you support sheer infinite nesting of properties in the model.

Because... if you start making a form with the current screen spacing, you'll need to scroll forever. (see #4359)

jobec avatar Apr 09 '18 13:04 jobec

That's a solution that would appease some users, but I doubt that most. It can be an option, but can't be the only solution.

webron avatar Apr 09 '18 13:04 webron

I just implemented JSON editor with package "react-jsonschema-form" in my fork(https://github.com/pli41/swagger-ui.git). Hopefully this can be helpful for people who need this feature! You can find more info in my commit's comments.

BTW I do not have prior experience with front end development. Please do correct me if I have done something terrible lol.

pli41 avatar Jul 27 '18 23:07 pli41

Any update on this feature ? I guess many are there who are waiting to have this feature integrated in swagger UI.

SSCodeChamp avatar Sep 04 '18 19:09 SSCodeChamp

I have the same problem

mmm8955405 avatar Jul 19 '22 16:07 mmm8955405

would love this feature! either a json editor, or just give us an option to use the existing form editor for application/x-www-form-urlencoded for when our request body schema is well defined

jack-bliss avatar Oct 26 '22 10:10 jack-bliss

hi what is the current status of this? If its blocked what specifically is the difficulty in re-implementing the json form editor?

vxe avatar Jun 07 '23 04:06 vxe