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

Accessing a YAML file in dam from a template in AEM 6.5

Avatar

Level 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;}
}
0 Replies