Given a Path get a reference to the Resource in Sightly

Question

The component dialog has a pathfield widget where the authors can set a page path. In the Sightly component, I would like to look up that page resource and get (and display) properties from it.

The dialog...

<linkedPathLocation jcr:primaryType="cq:Widget"
              fieldLabel="Linked Path"
              name="./linkedPathLocation"
              xtype="pathfield"
              fieldDescription="Select a page. URL, Title, Description and Image are properties of the selected page"/>   

The component code I would like to work (it's not).

  <div class="row" data-sly-resource.page = "${properties.linkedPathLocation}">
    <h1 >${page.title}</h1>
    <p>${page.description}</p>
  </div>

My question: Is there a way in Sightly to resolve and use some resource from a given path? If not, I could create a USE-API class and to do the following...

Page page = resourceResolver.resolve("/path/to/resource").adaptTo(Page.class); 

Answer 1

What you are trying to do, in essence, is render a Resource within the context of the rendering of another Resource. data-sly-resource seems the appropriate attribute to use, but instead of attempting to nest additional elements into the element containing the data-sly-resource you should define another Sightly .html file which dictates how the nested resource is to be rendered.

Let us say that your Resource is of type application/components/content/type. Within type.html you might have the following statement

<sly data-sly-resource="${properties.linkedPathLocation} @ resourceType='application/components/content/type/subtype' />

You would then be able to define /apps/application/components/content/type/subtype/subtype.html containing the rendering to produce which would be invoked in the context of the Resource identified by your path.

Answer 2

I feel there should be a better answer which allows resources to be resolved directly from the Sightly, but the following USE-API solution works if not...

Java Use Class

public class PageHelper extends WCMUsePojo {
  String pagePath = ""; 
  @Override
  public void activate() {
    pagePath = get("path", String.class);
  }

  public Page getPage() {
    return this.getPageManager().getPage(pagePath);
   }    
}

The component Sightly...

<div class="row" data-sly-use.linkedPage = "${'com.package.PageHelper' @ path = properties.linkedPathLocation}">
    <h1 >${linkedPage.page.title}</h1>
    <p>${linkedPage.page.description}</p>
  </div>

Answer 3

The main purpose of Sightly templates is separation of responsibility (frontend & backend) so that we can have simple, clean and beautiful html markup which is designer friendly and easily readable. For your case, writing a Class (Java/Javascript) to process dialog information, and supply it back to Sightly template is correct way. Read here for more details.