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:

`defaultModelsExpandDepth: -1` is how you hide the "Schemas" section. You already have this option in your Swagger UI config. — Helen, Mar 04 '20 at 08:51
@Helen, I can see that `Schemes` dropdown still appears that's why I am confused. — Vinay, Mar 04 '20 at 09:05
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`) — Helen, Mar 04 '20 at 09:06
@Helen I am using "swagger-ui-bundle" and "swagger-ui-standalone-preset" — Vinay, Mar 04 '20 at 09:28
What version of Swagger UI? This option was added in v. 3.7.0. — Helen, Mar 04 '20 at 10:06
By using `defaultModelsExpandDepth: -1`, I can see models are hide but not `schemes` — Vinay, Mar 04 '20 at 13:42
@Helen I supposed he's using the 3.24 version where his problem is occuring. — Alexandre Elshobokshy, Mar 12 '20 at 09:09

Alexandre Elshobokshy · Answer 1 · 2020-03-12T09:11:44.027

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/

Abhijeet Abnave · Answer 2 · 2020-03-12T08:39:57.543

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)

Keep your scheme https only
Go to this location node_modules > swagger-ui-dist > swagger-ui.css
Find .scheme-container
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)}

SwaggerUIBundle hide schemes

2 Answers2