Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

How do I add data-sly-list functionality inside a javascript function?

pmueller8
Level 2
Level 2

I'm writing a script that I'd like the author to be able to add new lines to the script as they add new elements to the page. The problem is I only know how to use the data-sly-list option in html in a <sly> tag. Here is an example of my script so you get the idea of what I'm trying to accomplish. I'm afraid the solution is creating a complicated sling model. My front-end knowledge struggles with those. More simple the solution the better. Thanks.

<script>
ui.validator(document.getElementById('${properties.formId @ context="scriptString"}'), {
fields: {
<sly data-sly-list.item="${list.validateItemsList @ context="scriptString"}">
${properties.multiinputid @ context="scriptString"}: { errorMessage: '${properties.multierrmessage @ context="scriptString"}', errorLocation: '${properties.multierrlocation @ context="scriptString"}', pattern: '${properties.multipattern @ context="scriptString"}', required: ${properties.multirequired @ context="scriptString"} },
</sly>
${properties.lastinputid @ context="scriptString"}: { errorMessage: '${properties.lasterrmessage @ context="scriptString"}', errorLocation: '${properties.lasterrlocation @ context="scriptString"}', pattern: '${properties.lastpattern @ context="scriptString"}', required: ${properties.lastrequired @ context="scriptString"} }
}
});
</script>

 

1 Accepted Solution
Jörg_Hoh
Correct answer by
Employee
Employee

You are mixing frontend and backend. HTL is a language which is handled on the backend, and it will output in valid HTML. 

Your browser cannot handle HTL, because even if the language interpreter would exist, it does not have access to all the data, which is required to execute; for example, the page properties are not available in the browser.

View solution in original post

3 Replies
pmueller8
Level 2
Level 2

Thanks for jumping in to help me. Of course in typical AEM fashion, the documentation is really vague and hard to understand. Any idea if there is any documentation that gives use cases or examples of this in action?

Jörg_Hoh
Correct answer by
Employee
Employee

You are mixing frontend and backend. HTL is a language which is handled on the backend, and it will output in valid HTML. 

Your browser cannot handle HTL, because even if the language interpreter would exist, it does not have access to all the data, which is required to execute; for example, the page properties are not available in the browser.

View solution in original post