Integrate swagger-ui in AEM6.5?

[anasustic]

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.

[arunpatidar]

Technically it would be possible.

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

[anasustic]

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;}
}