Page History

...

Warning

Please be aware that this tutorial assumes that you have support for JavaScript functions enabled in ConfiForms settings!

This tutorial is not guaranteed to work with any version of Refined UI toolkit plugin, as it relies on specific version of Refined UI toolkit (verified to work with 2.3.5)

Often, the forms you develop become very long and complex and using tabbed view, and grouping fields together in logical sections might be a good idea.

...

Here is how the function (initTabs in our case) looks like and what it does (you will need to put it on the page with HTML macro, for example)

Warning

Verified to work with https://marketplace.atlassian.com/apps/1211136/refined-toolkit-for-confluence?hosting=server&tab=overview 2.3.5

In older versions of Refined UI toolkit you may need to replace

Code Block
RWUI.Templates.Tabs.tabButton

with

Code Block
RWUI.Templates.Macros.tabButton

Code Block

<script type="text/javascript">
function initTabs(formId) {
  if (typeof RWUI === "undefined") {
    console.error("RWUI namespace was undefined, ensure that base.js has been loaded")
  }
  RWUI.Views.UI_Tabs = Backbone.View.extend({
    render: function () {
      var tabMenus = AJS.$("#" + formId).find(".rwui_tabs_menu", this.$el);
      var tabItems = AJS.$("#" + formId).find(".rwui_tab_content", this.$el);
      var e;
      var reArrangeClasses = function (i) {
        var h, g;
        if (/^tab-.*$/.test(i)) {
          h = tabItems.filter("[data-hash='" + i + "']");
          g = e.filter("[data-hash='" + i + "']")
        }
        if (h === undefined || h.length === 0) {
          h = tabItems.first();
          g = e.first()
        }
        tabItems.removeClass("rw_highlight");
        e.removeClass("rw_highlight");
        tabItems.removeClass("rw_active");
        e.removeClass("rw_active");
        h.addClass("rw_active");
        g.addClass("rw_active");
        if (typeof RWMI != "undefined" && RWMI.mobileMode) {
        } else {
          window.location.hash = i
        }
      };

      tabItems.each(function (index, k) {
        var l = AJS.$(k);
        var g = l.data("name");
        var m = l.data("hash");
        var j = AJS.$(RWUI.Templates.MacrosTabs.tabButton({name: g, active: index === 0, hash: m}));
        j.click(function () {
          reArrangeClasses(m);
        });

        // remove existing by hash in case of any
        var tabEl = AJS.$("#" + formId).find(".rwui_tab_button[data-hash='" + m + "']");
        if (tabEl !== null && AJS.$(tabEl).length > 0) {
          tabEl.parent().remove();
        }

        tabMenus.append(j);
      });
      e = AJS.$("#" + formId).find(".rwui_tab_button", tabMenus);
      var f = window.location.hash.substr(1);
      reArrangeClasses(f);
      var d = AJS.$("#" + formId).find(".rwui_tab_button[data-hash='" + f + "']", this.$el);
      if (d.length > 0) {
        d.addClass("rw_highlight");
        AJS.$("#" + formId).find(".rwui_tab_content[data-hash='" + f + "']", this.$el).addClass("rw_highlight");
        RWUI.scrollToElementWithOffset(d, 100);
      }
      return this.$el
    }
  });

  AJS.$("#" + formId).find(".rwui_tabs").each(function (c, b) {
    var d = new RWUI.Views.UI_Tabs({el: b});
    d.render();
  });
}
</script>

...

Space shortcuts

Child pages

Versions Compared

Old Version 4

New Version Current

Key