Lazy tabs with Ajax = the content of a tab is fetched from the server the first time the tab is opened. With the UI Toolkit you get it without code (Tab Section lazy rendering + a Service Call inside the tab that runs on its visible event); on older / custom coaches you wire it yourself with an Ajax service of the coach view:
// custom coach view "LazyTabs" - configuration option "loadTab" of type Service (input: tabId String, output: rows list); Layout: Bootstrap tabs
var _this = this, root = this.context.element, loaded = {};
root.querySelectorAll('a[data-toggle="tab"]').forEach(function (a) {
a.addEventListener("shown.bs.tab", function (e) { // Bootstrap 3 event when a tab becomes visible
var id = e.target.getAttribute("href").substring(1);
if (loaded[id]) return;
var pane = root.querySelector("#" + id); pane.innerHTML = '<div class="spinner">Loading…</div>';
_this.context.options.loadTab({ params: { tabId: id },
load: function (data) { loaded[id] = true; pane.innerHTML = ""; renderRows(pane, data.rows); },
error: function (err) { pane.innerHTML = "Could not load: " + (err.errorMessage || err); }
});
});
});
$(root).find('a[data-toggle="tab"]').first().tab("show"); // first tab loads immediately// the same with the UI Toolkit, no code: Tab Section (lazy render on) > tab "History" contains
// Service Call "LoadHistory" (service flow with the instance id as input, auto run OFF) + Table bound to its output
// Tab Section > On tab changed (or the tab's On shown): if (tabIndex === 2 && !${LoadHistory}.getResult()) ${LoadHistory}.execute();The Ajax service (a service flow bound to the view's Service option, or the Service Call's attached service) runs on the server with the coach's session; give it the minimum inputs (ids), page large results, and cache the loaded flag per tab so switching back does not reload (add a Refresh button when needed). On 8.5.x heritage coaches the equivalent was a Custom HTML block with dojo.xhrGet to a startable service URL - replace with the pattern above when you convert them.
References