CODEWITHSUNDEEP
swagger-ui
Hexie
Hexie

Reputation: 4221

Swagger UI - Hide definition URL path

Using Swagger - UI 3XX

I would like to simply know if this is possible and if so, how:

We currently have a need to hide the definition URL path that Swagger - UI displays.

enter image description here

I know it's not possible to remove this URL and I'm not looking to do that, all I'm wanting to do is to hide /mask the text box from the client viewing this page.

Looking at the new Swagger docs here, there are some awesome tricks and extras you can add, however - nothing I can see in relation to my query.

I'm pretty sure, I could interrogate the HTML, find the id of the element in question and manually change the display of it within the index.html, I would much rather prefer using a build in method, if one exists before getting to that possible solution.

i.e. Something like this is possible and works: 

<style> .download-url-input { display: none !important; } </style>

Is this even possible?

Upvotes: 14

Views: 24984

Answers (2)

Przemek Nowicki
Przemek Nowicki

Reputation: 635

For the version 3.x add slice function to:

SwaggerUIStandalonePreset.slice(1)

In the version 4.x (inside swagger-initializer.js file) set layout to "BaseLayout"

  window.ui = SwaggerUIBundle({
    url: "./swagger.json",
    dom_id: '#swagger-ui',
    deepLinking: true,
    presets: [
      SwaggerUIBundle.presets.apis,
      SwaggerUIStandalonePreset
    ],
    plugins: [
      SwaggerUIBundle.plugins.DownloadUrl
    ],
    layout: "BaseLayout" // <<< here
  });

Upvotes: 5

Helen
Helen

Reputation: 97677

In Swagger UI 3.x, you can hide the top bar in one the following ways.

Option 1

Edit dist\index.html and find this code:

const ui = SwaggerUIBundle({
  url: "http://petstore.swagger.io/v2/swagger.json",
  dom_id: '#swagger-ui',
  deepLinking: true,
  presets: [
    SwaggerUIBundle.presets.apis,
    SwaggerUIStandalonePreset
  ],
  plugins: [
    SwaggerUIBundle.plugins.DownloadUrl
  ],
  layout: "StandaloneLayout"
})

Remove layout, SwaggerUIStandalonePreset and SwaggerUIBundle.plugins.DownloadUrl, so that the constructor looks like this:

const ui = SwaggerUIBundle({
  url: "http://petstore.swagger.io/v2/swagger.json",
  dom_id: '#swagger-ui',
  deepLinking: true,
  presets: [
    SwaggerUIBundle.presets.apis
  ]
})

(Source)

Option 2 - Recompile Code

You can also recompile Swagger UI without the top bar plugin as explained here and rebuilding it. You will need Node.js 6.x and npm 3.x.

  1. Edit src/standalone/index.js and remove TopbarPlugin from presets:

    // import TopbarPlugin from "plugins/topbar"    // <----------
import ConfigsPlugin from "plugins/configs"

// the Standalone preset

let preset = [
  // TopbarPlugin,      // <----------
  ConfigsPlugin,
  () => {
    return {
      components: { StandaloneLayout }
    }
  }
]

  2. Rebuild Swagger UI – in the project's root directory run

    npm install

    then

    npm run build

Now your dist\index.html does not have a top bar.

Upvotes: 28

Related Questions