Level 2

Solved

Issue with CoralUI3 and MSM - Blueprint/livecopy action buttons not showing up in page properties when switching to livecopy or blueprint tabs

Forum|Forum|6 years ago
February 1, 2019
7 replies
4228 views

So - We're working on an AEM 6.4 upgrade project coming from AEM 6.2.

I did the work to upgrade our configurations and such to get everything working and we've updated our dialogs to coral3, but it seems that now when you switch to either the blueprint tab or the livecopy tab (depending on the page) in the page properties for a given page, the button in the upper left don't show up.

By inspecting the DOM, I can see they're there, but they never get unhidden. Looking at one of the environments we haven't upgraded yet, I could see that this file:

/libs/wcm/msm/components/touch-ui/propertiesdialog/clientlibs/propertiesdialog.min.js

seems to bind the action to unhide the buttons, but it also is looking for classes and such that are in CoralUI2... So what am I missing here?

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 Gaurav-Behl

You might've to debug your code in that case..

This is what I see in 6.4.3 OOB.

- /libs/wcm/msm/components/touch-ui/propertiesdialog/clientlibs/propertiesdialog/js/listeners/tab.click.js

(function(window, document, $, Granite) {

"use strict";

/**

* Handler to show/hide the MSM action buttons according to the selected tab.

*/

$(document).on("coral-panelstack:change", ".cq-siteadmin-admin-properties-tabs", function(e) {

var $tabPanel = $(e.target).closest(".cq-siteadmin-admin-properties-tabs");

var $actionBar = $("coral-actionbar");

var $target = $tabPanel.find(".cq-siteadmin-admin-properties-blueprint");

if ($target.length > 0 && e.detail.selection.contains($target[0])) {

$actionBar.find(".cq-siteadmin-admin-properties-actions-blueprint").removeClass("hide");

} else {

$actionBar.find(".cq-siteadmin-admin-properties-actions-blueprint").addClass("hide");

}

$target = $tabPanel.find(".cq-siteadmin-admin-properties-livecopy");

if ($target.length > 0 && e.detail.selection.contains($target[0])) {

$actionBar.find(".cq-siteadmin-admin-properties-actions-livecopy").removeClass("hide");

} else {

$actionBar.find(".cq-siteadmin-admin-properties-actions-livecopy").addClass("hide");

}

$target = $tabPanel.find(".js-cq-sites-PermissionsProperties");

if ($target.length > 0 && e.detail.selection.contains($target[0])) {

$actionBar.find(".js-cq-sites-PermissionsProperties-action").removeClass("hide");

} else {

$actionBar.find(".js-cq-sites-PermissionsProperties-action").addClass("hide");

}

});

})(window, document, Granite.$, Granite);

Gaurav-Behl

Level 10

The actual file name is /libs/wcm/msm/components/touch-ui/propertiesdialog/clientlibs/propertiesdialog/js/listeners/tab.click.js

which gets loaded with a hash - http://localhost:4502/libs/wcm/msm/components/touch-ui/propertiesdialog/clientlibs/propertiesdialog.8025b4a8c48d85d61899… I'm not able to see the minified version as you mentioned. Not sure, if that is a typo or you can actually see a min.js which might be an issue ?

Open 'sources' tab in developer tools, put couple breakpoints in this js file on your custom page and check if you can see any object in '$tabPanel' and '$target.length' > 0 or not?

tab.click.js code:

/**

* Handler to show/hide the MSM action buttons according to the selected tab.

*/

