Child pages
  • Creating tabbed form with ConfiForms and Refined UI toolkit UI tab

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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>

...