AEM: Access JS File in DAM using JavaScript Use-API

javascript use-api aem
include js file in sightly

I have a certain JS File in DAM, that contains a JSON. I would like to access that file in the helper JS using any methods of JavaScript USE API in Sightly. I know it can be done using Java quite easily, but I would like to do it in a manner that I do not want to touch any Java Code.

I tried things like below. But after that, an input stream is unavailable to convert it to a stream data.

request.resourceResolver.getResource("/path/to/dam/file.js");

AND

request.resourceResolver.getResource("/path/to/dam/file.js").adaptTo(com.adobe.granite.asset.api.Asset);

I am not sure if there are pure JS Use API methods which allow you to do it. However, since the JS Use API allows you to use Java classes and methods in it, you should be able to use them to fetch the information.

Since your file is stored as an asset in DAM, you need to access the data from the original rendition. One way of doing it is to use the com.day.cq.dam.api.Asset API to get the original rendition. The com.adobe.granite.asset.api.Asset doesn't have a direct way of accessing the original rendition, hence using the other one.

Working sample custom.js

use(function (data) { 
    var asset = request.resourceResolver.getResource("/content/dam/we-retail/en/data.js").adaptTo(com.day.cq.dam.api.Asset);
    var is = asset.getOriginal().adaptTo(java.io.InputStream);
    var jsonData = JSON.parse(org.apache.commons.io.IOUtils.toString(is, "UTF-8"));
    console.log(jsonData);
    return jsonData;
});

The contents of the file in DAM

{
    "fname": "abc",
    "lname": "xyz"
}

The HTL file

<sly data-sly-use.custom="custom.js">
    ${custom.fname} --> ${custom.lname}
</sly>

Uploading files to Adobe Experience Manager 6.4 DAM using Asset , Once uploaded, the Servlet uses the AssetManager API to store the Java, JCR API, JavaScript, AJAX, HTML uses the com.day.cq.dam.api.AssetManager API. Get file. An AEM A file is located in the AEM DAM that was uploaded using a Sling The content of the js.txt file is the JQuery JS file name. The HTML Template Langugae - HTL - JavaScript Use-API enables a HTL file to access helper code written in JavaScript.


I saw the answer posted just now. But I had used another similar method before I saw this.

Here is it. It is very similar to the answer but with a few extra steps.

asset = request.resourceResolver.getResource(jsonPath).adaptTo(com.day.cq.dam.api.Asset);
rend = asset.getOriginal().adaptTo(com.day.cq.dam.api.Rendition);

OR DIRECTLY

rend= request.resourceResolver.getResource(jsonPath+"/jcr:content/renditions/original").adaptTo(com.day.cq.dam.api.Rendition);

AND THEN

inputStream = rend.adaptTo(java.io.InputStream);
var is;
var c = '';
var flag = false;
try {
// reads till the end of the stream
while ((is = inputStream.read()) != -1) {
      c = c + String.fromCharCode(is);
}

 } catch (e) {
   // if any I/O error occurs
   log.debug("Input Stream Error " + e)
 }

Uploading files to Adobe Experience Manager DAM using , The Sightly JavaScript Use-API enables a Sightly file to access helper These values are then read by server side JS using available Use API. A simple use of JavaScript Use-API can be be seen here. These are predefined method defined in sightly, those can be used in JS file to read the values and return it. Example has been shown with a simple component which excepts a title and description. These values are then read by server side JS using available Use API.


While trying the existing solutions posted here, I had issues reading an arbitrary text file from the DAM; the resource didn't want to be adapted to Asset or Rendition.

After messing around a bit, I found that the resource could be adapted directly to an InputStream. Here's what I came up with:

function readFileToString(location)
{
    var inputStream = request.resourceResolver.getResource(location).adaptTo(java.io.InputStream);
    var data = org.apache.commons.io.IOUtils.toString(inputStream, "UTF-8");

    return data + "";
}

JavaScript Use-API with Sightly, The Sightly JavaScript Use-API enables a Sightly file to access helper These values are then read by server side JS using available Use API. Tips and resources for using AEM’s Sightly / HTL JavaScript Use-API for writing server-side JavaScript. The AEM JavaScript Use-API ResourceUtils page contains examples for using ResourceUtils and functions. part II. AEM JavaScript Use-API ResourceUtils; About. AEM uses Rhino to compile server-side JavaScript into Java. All of the regular Java


JavaScript Use-API with a Simple component in , Structurally, an AEM Sightly template (an HTML page) can invoke a There's a brief description of the pros and cons of the Java and JavaScript Use APIs here. But let's say you started with a JavaScript Use object and then “outgrew” it tagManager.find("/content/dam", tags, true); while (taggedResources. In the server-side JavaScript file, access the value of parameters using this, for example this.key. Passing Data With HTL, we can pass data into the server-side JavaScript in the data-sly-use value as a parameter.


Adding JavaScript Functions for Sightly to Use, Get CQ5 help with tips, workarounds, and more. One is the Java Use-API and the other is the JavaScript Use-API. Developers familiar I created two files within the component, example.html and example.js. Here is the  FYI, it is not as simple as you may think because of how AEM might store the data. If you are loading the file through the DAM vs CRX/content deployment, the asset might vary in its type and metadata. You can utilize the InputStream by loading the JSON file through the resource resolver or other general ways of pulling in those JSON files.


Understanding the JavaScript Use-API for AEM, Newer versions of AEM use direct binary access, which requires a more involved algorithm. Require the module in the javascript file where it will be consumed: be two new assets in AEM: // http://localhost:4502/content/dam/target/file1.jpg For example, if running through Node.js then the underlying libraries will not  Most of the time, pass­ing Java-backed objects to the JS files is not nec­es­sary, because the same objects avail­able in HTL are also avail­able in the Use-API log­ic. But there’s one case where this is need­ed, when a piece of HTML has been iso­lat­ed in a reusable tem­plate, like in the pre­vi­ous exam­ple.