Im not sure if i got the nomenclature right in the title of my question, Im new to play. Basically I wanted to break my html template by calling 2 sub-templates ( passing to them as argument an sub-object from the main template).
So my main template would be
#* patientInfoFrame Template File *#
#(alarm: Alarm)
#import helper._
#* Caller part *#
#calleInfoTemplate(#alarm.callee)
#* Patient part *#
#patientInfoTemplate(#alarm.patient)
where I receive an Alarm object as variable and would build part of the page by calling a second template calleInfoTemplate with a sub-object from the Alarm object and then a third template patientInfoTemplatewith another sub-object.
If I try to compile that it fails saying that #alarm.callee is an illegal start of simple expression.
How can I pass those sub-objects as input to the other templates?
You don't need the # escape character on your variables in this case because you are already inside a dynamic statement (the template call).
#* Caller part *#
#calleInfoTemplate(alarm.callee)
#* Patient part *#
#patientInfoTemplate(alarm.patient)
Related
I have a component that uses two different resources in its HTL/Sightly template.
Is there a way to pass a parameter, to the say in my example the eventResource template, so that I can depending on this passed paramter change a css class on it?
<ul data-sly-list.teasers="${model.resourceList}" class="teaser-list-alternating c-list--reset">
<sly data-sly-test="${teasers.eventTeaser}"
data-sly-resource="${teasers.resource # resourceType='xxx/components/content/eventTeaser'}"></sly>
<li data-sly-test="${teasers.contentTeaser}" class="l-stack l-stack--horse"
data-component-hook-content-hub="teaser"
data-sly-resource="${teasers.resource # resourceType='xxx/components/content/contentHubTeaser'}"></li>
</ul>
I tried using data-sly-resource="${teasers.resource # resourceType='xxx/components/content/eventTeaser', requestAttributes=model.config, selectors='blabla'} to no availability.
#RequestAttribute(name = "contentHub")
private String contentHub;
The requestAttribute contentHub in the eventTeaser model is alway null and I am not sure how to get the selectors value in the eventTeaser template.
I can do it using TypeScript on the front end part but it is not very clean.
I was able to solve it using the selectors indeed and reading the selector value directly from the other sightly template. Here is the documentation I refered to:
data-sly-resource="${teasers.resource # resourceType='xxx/components/content/eventTeaser', requestAttributes=model.config, selectors='inContentHub'}
In the eventTeaser template I then used the following:
data-sly-set.inContentHub="${'inContentHub' == request.requestPathInfo.selectorString}
and depending on the value of the inContentHub variable I was able to change the css class which was my ultimate goal.
I've been following the basic tutorial on Scala.js. In order to append a <p> tag to the body of my HTML page, the tutorial defines a function appendPar which appends a paragraph containing text to another node.
def appendPar(targetNode: dom.Node, text: String): Unit = {
val parNode = document.createElement("p")
val textNode = document.createTextNode(text)
parNode.appendChild(textNode)
targetNode.appendChild(parNode)
}
This function is called inside the main function of the TutorialApp to append <p>Hello world</p> to the body of the document. It worked fine when I tried it.
However, when I tried replacing the above code with a single line in main, Hello world was appended to the body, but not encapsulated in <p>...</p>.
document.body appendChild (document.createElement("p") appendChild
document.createTextNode("Hello world"))
As far as I can tell, my one-liner is equivalent to appendPar(document.body, "Hello world").
I don't really recommend that style of one-liner -- it's concise, but also confusing (mixing functional and side-effecting styles), and that's where your bug is coming from.
Ultimately, your inner block is returning the newly-created TextNode, so that's what is being used as the parameter to document.body appendChild. The fact that the TextNode was originally the child of the p is irrelevant -- it's then getting reparented right under document.body.
In other words, the sequence of events is:
Create the p element
Create the text node
Append the text node to the p
Append the text node to document.body
That last step changes where it goes...
In Fabricator Assemble, I could have a component button.html:
<a class="button">{{text}}</a>
I can use this with the syntax {{>button text='Home'}}. Notably, I have to specify a name for the "text" attribute.
I'm looking to see how I can handle not needing to do that in Assemble. The Literals section of the docs for Handlebars (whiich Fabricator Assemble is built on) highlights an alternative syntax with which I could include a button:
{{>button 'Home'}}
In this example, "Home" is a value without any name for it at all. Handlebars also indicates the following is possible as a basic block:
{{#button}}
<b>Some button content</b>
{{/button}}
Likewise, that content has no name.
I'd like to be able to do this same thing in Fabricator Assemble, but it doesn't seem to have a way for me to include this nameless content. In templates there's {% body %} but that doesn't work here.
In Handlebars, which Fabricator Assemble is based on, all examples for how to recreate this involve JavaScript, which doesn't translate well to Assemble.
What can I do to use {{>button 'Some text'}} or {{#button}}...{{/button}} syntax in Fabricator Assemble? Is this behaviour even available?
In the current version, the easiest way to achieve this is with a custom helper.
Add the following to the helpers option in your gulpfile.js:
default: (value, defaultValue) => {
return value || defaultValue;
},
Then inside a handlebars template:
<div>
{{default varName 'default value'}}
</div>
Out of this question: Random image with v:iterator.random | cache issue
I use a partial to render non-cacheable stuff (in this case a random image).
I do this with this code in the main-template:
{v:render.uncache(partial: 'Random-Image', arguments: {iterator: images})}
Have this directly in the template outputs the right thing (the url to an image, for example fileadmin/upload/abc.jpg). But if I want to use this as a variable for the src from <f:image it does not work:
<f:image src="{v:render.uncache(partial: 'Random-Image', arguments: {iterator: images})}" alt="alt text" />
Also set as a variable it with v:variable.set does not work.
All I get is: <!--INT_SCRIPT.0081e57d9fd92c925bb35d79fd9d3f79-->
Also when I debug it:
<f:debug>
{v:render.uncache(partial: 'Random-Image', arguments: {iterator: images})}
</f:debug>
I get <!--INT_SCRIPT.0081e57d9fd92c925bb35d79fd9d3f79-->
So, is it possible to use the output of a partial as a variable? Or is it possible to set a variable in the partial and use it in the main-template?
I think you mixed up two things a bit, so I would like to separate your questions:
1) Is it possible to use the output of a partial as a variable?
Yes, like the way you wanted it. Actually you did it.
But let see a test:
There is a Partial : Test/Message
With the content: "It is a test"
Then in the main template you can use something like this:
<div class="test">
<f:if condition="{f:render(partial:'Test/Message')}
== 'It is a test'">
<f:then>Passed</f:then>
<f:else>Failed</f:else>
</f:if>
</div>
In this case you would see "Passed" and if you change the Partial to "It should failed" then you will get "Failed" rendered.
2) Why do you see <!--INT_SCRIPT.0081e57d9fd92c925bb35d79fd9d3f79--> ?
This is a not cached content, so like COA_INT or USR_INT objects in TypoScript.
You can find a function in the typo3/sysext/frontend/Classes/Controller/TypoScriptFrontendController.php its name is INTincScript_process. It is responsible to find such lines in the code and replace them with the not cached content.
It means, if you render your Template, that partial renders only a reference to a not cached object, but not the content itself.
Finally to suggest a solution to the original problem, try to render the whole image inside the partial not just the path to it. So include the into the partial where the v:iterate.random ViewHelper is used. Then the v:render.uncache should mark the whole image block as not cacheable.
I am trying to implement something which I hope is relatively straight forward... I have one component (lets call it the wrapper component) which contains another component (lets call it the inner component) inside it via the data-sly-resource tag:
<div data-sly-resource="${ 'inner' # resourceType='/projectname/components/inner' }"></div>
I would like to pass in some additional parameters with this tag, specifically a parameter that can be picked up by sightly in the inner component template? I am trying to specify whether the inner templates outer html tag is unwrapped based on a parameter being passed in when the component is called via data-sly-resource.
After experimenting and perusing the sightly documentation, I can't find a way of achieving this.
Does anyone know if this is possible?
Many thanks,
Dave
You can use the Use-API to write and read request attributes if the alternatives proposed here don't work for you.
A quick example of two components where the outer component sets attributes that are then displayed by the inner component:
/apps/siteName/components/
outer/ [cq:Component]
outer.html
inner/ [cq:Component]
inner.html
utils/ [nt:folder]
setAttributes.js
getAttributes.js
/content/outer/ [sling:resourceType=siteName/components/outer]
inner [sling:resourceType=siteName/components/inner]
/apps/siteName/components/outer/outer.html:
<h1>Outer</h1>
<div data-sly-use="${'../utils/setAttributes.js' # foo = 1, bar = 2}"
data-sly-resource="inner"></div>
/apps/siteName/components/inner/inner.html:
<h1>Inner</h1>
<dl data-sly-use.attrs="${'../utils/getAttributes.js' # names = ['foo', 'bar']}"
data-sly-list="${attrs}">
<dt>${item}</dt> <dd>${attrs[item]}</dd>
</dl>
/apps/siteName/components/utils/setAttributes.js:
use(function () {
var i;
for (i in this) {
request.setAttribute(i, this[i]);
}
});
/apps/siteName/components/utils/getAttributes.js:
use(function () {
var o = {}, i, l, name;
for (i = 0, l = this.names.length; i < l; i += 1) {
name = this.names[i];
o[name] = request.getAttribute(name);
}
return o;
});
Resulting output when accessing /content/outer.html:
<h1>Outer</h1>
<div>
<h1>Inner</h1>
<dl>
<dt>bar</dt> <dd>2</dd>
<dt>foo</dt> <dd>1</dd>
</dl>
</div>
As commented by #AlasdairMcLeay, this proposed solution has an issue in case the inner component is included multiple times on the request: the subsequent instances of the component would still see the attributes set initially.
This could be solved by removing the attributes at the moment when they are accessed (in getAttributes.js). But this would then again be a problem in case the inner component is split into multiple Sightly (or JSP) files that all need access to these attributes, because the first file that accesses the request attributes would also remove them.
This could be further worked-around with a flag telling wether the attributes should be removed or not when accessing them... But it also shows why using request attributes is not a good pattern, as it basically consists in using global variables as a way to communicate among components. So consider this as a work-around if the other two solutions proposed here are not an option.
There is a newer feature that request-attributes can be set on data-sly-include and data-sly-resource :
<sly data-sly-include="${ 'something.html' # requestAttributes=amapofattributes}" />
Unfortunately it doesn't seem to be possible to construct a Map with HTL (=Sightly) expressions, and I don't see a way to read a request attribute from HTL, so you still need some Java/Js code for that.
unfortunately, no. there is no way to extend sightly functionality. you cannot add new data-sly attributes or modify existing ones. The best you can do is write your own helper using the USE API
If you just need to wrap or unwrap the html from your inner component in different situations, then you can just keep the html in the component unwrapped, and wrap it only when needed by using the syntax:
<div data-sly-resource="${ 'inner' # resourceType='/projectname/components/inner', decorationTagName='div', cssClassName='someClassName'}"></div>
If you need more complex logic, and you need to pass a value to your inner component template, you can use the selectors. The syntax for including the resource with selectors is:
<div data-sly-resource="${ 'inner' # resourceType='/projectname/components/inner', selectors='mySelectorName'}"></div>
The syntax to check the selectors in the inner component is:
${'mySelectorName' in request.requestPathInfo.selectorString}"
or
${'mySelectorName' == request.requestPathInfo.selectorString}"