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

ronaldd85054752

01-02-2019

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?

Accepted Solutions (1)

Accepted Solutions (1)

Gaurav-Behl

MVP

04-02-2019

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

Answers (6)

Answers (6)

ronaldd85054752

04-02-2019

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

MVP

04-02-2019

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

04-02-2019

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

MVP

04-02-2019

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

04-02-2019

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

MVP

02-02-2019

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

        }

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