Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events

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


Level 7

I need to access YAML files in dam from a template in AEM 6.5


 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>

window.onload = function() {
  const ui = SwaggerUIBundle({
    url: "https://yourserver.com/path/to/swagger.json",
    dom_id: '#swagger-ui',
    presets: [

  window.ui = ui


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"
<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">
    <sly data-sly-test="${model.defined}" data-sly-call="${swaggerScript @ path=model.path}"></sly>
    <div id="swagger-ui"></div>
<template data-sly-template.swaggerScript="${ @ path}">
		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: [
				plugins: [
				layout: 'StandaloneLayout'


Here is the model:


@Model(adaptables = SlingHttpServletRequest.class,
        defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public class SwaggerModel extends AbstractComponentModel {

    private String swaggerTitle;

    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