Sightly - Include another HTML and pass parameters | Community
Skip to main content
October 16, 2015
Solved

Sightly - Include another HTML and pass parameters

  • October 16, 2015
  • 11 replies
  • 14091 views

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,

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Feike_Visser1

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 

11 replies

Community Advisor
October 16, 2015

Try something like this

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

GabrielWalt
Adobe Employee
Adobe Employee
October 16, 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>
ashtrickAuthor
October 16, 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,

ashtrickAuthor
October 16, 2015

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

ashtrickAuthor
October 16, 2015

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

Feike_Visser1
Adobe Employee
Feike_Visser1Adobe EmployeeAccepted solution
Adobe Employee
October 16, 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 

GabrielWalt
Adobe Employee
Adobe Employee
October 16, 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

ashtrickAuthor
October 16, 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,

GabrielWalt
Adobe Employee
Adobe Employee
October 16, 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.

GabrielWalt
Adobe Employee
Adobe Employee
October 16, 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.