Changing swagger-ui server variable at runtime

Question

Using an openapi v3 configuration I have a server variable called 'hostname' that is used to build the url, like:

...
servers:
- url: http://{hostname}/api
 variables:
  hostname:
   "default": "some default here"
....

At runtime I'd like to be able to change the 'hostname' server variable. I've found the UI element on the page,

<input type="text" value="some default here" data-variable="hostname">

Changing the variable by editing the input field works fine, but changing the input field via jQuery isn't working, even when triggering the "change" event after setting the value, the value reverts when expanding one of the api sections. I also tried triggering the keyup/keydown and focusin/focusout events to better simulate how a user would change the field.

Is there a more swagger-ui approach to changing this value through an exposed call? I've looked through window.ui but its kind of cryptic.

Answer 1

I have an api.yaml file hosted on different IoT devices. Each device will have a different hostname based on its configuration. When the page is loaded I'm trying to use javascript to set the 'hostname' server variable to be window.location.hostname, for example via javascript.

You can simply specify a relative server url – it will be resolved relative to the location of the OpenAPI definition file.

For example, if you have

servers:
  - url: /api

and the API definition file is at

http://foobar/spec/api.yaml

then the base url for API calls will be resolved to

http://foobar/api

Answer 2

You can alter the spec json before it render by writing a plugin

const ui = SwaggerUI({
    // ...
    plugins: [
        // add a plugin to alter spec before it rendered
        {
            statePlugins: {
                spec: {
                    wrapActions: {
                        updateJsonSpec: function(oriAction, system) {
                            return (spec) => {
                                // change spec.servers here to add new entry, use concat to put it as the first & default one
                                spec.servers = [{url: someDynamicUrlInRuntime}].concat(spec.servers || [])
                                return oriAction(spec)
                            }
                        }
                    }
                }
            }
        }
    ]
    // ...
})