Overlay - /libs/granite/ui/components/foundation/layouts/tabs/tabs.jsp

[#1]

Hello All,

We implemented a dynamic tab dialog by overlaying /libs/granite/ui/components/foundation/layouts/tabs/tabs.jsp in AEM 6.0. Now we are migrating from AEM 6 to 6.3. And this dialog is breaking.

Below is brief description of the dialog in AEM 6.0

When we open the dialog, the default view is shown(which is static, where we enter component title).

In the dialog, we have a + icon, when clicked, it adds a dynamic tab(stacked) to the dialog, where we can provide tab name along with other configuration.

We can add any number of tabs and it provides an option to delete the tab as well.

At a high level, we implemented above dialog using a custom java script and css, which is attached to overlay component (/apps/asdf/ui/components/foundation/layouts/dynamic-tabs/dynamic-tabs.jsp).

Could you please let us know how to migrate above dialog to AEM 6.3? Any sample code or helpex article is helpful.

Thanks in Advance

Sreenivasula Reddy

[#2]

Hi,

In Coral UI 3, there is no layout concept. Equivalent Coral UI 3 component for layouts/tabs is /libs/granite/ui/components/coral/foundation/tabs.

List of components replaced/removed - Migration Guide to CoralUI 3-based — Granite UI 1.0 documentation

[#3]

Thanks Viji!

I will try to make my issue more clear by providing more details.

              
We customized/overlay the  component /libs/granite/ui/components/foundation/layouts/tabs/tabs.jsp for one of our component dialog, where we can add/delete dynamic tabs(tabs are stacked).

We are able to add/delete these dynamic tabs by using a Custom JS(a client lib with categories="[cq.authoring.dialog] and dependencies="[underscore] in the above overlay component) . This custom JS extends CUI.Tabs as shown below(attaching complete JS removing the actual logic)

CUI.DynamicTabs = new Class({
toString: "Tabs",
extend: CUI.Tabs,
template: null,
dynamicTabs: {},
storageLocationPrefix: null,
storageTabNameTemplate: "abc-xyz",
dynamicTabPlaceholderName: "xyz-tab",
useDynamicDialog: false,

// Custom logic goes here for adding, deleting dynamic tabs for the dialog

construct: function (options) {

},

calcHeight: function () {

},

_getTabs: function() {
 return this.superClass._getTabs.call(this);
 },

 _getPanels: function() {
 return this.superClass._getPanels.call(this);
 },

 _makeTabsAccessible: function($tabs) {
 return this.superClass._makeTabsAccessible.call(this, $tabs);
 }, 

_createDynamicPanel: function($panelId, dynamicPanelObject){

 },

_makeDynamicTabPanels: function(_this){

},

_registerDynamicListeners: function(_this) {

 },

_loadDynamicTabs: function() {

} 

});

  $(document).on("ready", function () {
CUI.Widget.registry.register("dynamictabs", CUI.DynamicTabs);
});

We are migrating from AEM 6.0 to 6.3. As suggested, we overlay the new coral tabs component /libs/granite/ui/components/coral/foundation/tabs/tabs.jsp. But we are not able to migrate the above JS, because
CUI.Tabs(/etc/clientlibs/granite/coralui/js/components/CUI.Tabs.js) no more exists in AEM 6.3.

Could you please let us know the equivalent JS  for CUI.Tabs in 6.3 ? for adding and deleting dynamic tabs ?

Any helpx documents or sample code will be a great help.

Regards

Sreenivasula Reddy

[#4]

HI,

Thanks for the detailed explanation.

If we observe the markup/logic in Coral UI 3 tabs component, tabs are rendered using <coral-tabview></coral-tabview> - kinda HTML element

HTML markup and Javascript initialisation of the same is available in official docs - Documentation | CoralUI . However for custom usage, I would request Adobe team to provide insights.

In the interim, Could you please try making use of overlayed layouts/tabs component with your custom JS/clientlibs making use of one of the below two clientlibs categories (where we have JS for CUI.Tabs)

CUI.Tabs is available at  below 2 locations-

/libs/clientlibs/granite/coralui3/js/coral.js (clientlibs category - coralui3)

/libs/clientlibs/granite/coralui2/js/coral.js (clientlibs category - coralui2)

[#5]

Thanks Viji for your quick reply!

We tried using coralui3 category in our custom clientlibs, but its not executing our custom JS( we have some console statements under construct function, which are not executing)

construct: function (options) {

},

[#6]

HI,

Are you observing any console errors. (to further narrow down)

Also, try using other clientlib category(coralui2), more details with respect to this is available in below link.

The Strategy to Support CoralUI 2-based Code in a CoralUI 3-based Page — Granite UI 1.0 documentatio...

[#7]

Thanks Viji!

            I tried both coralui2 and coralui3, but no change. No console errors as such, its not executing/entering any of the functions

construct: function (options) {

},

[#8]

I am searching to see if we have any examples on this use case.

[#9]

Our Touch UI experts have not tried this either.