Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

SwaggerUIBundle hide schemes

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:

enter image description here

like image 792
Vinay Avatar asked Mar 04 '20 08:03

Vinay


People also ask

How do I hide schemas in swagger?

To hide the "Models" section, add defaultModelsExpandDepth: -1 to the Swagger UI configuration code in your index. html . Note the option name uses plural Model*s* not Model . Swagger UI also has many other configuration options that control API documentation rendering.

What is SwaggerUIBundle?

SwaggerUIBundle is used when your app does not support importing npm modules (e.g., a java webapp). The swagger user interface can be loaded by using the swagger index.


1 Answers

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/

like image 97
Alexandre Elshobokshy Avatar answered Oct 19 '22 21:10

Alexandre Elshobokshy