Sightly - Include another HTML and pass parameters

Avatar

Avatar

ashtrick

Avatar

ashtrick

ashtrick

15-10-2015

Hi smiley

I'm wondering if this is possible?

I have a component (xcomponent) and have the two sightly templates in this as follows

  1. xcomponent.html
  2. y.html

​I'm using JAVA-USE API to get the data for the template and including the y.html in xcomponent.html as below

<div data-sly-use.componentService="XComponentProxy" data-sly-test="${componentService}" data-sly-unwrap=""> <div data-sly-test.componentData="${componentService.componentData}" data-sly-unwrap=""> <!-- Template HTML goes here --> <!-- Template HTML goes here --> <!-- Template HTML goes here --> <div data-sly-include="y.html" data-sly-unwrap="${!(wcmmode.edit || wcmmode.design)}"></div> </div> </div>

Can someone please help me on how to pass the parameters from xcomponent.html to y.html so that I can use componentData created in xcomponent in y.html?

Thanks,

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

Feike_Visser1

Employee

Avatar

Feike_Visser1

Employee

Feike_Visser1
Employee

15-10-2015

hi 

I would you data-sly-template for this, you can define templates in a separate file and can pass in parameters.

http://docs.adobe.com/docs/en/aem/6-0/develop/sightly.html#template & call 

Answers (10)

Answers (10)

Avatar

Avatar

gabriel_walt

Employee

Avatar

gabriel_walt

Employee

gabriel_walt
Employee

15-10-2015

Got it! You're correct, each componentService.componentData.* variable access will call the getComponentData method.

Then I'd create another Java object to retrieve getComponentData, this will act like a cache for the current template:

public class Logic extends WCMUse { private ComponentData data; @Override public void activate() throws Exception { ComponentService s = new ComponentService(); data = s.getComponentData(); } public String getData() { return data; } }

If you have multiple templates all accessing the same service and data, and if getComponentData really is expensive, you could also easily cache it in a request attribute.

Avatar

Avatar

ashtrick

Avatar

ashtrick

ashtrick

15-10-2015

That sounds like the best idea. I will surely implement this.

Thank you Gabriel for your help.

Avatar

Avatar

gabriel_walt

Employee

Avatar

gabriel_walt

Employee

gabriel_walt
Employee

15-10-2015

Got it! You're correct, each componentService.componentData.* variable access will call the getComponentData method.

Then I'd create another Java object to retrieve getComponentData, this will act like a cache for the current template:

public class Logic extends WCMUse { private ComponentData data; @Override public void activate() throws Exception { ComponentService s = new ComponentService(); data = s.getComponentData(); } public String getData() { return data; } }

If you have multiple templates all accessing the same service and data, and if getComponentData really is expensive, you could also easily cache it in a request attribute.

Avatar

Avatar

ashtrick

Avatar

ashtrick

ashtrick

15-10-2015

Thanks Gabriel. That was really informative and I do understand the confusion that will emerge using data-sly-unwrap and also data-sly-test is used as conditional statement (also can set variables if the condition is true)

 

May be, I didn't make thinks more clear in my questions. So, what my code does is - the method componentService.componentData populates and object (of class ComponentData) and returns the object back. There are around 10 - 15 variables in the class which will be used/displayed in the template ( ${componentService.componentData.a}, ${componentService.componentData.b}, ${componentService.componentData.c}, ...etc ).

 

My understanding is (please correct me if I'm wrong), each time I use  ${componentService.componentData.<variable name>} in the template, it will invoke the 'getComponentData' method that will result in execution of the method. So, is it the best practice to get the object stored in Sightly variable and then use the variable in the template?

 

Thanks,

Avatar

Avatar

gabriel_walt

Employee

Avatar

gabriel_walt

Employee

gabriel_walt
Employee

15-10-2015

It would be possible to do both the double test and the variable assignment in one step, but that would look confusing, so I spare you that.

But I think that there's a conceptual issue in your code: data-sly-test isn't intended to be used only to set variables, it is primarily a conditional statement. Usually, you don't have to set variables in the template as you can simply access the members like that: ${componentService.componentData.foo}. In case you really have to set those variables, then you should rather prepare those in the Use-API.

But it seems to me that you try to write Sightly markup as if it were Java code:

componentService = new XComponentProxy(); if (componentService != null) { componentData = componentService.componentData; if (componentData != null) { out = "<p>" + componentData.foo + "</p>"; } }

This really is not the intent! The HTML elements in Sightly are not made to correspond to the blocks of your Java code, but to the resulting markup! This is why data-sly-unwrap should be used only where you cannot do differently, because it makes the template markup look less like the generated HTML.

Sightly is a higher-level template language and you really shouldn't care about all these tests in the markup. Typically, you could write just that and it would probably work well in your case:

<p data-sly-use.componentService="XComponentProxy">${componentService.componentData.foo}</p>

And add tests only if componentService or componentData can realistically not be available on a production environment. And only if this is the case, then your code would look like that:

<p data-sly-use.componentService="XComponentProxy" data-sly-test="${componentService && componentService.componentData}">${componentService.componentData.foo}</p>

I hope this helps.

Best,
Gabriel

Avatar

Avatar

ashtrick

Avatar

ashtrick

ashtrick

15-10-2015

Thanks for the reply... but doesn't work 😞

Avatar

Avatar

ashtrick

Avatar

ashtrick

ashtrick

15-10-2015

@Mshajiahmed thanks for the reply, but this is not working

Avatar

Avatar

ashtrick

Avatar

ashtrick

ashtrick

15-10-2015

Thanks Gabriel for the suggestion.

 

Ho do I assign response of componentService.componentData to a sightly variable in this case? (in my case, data-sly-test.componentData="${componentService.componentData}")

Bit confused on how do I check the componentService and componentService.componentData and also assign this to sightly variable for further use (change the below line)

data-sly-test="${componentService && componentService.componentData}"

 

Thanks,

Avatar

Avatar

gabriel_walt

Employee

Avatar

gabriel_walt

Employee

gabriel_walt
Employee

15-10-2015

Btw, to keep the template markup as simple as possible, your first two divs should be combined into one:

<div data-sly-use.componentService="XComponentProxy" data-sly-test="${componentService && componentService.componentData}" data-sly-unwrap> ... </div>

Avatar

Avatar

Mshajiahmed

Avatar

Mshajiahmed

Mshajiahmed

15-10-2015

Try something like this

<div data-sly-include=”${ ‘y.html‘ @ param1=currentPage, param2=‘advanced‘ }”>