Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

[AEM as cloud] Page Properties dialog issue

Avatar

Level 2

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.

TushaarSrivastava_1-1646999656222.png

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

Avatar

Correct answer by
Community Advisor

@TushaarSrivastava 

In the screenshot of Page properties dialog, could see tabs in the name - Preview and Custom. 

Looks like a customization on top of OOTB page properties dialog. 

Suggest to check on the customizations done at dialog level as well as JS, if any related to the same. 

 

 

View solution in original post

1 Reply

Avatar

Correct answer by
Community Advisor

@TushaarSrivastava 

In the screenshot of Page properties dialog, could see tabs in the name - Preview and Custom. 

Looks like a customization on top of OOTB page properties dialog. 

Suggest to check on the customizations done at dialog level as well as JS, if any related to the same.