Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events

Sightly, Classic UI and Angular Material Design


Level 3

Good day all

AEM version 6.2
My component uses angular material design to create tabs. The parsys is inside the <md-tab-body> tag.
In Classic UI I cannot access the config dialog. The edit, delete etc actions are not visible above the component and double clicking does not bring up the dialog either.
The dialog works fine in Touch UI

My component:

<div data-sly-use.clientlibInclude="${'/libs/granite/sightly/templates/clientlib.html'}"></div> <output data-sly-call="${clientlibInclude.js @ categories='tab-component-category'}" data-sly-unwrap/> <div id="tabContainer" ng-app="tab-component" ng-cloak> <md-content class="md-padding"> <md-tabs class="md-accent" md-dynamic-height> <div data-sly-list="${properties.tabs}" data-sly-unwrap> <md-tab id="tab-component-${item}"> <md-tab-label>${item}</md-tab-label> <md-tab-body> <div data-sly-resource="${itemList.count}${'-tab-component-parsys' @ resourceType='wcm/foundation/components/parsys'}"></div> </md-tab-body> </md-tab> </div> </md-tabs> </md-content> </div> //JS file angular.module('tab-component', ['ngMaterial']);


Ideas anyone? Thanks in advance.


My clientlib folder includes angular.js, angular-material.js etc. Is this an issue?

2 Replies


Level 10

You are saying the component dislog does not work in Classic. Are you getting errors in your browser, etc.  


Level 10


Have you created classic UI dialog nodes ?? along with cq:editConfig ??

If yes, as scott mentioned are you seeing any JS error in the browser when you click on the component in classic UI ?

Any of those screenshots would help us