Cannot add or edit components in Touch UI

Avatar

Avatar

alistairp781078

Avatar

alistairp781078

alistairp781078

03-02-2020

I'm using AEM 6.4 with SP3.

 

I'm currently having trouble adding components to a page and editing existing components in Touch UI.

 

For some reason the add component icon doesn't appear on the main parsys on the page:

alistairp781078_0-1580722461062.png

 

Additionally, the edit component button isn't appearing either:

alistairp781078_1-1580722526320.png

 

For some reason, I can edit the content in classic mode, so this looks like it's a Touch UI issue.

 

I have been using this author for around six months with no prior issues. This error occurred after a deployment this morning, which I have tried reverting with no success. The code in that deployment was fairly innocuous: just a minor change to a HTL file. I have also tried restarting the server.

 

I cannot see any errors in the console or in the error log.

 

Any thoughts on what the cause of this might be?

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

Vish_dhaliwal

Employee

Avatar

Vish_dhaliwal

Employee

Vish_dhaliwal
Employee

03-02-2020

Hello,

Are you accessing this author through dispatcher?

If the caching is enabled on author dispatcher, then you can run into a similar issue.

Regards,

Vishu

 

 

Answers (3)

Answers (3)

Avatar

Avatar

alistairp781078

Avatar

alistairp781078

alistairp781078

03-02-2020

I've been doing some more digging around in the JS and think there's a permissions issue somewhere in the mix.

I'm looking at the configure button that gets added to the editing toolbar (/libs/cq/gui/components/authoring/editors/clientlibs/core/js/edit/ToolbarActions/edit.ToolbarActions.js):

ns.edit.ToolbarActions.CONFIGURE = new ns.ui.ToolbarAction({
        name: "CONFIGURE",
        icon: "wrench",
        text: Granite.I18n.get("Configure"),
        execute: function openEditDialog(editable) {
            ns.DialogFrame.openDialog(new ns.edit.Dialog(editable));
        },
        condition: function (editable) {
            return ns.pageInfoHelper.canModify() && editable.hasAction("CONFIGURE") && !!editable.config.dialog;
        },
        isNonMulti: true
    });

For the line starting return ns.pageInfoHelper.canModify(), I think there is some data missing in the page info json object.

On my broken machine, I cannot see a permissions array:

alistairp781078_0-1580753324274.png

However, I'm my working, local machine, I can:

alistairp781078_1-1580753364731.png

Can anyone think of a reason why this permissions array is not being passed into the page info object available to the page?

Avatar

Avatar

alistairp781078

Avatar

alistairp781078

alistairp781078

03-02-2020

I'm trying to step through the JS code that's constructing the toolbar. The list of available actions that is returned when trying to edit a component doesn't include the configure option:

alistairp781078_0-1580747430118.png

I'm not sure how this list is being constructed, i.e. what permissions or logic is being used to filter it out?

On my local environment that is behaving correctly, I can see a full list of actions available:

alistairp781078_1-1580747526057.png

Avatar

Avatar

jbrar

Employee

Avatar

jbrar

Employee

jbrar
Employee

03-02-2020

I have worked on a similar issue which was caused by incorrect ACL's

 

- Have you recently installed an ACL package? Try uninstalling the package

- Check if you face the same issue when logging in as "admin" user.