$(document).on("coral-panelstack:change", ".cq-siteadmin-admin-properties-tabs", function(e) {

var $tabPanel = $(e.target).closest(".cq-siteadmin-admin-properties-tabs");

var $actionBar = $("coral-actionbar");

var $target = $tabPanel.find(".cq-siteadmin-admin-properties-blueprint");

if ($target.length > 0 && e.detail.selection.contains($target[0])) {

$actionBar.find(".cq-siteadmin-admin-properties-actions-blueprint").removeClass("hide");

} else {

$actionBar.find(".cq-siteadmin-admin-properties-actions-blueprint").addClass("hide");

}

..............

R

Ronald_DiemickeAuthor

Level 2

gauravb10066713 - So my tab.click.js looks different... see below... What version of AEM did you pull that from? It seems concerning that it's different and it seems likely that this is the reason we're seeing the issue we're seeing...

Thanks!

tab.click.js code:

/**

* Handler to show/hide the MSM action buttons according to the selected tab.

*/

$(document).on("click", ".coral-TabPanel.cq-siteadmin-admin-properties-tabs > .coral-TabPanel-navigation > .coral-TabPanel-tab", function(e) {

var $tabPanel = $(e.target).closest(".cq-siteadmin-admin-properties-tabs");

var $actionBar = $("coral-actionbar");

if ($tabPanel.find(".cq-siteadmin-admin-properties-blueprint:visible").length > 0) {

$actionBar.find(".cq-siteadmin-admin-properties-actions-blueprint").removeClass("hide");

} else {

$actionBar.find(".cq-siteadmin-admin-properties-actions-blueprint").addClass("hide");

}

if ($tabPanel.find(".cq-siteadmin-admin-properties-livecopy:visible").length > 0) {

$actionBar.find(".cq-siteadmin-admin-properties-actions-livecopy").removeClass("hide");

} else {

$actionBar.find(".cq-siteadmin-admin-properties-actions-livecopy").addClass("hide");

}

Gaurav-Behl

Level 10

I've pulled it from 6.4.3 author. Did you get a chance to debug '$tabPanel' ?

apply breakpoint on 'if ($tabPanel.find(".cq-siteadmin-admin-properties-blueprint:visible").length > 0) {'

and test

R

Ronald_DiemickeAuthor

Level 2

gauravb10066713 - I didn't apply a breakpoint, because it never gets there as the binding action is different; it never binds to the tab with the code we have. We're running 6.4.2; so I'm wondering if this isn't fixed in 6.4.3...

Gaurav-Behl

Level 10

two possible approaches to proceed further-

1) check this behavior on OOB We-Retail site or some other page where your custom code doesn't load to isolate your code customization

2) install a fresh 6.4.2 or 6.4.0 (don't upgrade, unpack/run as it is) and test on it to get more clues.

R

Ronald_DiemickeAuthor

Level 2

gauravb10066713 - we just fired up a fresh copy of 6.4.0 and tab.click.js looks like it does in our 6.4.2 version - I'm pretty sure that this won't work with CoralUI3 without the way the one you have looks...

Gaurav-BehlAccepted solution

Level 10

You might've to debug your code in that case..

This is what I see in 6.4.3 OOB.

- /libs/wcm/msm/components/touch-ui/propertiesdialog/clientlibs/propertiesdialog/js/listeners/tab.click.js

(function(window, document, $, Granite) {

"use strict";

/**

* Handler to show/hide the MSM action buttons according to the selected tab.

*/

$(document).on("coral-panelstack:change", ".cq-siteadmin-admin-properties-tabs", function(e) {

var $tabPanel = $(e.target).closest(".cq-siteadmin-admin-properties-tabs");

var $actionBar = $("coral-actionbar");

var $target = $tabPanel.find(".cq-siteadmin-admin-properties-blueprint");

if ($target.length > 0 && e.detail.selection.contains($target[0])) {

$actionBar.find(".cq-siteadmin-admin-properties-actions-blueprint").removeClass("hide");

} else {

$actionBar.find(".cq-siteadmin-admin-properties-actions-blueprint").addClass("hide");

}

$target = $tabPanel.find(".cq-siteadmin-admin-properties-livecopy");

if ($target.length > 0 && e.detail.selection.contains($target[0])) {

$actionBar.find(".cq-siteadmin-admin-properties-actions-livecopy").removeClass("hide");

} else {

$actionBar.find(".cq-siteadmin-admin-properties-actions-livecopy").addClass("hide");

}

$target = $tabPanel.find(".js-cq-sites-PermissionsProperties");

if ($target.length > 0 && e.detail.selection.contains($target[0])) {

$actionBar.find(".js-cq-sites-PermissionsProperties-action").removeClass("hide");

} else {

$actionBar.find(".js-cq-sites-PermissionsProperties-action").addClass("hide");

}

});

})(window, document, Granite.$, Granite);

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded