Expand my Community achievements bar.

SOLVED

Tagpicker Console in AEM6.3.0 (Customize width of tagpicker column screen)

Avatar

Level 7

Hi,
I want to see the alert or any console.log after opening the tagpicker. (once all the content of tagpicker is visible or after opening the tagpicker console then show alert/console.log, not while loading tagpicker in dialog)

 

Problem : Suppose in touchui dialog we have one pathbrowser and one tagpicker.

Now, suppose if we click on image, it'll show the paths, and if we click on tagpicker it'll show the tags,

requirement is to change the width of Tagpicker column width.

 

So, we are ready with logic, but problem is it is loading on second time onclick of tagpicker. 1st time no change in width.

 

 $('.js-coral-pathbrowser-button').click(function() {

            $('.coral-Icon.coral-Icon--tags').each(function( index ) {

                $(this).parents('.coral-ColumnView-column').first().css({"maxWidth": "21.870rem"});

            });

        });

 

 

So, need help to get this code executed while opening the tagpicker screen on the first go.

 

@kautuk_sahni @arunk @arunpatidar 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi,

The reason is first time, the tag picker popover is not part of DOM. The Popover DOM as added when you click on picker button but your code is also executing at the same time. Adding a small delay in your code execution will resolve the problem.

 

Use below code

 

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

$document.on("dialog-ready", function() {
$('.js-coral-pathbrowser-button').click(function() {
setTimeout(function() {
$('.coral-Icon.coral-Icon--tags').each(function(index) {
$(this).parents('.coral-ColumnView-column').first().css({
"maxWidth": "21.870rem"
});
});
}, 300);
});
});

})($, $(document));

 



Arun Patidar

View solution in original post

3 Replies

Avatar

Correct answer by
Community Advisor

Hi,

The reason is first time, the tag picker popover is not part of DOM. The Popover DOM as added when you click on picker button but your code is also executing at the same time. Adding a small delay in your code execution will resolve the problem.

 

Use below code

 

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

$document.on("dialog-ready", function() {
$('.js-coral-pathbrowser-button').click(function() {
setTimeout(function() {
$('.coral-Icon.coral-Icon--tags').each(function(index) {
$(this).parents('.coral-ColumnView-column').first().css({
"maxWidth": "21.870rem"
});
});
}, 300);
});
});

})($, $(document));

 



Arun Patidar

Avatar

Level 7
Thank you, the only concern I have is like if page load within given setTimeout then it;ll again not work for 1st time.

Avatar

Community Advisor
I have just use sample time frame, you can set time out/delay based on page load.


Arun Patidar