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

[ronaldd85054752]

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?

[Gaurav-Behl]

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

        }

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

[ronaldd85054752]

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]

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

[ronaldd85054752]

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]

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.

[ronaldd85054752]

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-Behl · Accepted solution]

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