Customizing default swagger-ui 3.x

classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|

Customizing default swagger-ui 3.x

Thilini Shanika
Hi,

We are currently in the process of upgrading swagger-ui 3.x in API Manager and we need to disable some of the components shipped with default swagger UI. Basically, we need to disable the components like top bar, API information, authorization button, schemas and models at the bottom of the swagger console. Is it possible to disable them?  We used following code snippet to embed swagger UI into the API detail page and what are the changes to be applied in order to disable above-mentioned components?

  const ui = SwaggerUIBundle({
      url: "<%=swaggerAPI%>",
      dom_id: '#swagger-ui-container',
presets: [ SwaggerUIBundle.presets.apis, SwaggerUIStandalonePreset ], plugins: [ SwaggerUIBundle.plugins.DownloadUrl ], layout: "StandaloneLayout" }) window.ui = ui

--
Thilini Shanika
Senior Software Engineer

WSO2, Inc.; http://wso2.com
20, Palmgrove Avenue, Colombo 3



_______________________________________________
Dev mailing list
[hidden email]
http://wso2.org/cgi-bin/mailman/listinfo/dev
Reply | Threaded
Open this post in threaded view
|

Re: Customizing default swagger-ui 3.x

Praminda Jayawardana
Hi Thilini,

You can add a plugin in plugins section to remove these components.

Ex:
function {
            return {
                components: {
                    Models: function() { return null },
                    schemes: function() { return null },
                    authorizeBtn: function() { return null },
                    info: function() { return null }
                }
            }
        }

Other than that you need to remove the layout: "StandaloneLayout" and SwaggerUIStandalonePreset to get rid of the swagger ui header. At the end SwaggerUiBunlde init should look like this.

const ui = SwaggerUIBundle({
    url: "<%=swaggerAPI%>",
    dom_id: '#swagger-ui-container',
    presets: [
        SwaggerUIBundle.presets.apis
    ],
    plugins: [
        function {
            return {
                components: {
                    Models: function() { return null },
                    schemes: function() { return null },
                    authorizeBtn: function() { return null },
                    info: function() { return null }
                }
            }
        }

    ]
})
window.ui = ui




Thanks,
Praminda

On Wed, Dec 6, 2017 at 9:19 AM, Thilini Shanika <[hidden email]> wrote:
Hi,

We are currently in the process of upgrading swagger-ui 3.x in API Manager and we need to disable some of the components shipped with default swagger UI. Basically, we need to disable the components like top bar, API information, authorization button, schemas and models at the bottom of the swagger console. Is it possible to disable them?  We used following code snippet to embed swagger UI into the API detail page and what are the changes to be applied in order to disable above-mentioned components?

  const ui = SwaggerUIBundle({
      url: "<%=swaggerAPI%>",
      dom_id: '#swagger-ui-container',
presets: [ SwaggerUIBundle.presets.apis, SwaggerUIStandalonePreset ], plugins: [ SwaggerUIBundle.plugins.DownloadUrl ], layout: "StandaloneLayout" }) window.ui = ui

--
Thilini Shanika
Senior Software Engineer

WSO2, Inc.; http://wso2.com
20, Palmgrove Avenue, Colombo 3



_______________________________________________
Dev mailing list
[hidden email]
http://wso2.org/cgi-bin/mailman/listinfo/dev




--

Praminda Jayawardana

Software Engineer
WSO2 Inc.; http://wso2.com
Mobile : +94 (0) 716 590918

_______________________________________________
Dev mailing list
[hidden email]
http://wso2.org/cgi-bin/mailman/listinfo/dev
Reply | Threaded
Open this post in threaded view
|

Re: Customizing default swagger-ui 3.x

Thilini Shanika
Thanks Praminda. It worked for me. 



On Wed, Dec 6, 2017 at 9:36 AM, Praminda Jayawardana <[hidden email]> wrote:
Hi Thilini,

You can add a plugin in plugins section to remove these components.

Ex:
function {
            return {
                components: {
                    Models: function() { return null },
                    schemes: function() { return null },
                    authorizeBtn: function() { return null },
                    info: function() { return null }
                }
            }
        }

Other than that you need to remove the layout: "StandaloneLayout" and SwaggerUIStandalonePreset to get rid of the swagger ui header. At the end SwaggerUiBunlde init should look like this.

const ui = SwaggerUIBundle({
    url: "<%=swaggerAPI%>",
    dom_id: '#swagger-ui-container',
    presets: [
        SwaggerUIBundle.presets.apis
    ],
    plugins: [
        function {
            return {
                components: {
                    Models: function() { return null },
                    schemes: function() { return null },
                    authorizeBtn: function() { return null },
                    info: function() { return null }
                }
            }
        }

    ]
})
window.ui = ui




Thanks,
Praminda

On Wed, Dec 6, 2017 at 9:19 AM, Thilini Shanika <[hidden email]> wrote:
Hi,

We are currently in the process of upgrading swagger-ui 3.x in API Manager and we need to disable some of the components shipped with default swagger UI. Basically, we need to disable the components like top bar, API information, authorization button, schemas and models at the bottom of the swagger console. Is it possible to disable them?  We used following code snippet to embed swagger UI into the API detail page and what are the changes to be applied in order to disable above-mentioned components?

  const ui = SwaggerUIBundle({
      url: "<%=swaggerAPI%>",
      dom_id: '#swagger-ui-container',
presets: [ SwaggerUIBundle.presets.apis, SwaggerUIStandalonePreset ], plugins: [ SwaggerUIBundle.plugins.DownloadUrl ], layout: "StandaloneLayout" }) window.ui = ui

--
Thilini Shanika
Senior Software Engineer

WSO2, Inc.; http://wso2.com
20, Palmgrove Avenue, Colombo 3



_______________________________________________
Dev mailing list
[hidden email]
http://wso2.org/cgi-bin/mailman/listinfo/dev




--

Praminda Jayawardana

Software Engineer
WSO2 Inc.; http://wso2.com
Mobile : <a href="tel:+94%2071%20659%200918" value="+94716590918" target="_blank">+94 (0) 716 590918



--
Thilini Shanika
Senior Software Engineer

WSO2, Inc.; http://wso2.com
20, Palmgrove Avenue, Colombo 3



_______________________________________________
Dev mailing list
[hidden email]
http://wso2.org/cgi-bin/mailman/listinfo/dev