How to include javascript on template properties?

Avatar

Avatar
Establish
Level 1
mustafaaaga
Level 1

Likes

0 likes

Total Posts

2 posts

Correct reply

0 solutions
Top badges earned
Establish
View profile

Avatar
Establish
Level 1
mustafaaaga
Level 1

Likes

0 likes

Total Posts

2 posts

Correct reply

0 solutions
Top badges earned
Establish
View profile
mustafaaaga
Level 1

29-06-2021

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

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

648 likes

Total Posts

608 posts

Correct reply

240 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

648 likes

Total Posts

608 posts

Correct reply

240 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile
BrianKasingli
MVP

29-06-2021

@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

 

Answers (4)

Answers (4)

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,462 likes

Total Posts

3,329 posts

Correct reply

949 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,462 likes

Total Posts

3,329 posts

Correct reply

949 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
Arun_Patidar
MVP

30-06-2021

you can inject dialog javascript using extraClientlibs property in the dialog node

more info 

http://rimamittal.blogspot.com/2017/06/extraclientlibs-in-aem.html

http://aemtool.blogspot.com/2016/12/enabling-extra-clientlibs-for.html

Avatar

Avatar
Boost 100
Level 6
Dipti_Chauhan
Level 6

Likes

126 likes

Total Posts

144 posts

Correct reply

41 solutions
Top badges earned
Boost 100
Give Back 10
Affirm 25
Boost 50
Boost 25
View profile

Avatar
Boost 100
Level 6
Dipti_Chauhan
Level 6

Likes

126 likes

Total Posts

144 posts

Correct reply

41 solutions
Top badges earned
Boost 100
Give Back 10
Affirm 25
Boost 50
Boost 25
View profile
Dipti_Chauhan
Level 6

29-06-2021

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

Avatar
Boost 250
MVP
shelly-goel
MVP

Likes

250 likes

Total Posts

410 posts

Correct reply

107 solutions
Top badges earned
Boost 250
Affirm 100
Give Back 25
Ignite 3
Give Back 10
View profile

Avatar
Boost 250
MVP
shelly-goel
MVP

Likes

250 likes

Total Posts

410 posts

Correct reply

107 solutions
Top badges earned
Boost 250
Affirm 100
Give Back 25
Ignite 3
Give Back 10
View profile
shelly-goel
MVP

29-06-2021

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

Avatar

Avatar
Establish
Level 1
mustafaaaga
Level 1

Likes

0 likes

Total Posts

2 posts

Correct reply

0 solutions
Top badges earned
Establish
View profile

Avatar
Establish
Level 1
mustafaaaga
Level 1

Likes

0 likes

Total Posts

2 posts

Correct reply

0 solutions
Top badges earned
Establish
View profile
mustafaaaga
Level 1

16-07-2021

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!