Expand my Community achievements bar.

SOLVED

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

Avatar

Level 2

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?

1 Accepted Solution

Avatar

Correct answer by
Level 10

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

This is what I see in 6.4.3 OOB. 

1684044_pastedImage_2.png

1684178_pastedImage_4.png

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

View solution in original post

7 Replies

Avatar

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

        }

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

Avatar

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

        }

Avatar

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

Avatar

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...

Avatar

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.

Avatar

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...

Avatar

Correct answer by
Level 10

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

This is what I see in 6.4.3 OOB. 

1684044_pastedImage_2.png

1684178_pastedImage_4.png

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