Tagpicker Console in AEM6.3.0 (Customize width of tagpicker column screen) | Community
Skip to main content
tushaar_srivastava
tushaar_srivastava
Level 6
December 26, 2019
Solved

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

  • December 26, 2019
  • 1 reply
  • 2741 views

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 @71132 @arunpatidar 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by arunpatidar

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

 

1 reply

arunpatidar
Community Advisor
arunpatidarCommunity AdvisorAccepted solution
Community Advisor
December 26, 2019

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
    tushaar_srivastava
    tushaar_srivastavaAuthor
    Level 6
    December 30, 2019
    Thank you, the only concern I have is like if page load within given setTimeout then it;ll again not work for 1st time.
    Terms & ConditionsAccessibility statement

    Loading footer...