Expand my Community achievements bar.

Sightly, Classic UI and Angular Material Design

Avatar

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

Avatar

Level 10

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

Avatar

Level 10

Hi,

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