When to use resourceType for data-sly-resource tag

[Former Community Member]

In the archetype 10 project, there is a main.html file under page component which is trying to access a title component created in the project as below:

<div class="page__title" data-sly-resource="${'title' @ decorationTagName='div'}"></div>

I created a custom title component by the name training-title, replaced title with training-title like below. But this didn't work.

<div class="page__title" data-sly-resource="${'training-title' @ decorationTagName='div'}"></div>

After searching, I found that the below syntax is working properly.

<div class="page__title" data-sly-resource="${'training-title' @ resourceType='sample/components/content/training-title'}"></div>

Can anyone let me know what is the difference between the 2 syntax?

[edubey]

The reason this didn't worked 

1. <div class="page__title" data-sly-resource="${'training-title' @ decorationTagName='div'}"></div>
2. When you do not give full path to component , AEM tries to take it as relative and search for the node under template with this name. When page-content template was created this title node was included as resource ( node) in jcr:content ( AEM call this as boiler plate template).
3. Although you changed the actual component but this node was still there with name title
4. 

The reason this worked

1. <div class="page__title" data-sly-resource="${'training-title' @ resourceType='sample/components/content/training-title'}"></div>
2. Here you have the absolute path to the component you want to include not the node under template. so it worked

[kautuk_sahni · Accepted solution]

HI 

Pleas refer to the documentation link :- https://docs.adobe.com/docs/en/aem/6-1/develop/sightly/block-statements.html

//

resource

data-sly-resource: Includes the result of rendering the indicated resource through the sling resolution and rendering process.

A simple resource include:

    

<article data-sly-resource="path/to/resource"></article>

Code samples are intended for illustration purposes only.

Options allow a number of additional variants:

Manipulating the path of the resource:

    

<article data-sly-resource="${ @ path='path/to/resource'}"></article>

<article data-sly-resource="${'resource' @ prependPath='my/path'}"></article>

<article data-sly-resource="${'my/path' @ appendPath='resource'}"></article>

Code samples are intended for illustration purposes only.

Add (or replace) a selector:

    

<article data-sly-resource="${'path/to/resource' @ selectors='selector'}"></article>

Code samples are intended for illustration purposes only.

Add, replace or remove multiple selectors:

    

<article data-sly-resource="${'path/to/resource' @ selectors=['s1', 's2']}"></article>

Code samples are intended for illustration purposes only.

Add a selector to the existing ones:

    

<article data-sly-resource="${'path/to/resource' @ addSelectors='selector'}"></article>

Code samples are intended for illustration purposes only.

Remove some selectors from the existing ones:

    

<article data-sly-resource="${'path/to/resource' @ removeSelectors='selector1'}"></article>

Code samples are intended for illustration purposes only.

Remove all selectors:

    

<article data-sly-resource="${'path/to/resource' @ removeSelectors}"></article>

Code samples are intended for illustration purposes only.

Overrides the resource type of the resource:

    

<article data-sly-resource="${'path/to/resource' @ resourceType='my/resource/type'}"></article>

Code samples are intended for illustration purposes only.

Changes the WCM mode:

    

<article data-sly-resource="${'path/to/resource' @ wcmmode='disabled'}"></article>

Code samples are intended for illustration purposes only.

By default, the AEM decoration tags are disabled, the decorationTagName option allows to bring them back, and the cssClassName to add classes to that element.

    

<article data-sly-resource="${'path/to/resource' @ decorationTagName='span',

cssClassName='className'}"></article>

To Better understand "resourceType", Please read this documentation :- https://docs.adobe.com/docs/en/cq/5-6-1/developing/the_basics.html#URL Decomposition

//

Locating the script

When the appropriate resource (content node) is located, the sling resource type is extracted. This is a path, which locates the script to be used for rendering the content.
The path specified by the sling:resourceType can be either:
• absolute
• relative, to a configuration parameter

Link:- https://adobecq5interviewquestions.wordpress.com/introduction-to-cq

I hope this would help you.

Thanks and Regards

Kautuk Sahni