how to convert the jsp script to slightly. Also where can i get the slightly full documentation for the available tags usage - aem

How to convert the <% String rootpath =currentPage.getAbsoluteParent(3).getPath(); %> code into the SLIGHTLY tag for printing the rootpath value.
Example i can get the currentpage children by using <ul data-sly-list.first="${currentPage.listChildren}">
<li>${child.title}</li>
</ul>
Also where can i get the slightly full documentation for the available tags usage ?

In short, it is not possible.
Sightly is more of a templating language and all your business logic should be achieved either through a Java or Javascript Use API.
To achieve this, you can either use a JS Use API (a simplest example shown below,a file named helper.js residing in the same directory as my sightly HTML).
use(function () {
return {
rootPath: currentPage.getAbsoluteParent(2).getPath()
};
});
And then you can use this in your sightly file as shown below.
<div data-sly-use.helper="helper.js">
${helper.rootPath}
</div>
And additionally, your example list wouldn't run because you have created an object first whereas you are referring to child within the list. It should be
<ul data-sly-list.child="${currentPage.listChildren}">
<li>${child.title}</li>
</ul>
The full documentation of Sightly can be found here. You can get the introduction to Sightly through this experience delivers blogs. The entire Sightly specification can be found here.

Related

wicket 9: Testing page rendering. How To find a path to a component, link, etc

I want to use wicket tester to test my web application, however I'm totally lost on
what is a path and how to come up with one while testing certain components and behaviour
i.e
public void executeAjaxEvent(final String componentPath, final String event);
How does one come up with a componentPath?
I'm trying to brute force the path of this piece code, so that I could click optionLink, but still no luck, testing seems to be pointless endeavor as there are no way to find a path
<ul class="dropdown-menu">
<li wicket:id="options">
<a href="#" wicket:id="optionLink">
</a>
</li>
</ul>
You could use wicketTester.debugComponentTrees() to print the Page's children paths.
A component path is a sequence of wicket:id separated by a colon and from the page to the specific component.
In your case:
options:0:optionLink
Note that repeaters add additional counters in between, thus the number for the n-th list item.
With DebugSettings#setComponentPathAttributeName() you can specify an HML attribute that should be used to write each component's path into the markup.

How to use onclick method inside AEM component

Am having a AEM6 html component, am getting the values from dialog and using it inside the component via the .js file and using the return properties.
I could able to get the authored values but it is getting null or empty when am using it inside the onclick method. Please find below the code snippet below.
<div data-sly-unwrap data-sly-use.test="test.js"></div>
<a href="#" class="${test.testId}" id="${test.testId}" onClick="toggleDraw('${test.testId}')" >
The content I authored is getting displayed in class and Id, but it is not displaying in the onClick method.
Below is the Output am getting after authoring.
<a href="#" class="get-a-quote" id="get-a-quote" onClick="toggleDraw('')" >
Output I needed is :
<a href="#" class="get-a-quote" id="get-a-quote" onClick="toggleDraw('get-a-quote')" >
This should do the trick:
<a data-sly-test.variable123="toggleDraw('${test.testId}')" href="#" class="${test.testId}" id="${test.testId}" onclick="${variable123 # context='attribute'}" >
You need to put the function call in a variable because of the nested single quotes. And you need to manually set the context in this case. If "attribute" does some escaping you do not like, you could use "unsafe" - this will end in all escaping mechanisms being disabled. That might or might not be a security issue for your application.
HTH

AEM - data-sly-resource children html

I want to figure out a way to insert HTML inside a <sly data-sly-resource> tag and be able to go inside the component I am retrieving from the resource attribute.
To compare, it would be something like Vue's slots, and React's { this.props.children }.
Example:
Parent Component
<sly data-sly-resource="${'example' # resourceType='path/to/component/structure/example'}">
<h1>Hello World</h1>
</sly>
Example Component
<div id="example-component">
${ variable.getChildrenHTMLCall() } // Does something like this exist?
</div>
Output
<div id="example-component">
<h1>Hello World</h1>
</div>
This functionality does not exist.
You could make a similar functionality by using data-sly-template. But you’d have to pass the HTML sting as a parameter (more specifically option) but that might not be desired or maintainable.
You could use the com.day.cq.contentsync.handler.util.RequestResponseFactory as seen here: http://www.nateyolles.com/blog/2015/10/get-rendered-html-for-an-aem-resource-or-component

Declarative support questions

