Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED
[AEM as cloud] Page Properties dialog issue
Hi Team,
there is an issue I am facing when I have opened the page property dialog, and on click of the tabs under page property dialog, I can see the additional button appearing on my screen.
And the addition of the above buttons will continue on loop till we switch from one tab to another,
Seems the addition of button is happening because of Permission tab JS which is responsible to load: /libs/wcm/foundation/components/basicpage/v1/basicpage/cq:dialog/content/items/tabs/items/permissions
For reference:
we have created a page with slingResourceSuperType : core/cif/components/structure/page/v1/page
here is the HTML of those buttons
<coral-panel class="_coral-Panel is-selected" role="tabpanel" aria-hidden="false" id="coral-id-13" aria-labelledby="coral-id-5" selected="">
<coral-actionbar-primary role="toolbar" class="_coral-ActionBar-primary">
<coral-actionbar-primary role="toolbar" class="_coral-ActionBar-primary">
<coral-actionbar-item class="_coral-ActionBar-item">
<button class="betty-ActionBar-item js-cq-sites-PermissionsProperties-action js-cq-sites-AddPermissionsDialog-show hide foundation-collection-action coral-Button--graniteActionBar _coral-ActionBar-button _coral-ActionButton _coral-ActionButton--quiet" title="Create ACL Permissions" data-foundation-collection-action="{}" type="button" autocomplete="off" is="coral-button" icon="add" variant="quietaction" trackingfeature="" trackingelement="add permissions" tracking="ON" size="M">
<coral-icon size="S" class="_coral-Icon _coral-Icon--sizeS" role="img" icon="add" aria-hidden="true">
<svg focusable="false" aria-hidden="true" class="_coral-Icon--svg _coral-Icon">
<use xlink:href="#spectrum-icon-18-Add"></use>
</svg>
</coral-icon>
<coral-button-label class="_coral-ActionButton-label">Add Permissions</coral-button-label>
</button>
</coral-actionbar-item>
<coral-actionbar-item class="_coral-ActionBar-item">
<button class="betty-ActionBar-item js-cq-sites-PermissionsProperties-action js-cq-sites-ClosedUserGroupDialog-show hide foundation-collection-action coral-Button--graniteActionBar _coral-ActionBar-button _coral-ActionButton _coral-ActionButton--quiet" title="Edit Closed User Group" data-foundation-collection-action="{}" type="button" autocomplete="off" is="coral-button" icon="usersLock" variant="quietaction" trackingfeature="" trackingelement="edit closed user group" tracking="ON" size="M">
<coral-icon size="S" class="_coral-Icon _coral-Icon--sizeS" role="img" icon="usersLock" aria-hidden="true">
<svg focusable="false" aria-hidden="true" class="_coral-Icon--svg _coral-Icon">
<use xlink:href="#spectrum-icon-18-UsersLock"></use>
</svg>
</coral-icon>
<coral-button-label class="_coral-ActionButton-label">Edit Closed User Group</coral-button-label>
</button>
</coral-actionbar-item>
<coral-actionbar-item class="_coral-ActionBar-item">
<button class="betty-ActionBar-item js-cq-sites-PermissionsProperties-action js-cq-sites-EffectivePermissionsDialog-show hide foundation-collection-action coral-Button--graniteActionBar _coral-ActionBar-button _coral-ActionButton _coral-ActionButton--quiet" title="Effective Permissions" data-foundation-collection-action="{}" type="button" autocomplete="off" is="coral-button" icon="viewList" variant="quietaction" trackingfeature="" trackingelement="effective permissions" tracking="ON" size="M">
<coral-icon size="S" class="_coral-Icon _coral-Icon--sizeS" role="img" icon="viewList" aria-hidden="true">
<svg focusable="false" aria-hidden="true" class="_coral-Icon--svg _coral-Icon">
<use xlink:href="#spectrum-icon-18-ViewList"></use>
</svg>
</coral-icon>
<coral-button-label class="_coral-ActionButton-label">Effective Permissions</coral-button-label>
</button>
</coral-actionbar-item>
<coral-popover smart="" id="coral-id-470" handle="overlay" placement="bottom" breadthoffset="-50%r + 50%p" coral-actionbar-popover="" tabindex="0" role="presentation" x-placement="bottom" class="_coral-Overlay _coral-Popover" aria-live="assertive" variant="default" closable="off" style="position: absolute; display: none; visibility: visible; will-change: transform; top: 0px; left: 0px; transform: translate3d(24px, 93px, 0px);">
<div handle="topTabCapture" coral-tabcapture="top" tabindex="0" role="presentation"></div>
<div class=" _coral-Dialog-header" handle="headerWrapper" role="presentation" hidden="">
<coral-popover-header class="_coral-Dialog-title"></coral-popover-header>
</div>
<button is="coral-button" tracking="off" handle="closeButton" class="_coral-Dialog-closeButton _coral-ClearButton" type="button" variant="_custom" icon="close" title="Close" tabindex="-1" coral-close="" size="M" style="display: none;">
<coral-icon size="S" class="_coral-Icon--sizeS _coral-Icon" role="img" icon="close">
<svg focusable="false" aria-hidden="true" class="_coral-Icon--svg _coral-Icon">
<use xlink:href="#spectrum-icon-18-Close"></use>
</svg>
</coral-icon>
<coral-button-label></coral-button-label>
</button>
<div class=" _coral-Popover-tip" handle="tip" hidden=""></div>
<coral-popover-content class="_coral-Dialog-content"></coral-popover-content>
<coral-popover-footer class="_coral-Dialog-footer" hidden=""></coral-popover-footer>
<div handle="intermediateTabCapture" coral-tabcapture="intermediate" tabindex="0" role="presentation"></div>
<div handle="bottomTabCapture" coral-tabcapture="bottom" tabindex="0" role="presentation"></div>
</coral-popover>
<button is="coral-button" handle="moreButton" type="button" variant="quietaction" class="_coral-ActionButton _coral-ActionButton--quiet _coral-ActionBar-button" icon="more" coral-actionbar-more="" aria-expanded="false" aria-haspopup="true" size="M">
<coral-icon size="S" class="_coral-Icon--sizeS _coral-Icon" role="img" icon="more">
<svg focusable="false" aria-hidden="true" class="_coral-Icon--svg _coral-Icon">
<use xlink:href="#spectrum-icon-18-More"></use>
</svg>
</coral-icon>
<coral-button-label handle="moreButtonLabel" class="_coral-ActionButton-label"></coral-button-label>
</button>
</coral-actionbar-primary>
<coral-actionbar-primary role="toolbar" class="_coral-ActionBar-primary">
<coral-actionbar-item class="_coral-ActionBar-item">
<button class="betty-ActionBar-item js-cq-sites-PermissionsProperties-action js-cq-sites-AddPermissionsDialog-show hide foundation-collection-action coral-Button--graniteActionBar _coral-ActionBar-button _coral-ActionButton _coral-ActionButton--quiet" title="Create ACL Permissions" data-foundation-collection-action="{}" type="button" autocomplete="off" is="coral-button" icon="add" variant="quietaction" trackingfeature="" trackingelement="add permissions" tracking="ON" size="M">
<coral-icon size="S" class="_coral-Icon _coral-Icon--sizeS" role="img" icon="add" aria-hidden="true">
<svg focusable="false" aria-hidden="true" class="_coral-Icon--svg _coral-Icon">
<use xlink:href="#spectrum-icon-18-Add"></use>
</svg>
</coral-icon>
<coral-button-label class="_coral-ActionButton-label">Add Permissions</coral-button-label>
</button>
</coral-actionbar-item>
<coral-actionbar-item class="_coral-ActionBar-item">
<button class="betty-ActionBar-item js-cq-sites-PermissionsProperties-action js-cq-sites-ClosedUserGroupDialog-show hide foundation-collection-action coral-Button--graniteActionBar _coral-ActionBar-button _coral-ActionButton _coral-ActionButton--quiet" title="Edit Closed User Group" data-foundation-collection-action="{}" type="button" autocomplete="off" is="coral-button" icon="usersLock" variant="quietaction" trackingfeature="" trackingelement="edit closed user group" tracking="ON" size="M">
<coral-icon size="S" class="_coral-Icon _coral-Icon--sizeS" role="img" icon="usersLock" aria-hidden="true">
<svg focusable="false" aria-hidden="true" class="_coral-Icon--svg _coral-Icon">
<use xlink:href="#spectrum-icon-18-UsersLock"></use>
</svg>
</coral-icon>
<coral-button-label class="_coral-ActionButton-label">Edit Closed User Group</coral-button-label>
</button>
</coral-actionbar-item>
<coral-actionbar-item class="_coral-ActionBar-item">
<button class="betty-ActionBar-item js-cq-sites-PermissionsProperties-action js-cq-sites-EffectivePermissionsDialog-show hide foundation-collection-action coral-Button--graniteActionBar _coral-ActionBar-button _coral-ActionButton _coral-ActionButton--quiet" title="Effective Permissions" data-foundation-collection-action="{}" type="button" autocomplete="off" is="coral-button" icon="viewList" variant="quietaction" trackingfeature="" trackingelement="effective permissions" tracking="ON" size="M">
<coral-icon size="S" class="_coral-Icon _coral-Icon--sizeS" role="img" icon="viewList" aria-hidden="true">
<svg focusable="false" aria-hidden="true" class="_coral-Icon--svg _coral-Icon">
<use xlink:href="#spectrum-icon-18-ViewList"></use>
</svg>
</coral-icon>
<coral-button-label class="_coral-ActionButton-label">Effective Permissions</coral-button-label>
</button>
</coral-actionbar-item>
<coral-popover smart="" id="coral-id-471" handle="overlay" placement="bottom" breadthoffset="-50%r + 50%p" coral-actionbar-popover="" tabindex="0" role="presentation" x-placement="bottom" class="_coral-Overlay _coral-Popover" aria-live="assertive" variant="default" closable="off" style="position: absolute; display: none; visibility: visible; will-change: transform; top: 0px; left: 0px; transform: translate3d(24px, 141px, 0px);">
<div handle="topTabCapture" coral-tabcapture="top" tabindex="0" role="presentation"></div>
<div class=" _coral-Dialog-header" handle="headerWrapper" role="presentation" hidden="">
<coral-popover-header class="_coral-Dialog-title"></coral-popover-header>
</div>
<button is="coral-button" tracking="off" handle="closeButton" class="_coral-Dialog-closeButton _coral-ClearButton" type="button" variant="_custom" icon="close" title="Close" tabindex="-1" coral-close="" size="M" style="display: none;">
<coral-icon size="S" class="_coral-Icon--sizeS _coral-Icon" role="img" icon="close">
<svg focusable="false" aria-hidden="true" class="_coral-Icon--svg _coral-Icon">
<use xlink:href="#spectrum-icon-18-Close"></use>
</svg>
</coral-icon>
<coral-button-label></coral-button-label>
</button>
<div class=" _coral-Popover-tip" handle="tip" hidden=""></div>
<coral-popover-content class="_coral-Dialog-content"></coral-popover-content>
<coral-popover-footer class="_coral-Dialog-footer" hidden=""></coral-popover-footer>
<div handle="intermediateTabCapture" coral-tabcapture="intermediate" tabindex="0" role="presentation"></div>
<div handle="bottomTabCapture" coral-tabcapture="bottom" tabindex="0" role="presentation"></div>
</coral-popover>
<button is="coral-button" handle="moreButton" type="button" variant="quietaction" class="_coral-ActionButton _coral-ActionButton--quiet _coral-ActionBar-button" icon="more" coral-actionbar-more="" aria-expanded="false" aria-haspopup="true" size="M">
<coral-icon size="S" class="_coral-Icon--sizeS _coral-Icon" role="img" icon="more">
<svg focusable="false" aria-hidden="true" class="_coral-Icon--svg _coral-Icon">
<use xlink:href="#spectrum-icon-18-More"></use>
</svg>
</coral-icon>
<coral-button-label handle="moreButtonLabel" class="_coral-ActionButton-label"></coral-button-label>
</button>
</coral-actionbar-primary>
</coral-panel>
Did anyone face a similar issue?
or any suggestion how to debug.
@arunpatidar @kautuk_sahni @Vijayalakshmi_S @BrianKasingli @Theo_Pendle
1 Accepted Solution
