Expand my Community achievements bar.

SOLVED

How to include javascript on template properties?

Avatar

Level 1

Hi everyone,

 

First time questioning here.
I have a select in a page template and I want to change the predefined value depending on the parent page when used this template to create a page.

To do this I was thinking to use JavaScript but don't know how to include it.

My dialog is in this path:

src/main/content/jcr_root/apps/app/components/commons/tab/page-temp/page-temp-basic/.content.xml

tried adding it in and made a console.log on it but didn't work

src/main/content/jcr_root/apps/app/components/commons/tab/page-temp/page-temp-basic/page-temp-basic.js

 

 

Can anyone help with this?

Thank you in advance

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@mustafaaaga 

To ensure that your Javascript is running from an editable template (via page policies configuration), you must fulfil each of these steps.

  1. Make sure you have a valid client library that has been deployed into your AEM environment; this client library must have a client library category, for example: mycustom.client.library.one
  2. Head into the edit mode for your editable template, and then from the top left navigation bar, select "Page Policies", now in the properties section, place in your client library category (like the diagram below)
  3. Next, create a new page that uses the template.
  4. Visit the page away from author mode (?wcmmode=disabled), and you should be able to see your client library embedded onto the page; you can now test your Javascript.

** There's other ways to include Javascript to your AEM website, check out this article.

BrianKasingli_0-1625005088528.png

 

View solution in original post

5 Replies

Avatar

Correct answer by
Community Advisor

@mustafaaaga 

To ensure that your Javascript is running from an editable template (via page policies configuration), you must fulfil each of these steps.

  1. Make sure you have a valid client library that has been deployed into your AEM environment; this client library must have a client library category, for example: mycustom.client.library.one
  2. Head into the edit mode for your editable template, and then from the top left navigation bar, select "Page Policies", now in the properties section, place in your client library category (like the diagram below)
  3. Next, create a new page that uses the template.
  4. Visit the page away from author mode (?wcmmode=disabled), and you should be able to see your client library embedded onto the page; you can now test your Javascript.

** There's other ways to include Javascript to your AEM website, check out this article.

BrianKasingli_0-1625005088528.png

 

Avatar

Employee Advisor

@mustafaaaga You can create a clientlibrary under your page component and use that js in the page component script to implement your logic.

Avatar

Community Advisor

Hi @mustafaaaga 

  If your requirement is to populate dynamic values in dropdown than you can also use Granite datasource instead if JS.

You can refer this documentation : https://aem.redquark.org/2018/10/day-18-working-with-granite-datasources.html

 

In this example they have used wcmPojo for creating datasource but you can use SlingModels also.

 

Thanks

Dipti Chauhan

 

 

Avatar

Level 1

Hi, 

 

So for everyone in the future if need this I solved this way: 

Created a clientlib under the clientlibs folder.

On the content.xml I put the categories: 

categories="[coralui2,granite.ui.foundation,apps.sisal-fullresponsive.createpagewizard]"

I created the js folder and the js file. 

For the js to trigger on page properties I used

(function(window, document, Granite, $) {
"use strict";

$(document).on("foundation-contentloaded", function (e){
// Logic to be done here
});
})(window, document, Granite, Granite.$);

Thank you all for the replies!