Sightly - Include another HTML and pass parameters

[ashtrick]

Hi 

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,

[Mshaji]

Try something like this

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

[gabriel_walt]

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>

[ashtrick]

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,

[ashtrick]

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

[ashtrick]

Thanks for the reply... but doesn't work :(

[Feike_Visser1 · Accepted solution]

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 

[gabriel_walt]

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

[ashtrick]

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,

[gabriel_walt]

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.

[gabriel_walt]

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.

[ashtrick]

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

Thank you Gabriel for your help.