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

SOLVED

How to emit the server path to the current file?

valcohen
Level 3
Level 3

I have some components that I've broken into multiple smaller files. The main file includes them using data-sly-include attributes.

I'd like to generate HTML comments containing the current filename in both the main file and the included files, so that when I view the rendered output I can easily tell which file generated the output. Something like:

... some HTML from the template or other components...

<!-- begin /path/to/main/file.html -->

<div>

    This is from the main file

    <!-- begin  /path/to/main/includes/first.html -->

    <p>This is fromt the first include</p>

    <!-- end /path/to/main/includes/first.html -->

    <!-- begin  /path/to/main/includes/second.html -->

    <p>This is fromt the second include</p>

    <!-- end /path/to/main/includes/second.html -->

    now we're back in the main file

<!-- end /path/to/main/file.html -->

I can see how to get the path to the current page, but that's the resource that contains my component; I want the paths to the files that make up the components. Any way to do this in Sightly?

1 Accepted Solution
valcohen
Correct answer by
Level 3
Level 3

I posted this on StackOverflow at aem - How to emit the server path to the current file using Sightly? - Stack Overflow

and got a satisfactory answer:

Create a JavaScript file that asks Sling for the path to the current file:

component-path.js:

use( function() {

    return { "path" : sling.getScript().getScriptResource().getPath() };

});

Then reference this where needed in the component markup:

<sly data-sly-use.currentFile="component-path.js"><!--  begin: ${currentFile.path} --></sly>

This results in an HTML comment like

<!--  begin: /apps/path/to/my/component.html -->

One thing to watch out for: the path to the script is relative to the markup file calling it in the data-sly-use attribute. If the path can't be resolved, the component won't render. In the example above, component-path.js is in the same directory as the component markup. if the markup were in a subdirectory, I'd have to refer to the script a level above: "../component-path.js". And to make it global, I should probably store the script somewhere else and refer to an absolute path, like "/etc/designs/path/to/global/scripts/component-path.js"

View solution in original post

0 Replies
kautuk_sahni
Employee
Employee

Just add a HTML comment/Or current path at component level and whenever that component gets included in the page template you can see that comment/path in the response HTML.

More information at ClientLibs level also you can do debugging by adding ?debugClientLibs=true to the URL.

Just add a query parameter in the page URL. “?debugClientLibs=true”, there will be separate network calls for each clientlibs. So debugging of js/css individual files will be easy.

Source :- http://aempodcast.com/2014/front-end-engineering/debug-client-libs-adobe-experience-manager-formerly...

~kautuk

valcohen
Level 3
Level 3

Sorry, I should have been more clear. I want a way to automatically inject the path to the current file. I don't want to hard-code it; I want a single snippet of code I can drop into each file that echoes the current path. That way, if I move the file, the comment automatically updates. I did this just the recently -- I refactored a component into smaller fragments, and then a few days later I re-organized the fragments into subfolders and renamed some of them for clarity. If I had hard-coded comments, I'd have to remember to update them in all the files.

The debugClientLibs trick doesn't address my need. I'm including these file fragments on the server-side; by the time they're in a clientLib they've been merged. That's exactly why I want this feature -- so I can tell where the server-side fragments begin and end.

valcohen
Correct answer by
Level 3
Level 3

I posted this on StackOverflow at aem - How to emit the server path to the current file using Sightly? - Stack Overflow

and got a satisfactory answer:

Create a JavaScript file that asks Sling for the path to the current file:

component-path.js:

use( function() {

    return { "path" : sling.getScript().getScriptResource().getPath() };

});

Then reference this where needed in the component markup:

<sly data-sly-use.currentFile="component-path.js"><!--  begin: ${currentFile.path} --></sly>

This results in an HTML comment like

<!--  begin: /apps/path/to/my/component.html -->

One thing to watch out for: the path to the script is relative to the markup file calling it in the data-sly-use attribute. If the path can't be resolved, the component won't render. In the example above, component-path.js is in the same directory as the component markup. if the markup were in a subdirectory, I'd have to refer to the script a level above: "../component-path.js". And to make it global, I should probably store the script somewhere else and refer to an absolute path, like "/etc/designs/path/to/global/scripts/component-path.js"