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

Adobe Summit 2023 [19th to 23rd March, Las Vegas and Virtual] | Complete AEM Session & Lab list

Integrate swagger-ui in AEM6.5?

Avatar

Level 5

Is there a way to integrate swagger-ui in AEM6.5? I would like to create a AEM component that would read the YAML file and nicely present it using the swagger-ui.

0 Replies

Avatar

Community Advisor

Technically it would be possible.

But make sure you take care of Authoring experience as well.

Avatar

Level 5

Hi,

I created a swagger component in AEM and added a new static clientlib for swagger-ui.

 

 
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
          jcr:primaryType="cq:ClientLibraryFolder"
          categories="[xxx.swagger-ui]"
          cssProcessor="[default:none,min:none]"
          jsProcessor="[default:none,min:none]"
          allowProxy="{Boolean}true"/>
The YAML files for the swagger component is in the AEM DAM in the folder /content/dam/yaml-files.
I am not sure how to access these YAML assets in the template. 
When I do it like this I get the correct url in the template 
{url: '/content/dam/yaml-files/account-information-service-api-v2-of-fi.yaml', name: 'account-information-service-api-v2-of-fi'},
but AEM of course does not interprete is as an Asset ie. yaml file.
 
<sly data-sly-use.model="xxx.component.content.SwaggerModel"
     data-sly-use.template="core/wcm/components/commons/v1/templates.html"
     data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">
</sly>
<sly data-sly-call="${clientlib.all @ categories='xxxi.swagger-ui'}"/>

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

<div data-sly-test="${model.defined}">
    <h1 class="t-title">
        ${model.title}
    </h1>
    <p>
        ${model.swaggerYamlPath}
    </p>
    <sly data-sly-test="${model.defined}" data-sly-call="${swaggerScript @ path=model.path}"></sly>
    <div id="swagger-ui"></div>
</div>
<template data-sly-template.swaggerScript="${ @ path}">
    <script>
		window.onload = function () {
			//<editor-fold desc="Changeable Configuration Block">

			// the following lines will be replaced by docker/configurator, when it runs in a docker-container
			window.ui = SwaggerUIBundle({
				urls: [
					{url: '${path @ context='html'}', name: 'account-information-service-api-v2-of-fi'},
					{url: '/yaml/consent-flow-api-v2-of-fi.yaml', name: 'consent-flow-api-v2-of-fi'},
					{url: '/yaml/custody-services-api-v1-of-fi.yaml', name: 'custody-services-api-v1-of-fi'},
					{url: '/yaml/payments-submission-service-api-v2-of-fi.yaml', name: 'payments-submission-service-api-v2-of-fi'},
				],
				url: 'http://localhost:8080/test.yaml',
				dom_id: '#swagger-ui',
				deepLinking: true,
				filter: true,
				presets: [
					SwaggerUIBundle.presets.apis,
					SwaggerUIStandalonePreset
				],
				plugins: [
					SwaggerUIBundle.plugins.DownloadUrl
				],
				layout: 'StandaloneLayout'
			});

			//</editor-fold>
		};
    </script>
</template>
Here is the model:
@Model(adaptables = SlingHttpServletRequest.class,
        defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public class SwaggerModel extends AbstractComponentModel {


    @ValueMapValue
    private String swaggerTitle;

    @ValueMapValue
    private String swaggerYamlPath;


    public boolean isDefined() {
        return StringUtils.isNoneBlank(swaggerYamlPath);
    }

    public String getSwaggerYamlPath(){
        return LinkUtil.getExternalLink(resource.getResourceResolver(), swaggerYamlPath);
    }

    public String getTitle() {
        return swaggerTitle;
    }

    public String getPath() { return swaggerYamlPath;}
}