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
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Set current page title to dialog text field on initial load

AEMnewbie
Level 4
Level 4

I have a text field in my dialog box . I am trying to prepopulate it with currentpage title . When it is initially loaded . How can i achieve that ? I can create a js with dialog ready - But i am not sure on how we can access the text field in the js and set it with current page title . 

1 Accepted Solution
Asutosh_Jena_
Correct answer by
Community Advisor
Community Advisor

Hi @AEMnewbie 

 

Please create a component specific clientlib which will be loaded only during component authoring and load the below JS file.

 

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

$document.on("dialog-ready", function () {
var title = $(document).attr('title');
var titleFromDialog = $(".my-custom-component").find('input[type=text]').val();
if (titleFromDialog == null || titleFromDialog == "") {
$(".my-custom-component").find('input[type=text]').val(title);
}
});

})($, $(document));

 

on component cq:dialog node add the property called extraClientlibs and provide the category name of your clientlibs which holds the above code.

 

Provid a custom class to your dialog field where you want to populate the title i.e. my-custom-component here.

 

Now when the dialog value is empty, it will show the page title, and if the value is authored in dialog it will show the dialog authored value.

 

Let me know if there are any questions. Hope this helps!

 

Please see my response in the below article:

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-set-property-value-of-...

 

Thanks!

 

View solution in original post

5 Replies
Asutosh_Jena_
Correct answer by
Community Advisor
Community Advisor

Hi @AEMnewbie 

 

Please create a component specific clientlib which will be loaded only during component authoring and load the below JS file.

 

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

$document.on("dialog-ready", function () {
var title = $(document).attr('title');
var titleFromDialog = $(".my-custom-component").find('input[type=text]').val();
if (titleFromDialog == null || titleFromDialog == "") {
$(".my-custom-component").find('input[type=text]').val(title);
}
});

})($, $(document));

 

on component cq:dialog node add the property called extraClientlibs and provide the category name of your clientlibs which holds the above code.

 

Provid a custom class to your dialog field where you want to populate the title i.e. my-custom-component here.

 

Now when the dialog value is empty, it will show the page title, and if the value is authored in dialog it will show the dialog authored value.

 

Let me know if there are any questions. Hope this helps!

 

Please see my response in the below article:

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-set-property-value-of-...

 

Thanks!

 

View solution in original post

Asutosh_Jena_
Community Advisor
Community Advisor

Hi @AEMnewbie 

 

That's the reason I mentioned it needs to be applied only at the file level so it will not have any impact on other fields. It works with the screenshot that I sent in the above URL.

 

Can you check the below link and see my comment where I added the screenshot for each field.

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-set-property-value-of-...

 

Thanks!

AEMnewbie
Level 4
Level 4

It wasnt working at field level . I made some minor change to it .

 

var titleFromDialog = $(".my-custom-component").val();
console.log(titleFromDialog)
if (titleFromDialog == null || titleFromDialog == "") {
$(".my-custom-component").val(title);
}

 This worked for me.