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

[tushaar_srivastava]

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 

[arunpatidar · Accepted solution]

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));

[tushaar_srivastava]

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

[arunpatidar]

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