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
BedrockMission!

Learn More

View all

Sign in to view all badges

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

Avatar

Avatar
Validate 10
Level 2
tushaar_srivastava
Level 2

Likes

8 likes

Total Posts

91 posts

Correct Reply

0 solutions
Top badges earned
Validate 10
Validate 1
Ignite 3
Ignite 1
Give Back 5
View profile

Avatar
Validate 10
Level 2
tushaar_srivastava
Level 2

Likes

8 likes

Total Posts

91 posts

Correct Reply

0 solutions
Top badges earned
Validate 10
Validate 1
Ignite 3
Ignite 1
Give Back 5
View profile
tushaar_srivastava
Level 2

25-12-2019

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 @Arun_Patidar 

customize column tagpicker js tagpicker

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,282 likes

Total Posts

3,156 posts

Correct Reply

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

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,282 likes

Total Posts

3,156 posts

Correct Reply

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

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

 

Answers (0)