SwaggerUIBundle hide schemes

Question

I have working on the swagger-ui which use the swagger json file like:

...
...
...
host: example.com
basePath: /
schemes:
- https
swagger: "2.0"
...
...
...

Is there any way to not show the schemes on the web via swagger-ui.

I have gone through the documentation for configuration, but couldn't find anything that I can use. I might be missing something.

Let me know if you have any idea.

My JS code snippet:

// above code for swagger-ui stuff
// snippet is just about conf
jQuery(document).ready(function () {
    const swaggerUI = SwaggerUIBundle({
        url: jQuery("#swagger-ui").data("source"),
        dom_id: "#swagger-ui",
        deepLinking: true,
        presets: [
        SwaggerUIBundle.presets.apis
        ],
        plugins: [
        ],
        layout: "BaseLayout",
        defaultModelsExpandDepth: -1,
    });
    window.swaggerUI = swaggerUI;
});

What I want to hide:

Anapest

defaultModelsExpandDepth: -1 is how you hide the "Schemas" section. You already have this option in your Swagger UI config. – Whang

@Helen, I can see that Schemes dropdown still appears that's why I am confused. – Anapest

Can you post a screenshot? What version of Swagger UI do you use (open the browser dev tools, switch to the Console tab, and evaluate versions) – Whang

@Whang I am using "swagger-ui-bundle" and "swagger-ui-standalone-preset" – Anapest

What version of Swagger UI? This option was added in v. 3.7.0. – Whang

By using defaultModelsExpandDepth: -1, I can see models are hide but not schemes – Anapest

@Whang I supposed he's using the 3.24 version where his problem is occuring. – Embank

Answer 1

In my opinion the correct way of doing this in versions lower than 3.7 is by creating a custom plugin that removes the schemes component.

const HideSchemes = function() {
    return {
      components: {
        schemes: function() { return null }
      }
    }
  }
const swaggerUI = SwaggerUIBundle({
    ...
    plugins: [HideSchemes],
    ...
});

jQuery(document).ready(function() {
  const HideSchemes = function() {
    return {
      components: {
        schemes: function() {
          return null
        }
      }
    }
  }
  const swaggerUI = SwaggerUIBundle({
    url: 'https://petstore.swagger.io/v2/swagger.json',
    dom_id: "#swagger-ui",
    deepLinking: true,
    presets: [
      SwaggerUIBundle.presets.apis
    ],
    plugins: [HideSchemes],
    layout: "BaseLayout",
    defaultModelsExpandDepth: -1,
  });
  window.swaggerUI = swaggerUI;
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/3.24.2/swagger-ui.css" integrity="sha256-Dw3/dQaA/3PKkN2b3agvmpPhItQwRBufnIRmCYo2vo0=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/3.24.2/swagger-ui-bundle.js" integrity="sha256-vSnFNvuQhNviHFS0M3EXj1LHCYdscvEdVmLIiDDZVhQ=" crossorigin="anonymous"></script>

<div id="swagger-ui"></div>

You can, in this fiddlen remove the plugins option to see the difference.

https://jsfiddle.net/g60qsdty/

Embank

Answer 2

If you are always going to use http authentication scheme for swagger you can do following with your swagger json file. Default authentication scheme will be http.

Now if you need https authentication scheme you have to edit swagger-ui as suggested by "webron" here.

Method 1:

Add custom css to the generated swagger html here

Method 2: (Not Recommended)

1. Keep your scheme https only
2. Go to this location node_modules > swagger-ui-dist > swagger-ui.css

3. Find .scheme-container

4. And add CSS with display: none;

   .scheme-container{display: none; margin:0 0 20px;padding:30px 0;background:#fff;box-shadow:0 1px 2px 0 rgba(0,0,0,.15)}

Starlight