sreenivasula
sreenivasula
27-03-2018
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
Vijayalakshmi_S
MVP
Vijayalakshmi_S
MVP
27-03-2018
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
sreenivasula
sreenivasula
02-04-2018
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
Vijayalakshmi_S
MVP
Vijayalakshmi_S
MVP
02-04-2018
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)
sreenivasula
sreenivasula
03-04-2018
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) {
},
Vijayalakshmi_S
MVP
Vijayalakshmi_S
MVP
04-04-2018
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.
sreenivasula
sreenivasula
05-04-2018
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) {
},
smacdonald2008
smacdonald2008
05-04-2018
I am searching to see if we have any examples on this use case.
smacdonald2008
smacdonald2008
05-04-2018
Our Touch UI experts have not tried this either.