Overlay - /libs/granite/ui/components/foundation/layouts/tabs/tabs.jsp | Community
Skip to main content
U
user00725
Level 4
March 27, 2018

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

  • March 27, 2018
  • 1 reply
  • 8817 views

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

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

    1 reply

    Vijayalakshmi_S
    Vijayalakshmi_S
    Level 10
    March 27, 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

      U
      user00725Author
      Level 4
      April 2, 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
      Vijayalakshmi_S
      Level 10
      April 2, 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)

      Terms & ConditionsAccessibility statement

      Loading footer...