Question
Accessing a YAML file in dam from a template in AEM 6.5
I need to access YAML files in dam from a template in AEM 6.5
/content/dam/yaml-files/
Inside the html body I should have the following for swagger to work:
<div id="swagger-ui"></div>
<script src="swagger-ui-bundle.js"></script>
<script src="swagger-ui-standalone-preset.js"></script>
<script>
window.onload = function() {
const ui = SwaggerUIBundle({
url: "https://yourserver.com/path/to/swagger.json",
dom_id: '#swagger-ui',
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIStandalonePreset
]
})
window.ui = ui
}
</script>
Here is what I tried to do in the AEM template but the url to my yaml file is not correct and I the script does not load:
<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;}
}