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,

View Entire Topic

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