I am trying to add an htmlview (which is using declarative support according to SAP's docs) to an index page that is also using declarative support. Using data-sap-ui-type="ui.MyView" makes me to ask two questions:
Is there any equivalent to sap.ui.localResources in declarative support?
data-ui-type is not adding the view.html suffix to the view that should be laoded. Is there a special pattern for MVC in declarative support or is there currently no way to implement it?
Kind regards,
Nico
find some basic samples here:
https://openui5.hana.ondemand.com/#docs/guide/MVC.html
First of all I believe that you always have to set sap.ui.localResources in code.
As you can see instanciating a HTMLView from an HTMLView goes like this:
<div data-sap-ui-type="sap.ui.core.mvc.HTMLView" id="MyHTMLView" data-view-name="example.mvc.test2"></div>
This will load example.mvc.test2.view.html and place it into your parent view.
Generally speaking the JS API translates into HTMLViews like this:
new sap.ui.AnyControl("myId", {
aLittleProperty: "10",
property: false,
press: functionInMyController,
morePress: a.static.myFunction,
defaultAggregation: [
new sap.ui.OtherControl("otherId1"),
new sap.ui.OtherControl("otherId2")
],
anotherAggregation: new sap.ui.OtherControl("otherId3")
}).addStyleClass("myClass");
<div data-sap-ui-type="sap.ui.AnyControl"
id="myId"
class="myClass"
data-a-little-property="10",
data-property="false"
data-press="functionInMyController"
data-more-press="a.static.myFunction">
<div data-sap-ui-type="sap.ui.OtherControl" id="otherId1"></div>
<div data-sap-ui-type="sap.ui.OtherControl" id="otherId2"></div>
<div data-sap-ui-aggregation="anotherAggregation">
<div data-sap-ui-type="sap.ui.OtherControl" id="otherId3"></div>
</div>
</div>
Note that:
The id and CSS classes are set with the regular HTML attributes
Property names translate from camelCase to lower-case separated with "-" (due to the fact that HTML is not case-sensitive)
No matter what type the property is you of course have to put it in quotes in HTML
Whatever you put directly inside a HTML-defined control is considered to belong into it's default aggregation
BR
Chris

Evaluating expression and pass as argument in Sightly AEM

I have the following Sightly expression:
<li data-sly-call="${linkTemplate.dynamicLink # section='education',
url='/en/life-career-events.html', text=${'comp.masthead.navigation.home' # i18n}}">
</li>
The dynamiclink template is as follows:
<div data-sly-template.dynamicLink="${# section, url, text}"
data-sly-use.membersNav="${'com.comp.cms.component.masthead.MembersNavigation' # section=section}">
<a data-sly-attribute.class="${membersNav.cssClass}" href="${url}">${text}</a>
</div>
This doesn't work because text=${'comp.masthead.navigation.home' # i18n} isn't evaluated as a string and then passed into the dynamiclink.
Is this possible? Can I evaluate and assign to a variable or do I have to create a new template when I want to evaluate i18n lookups?
Sightly 1.1 doesn't allow to have expressions within expressions, and there's no plan to change that for now.
Hacking the solution:
There's a trick: data-sly-test can be (ab)used to set variables. It's not really a recommended way to do though, unless you have a real condition, because this will mislead someone who reads the template in thinking that the intention was to have an actual condition.
The trick goes like that: an identifier can be provided to data-sly-test, which will expose the result of the test as a variable. Additionally, data-sly-test will be considered true, unless the resulting string is empty.
For e.g.:
<p data-sly-test.spanishAsset="${'Asset' # i18n, locale='es'}">${spanishAsset}</p>
Outputs:
<p>Recurso</p>
So in your case, you could write:
<li data-sly-test.linkText="${'comp.masthead.navigation.home' # i18n}"
data-sly-call="${linkTemplate.dynamicLink # section='education',
url='/en/life-career-events.html', text=linkText}">
</li>
A cleaner solution
As you probably don't want to explain to all the users of this template that they have to write such a hack, and instead of having two separated templates for translated and non-translated texts, you could instead leverage optional templates parameters. So you might for e.g. have a noI18n optional parameter.
The call would then be as simple as it can be:
<!--/* Translating would be the default behavior */-->
<li data-sly-call="${linkTemplate.dynamicLink #
section='education',
url='/en/life-career-events.html',
text='comp.masthead.navigation.home'}"></li>
<!--/* Or translating could be turned off */-->
<li data-sly-call="${linkTemplate.dynamicLink #
section='education',
url='/en/life-career-events.html',
text='my text...',
noI18n=true}"></li>
The template would then have two data-sly-test conditions for the two cases (note that the data-sly-unwrap attributes can be dropped in AEM 6.1+):
<div data-sly-template.dynamicLink="${# section, url, text, noI18n}"
data-sly-use.membersNav="${'com.comp.cms.component.masthead.MembersNavigation'
# section=section}">
<a href="${url}" data-sly-attribute.class="${membersNav.cssClass}">
<sly data-sly-test="${noI18n}" data-sly-unwrap>${membersNav.text}</sly>
<sly data-sly-test="${!noI18n}" data-sly-unwrap>${membersNav.text # i18n}</sly>
</a>
</div>
Optionally, to keep the template as simple as possible and to remove those conditions, you could also make the Use-API do the translation, depending on the noI18n optional parameter:
<div data-sly-template.dynamicLink="${# section, url, text, noI18n}"
data-sly-use.membersNav="${'com.comp.cms.component.masthead.MembersNavigation'
# section=section, noI18n=noI18n}">
<a href="${url}" data-sly-attribute.class="${membersNav.cssClass}">
${membersNav.text}
</a>
</div>
The proper code for the logic to translate a string is:
Locale pageLang = currentPage.getLanguage(false);
I18n i18n = new I18n(slingRequest.getResourceBundle(pageLang));
String text = i18n.get("Enter a search keyword");