Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

Multiple custom Swagger-ui Components on one page


Level 4

I have a requirement for loading multiple Swagger-UI components on one page on AEM6.5.

My component template in AEM6.5 looks like this:


<sly data-sly-use.model="xxx.aem.component.content.SwaggerModel"

<sly data-sly-call="${clientlib.all @ categories='xxx.ui.swagger-ui'}"/>

<sly data-sly-call="${template.placeholder @ isEmpty=!model.defined}"></sly>

<div data-sly-test="${model.defined}">
    <h1 class="t-title">
    <div id="${model.uniqueId}"></div>
    <sly data-sly-test="${model.defined}" data-sly-call="${swaggerScript @ path=model.swaggerYamlPath, name=model.swaggerYamlName, dom_id=model.uniqueId}"></sly>

<template data-sly-template.swaggerScript="${ @ path, name, dom_id}">
        window.onload = function () {

            window.ui = SwaggerUIBundle({
                urls: [
                    {url: "${path @ context='text'}", name: "${name @ context='text'}"},
                dom_id: '#${dom_id @ context='text'}',
                deepLinking: true,
                filter: true,
                presets: [
                plugins: [
                layout: 'StandaloneLayout'


 The problem is that no matter I use the unique ID only one swagger component will render on the page and the other will not. I can see the swagger components are correctly loaded in the DOM but as already mentioned only one will render.


0 Replies