On BPM 8.0 a tree view is a custom coach view whose HTML is built in the load handler from a bound list of nodes; Dojo (dijit.Tree) is on the page, so the cleanest 8.0-era implementation uses it:
// Coach view "Tree" (BPM 8.0 / 8.5): binding = list of Node { id, parentId, label }; boundary event on selection; option "selectedId" (String, output)
// Layout: <div class="treeHost"></div>
// load handler
var _this = this, host = this.context.element.querySelector(".treeHost");
require(["dojo/store/Memory", "dijit/tree/ObjectStoreModel", "dijit/Tree", "dojo/_base/lang"], function (Memory, ObjectStoreModel, Tree, lang) {
var raw = _this.context.binding.get("value"); raw = raw && raw.items ? raw.items : (raw || []);
var data = [{ id: "root", label: "All", parentId: null }].concat(raw.map(function (n) { return { id: n.id, label: n.label, parentId: n.parentId || "root" }; }));
var store = new Memory({ data: data, getChildren: function (o) { return this.query({ parentId: o.id }); } });
var model = new ObjectStoreModel({ store: store, query: { id: "root" }, mayHaveChildren: function (o) { return store.query({ parentId: o.id }).length > 0; } });
var tree = new Tree({ model: model, showRoot: false, onClick: function (item) {
_this.context.options.selectedId.set("value", item.id); // expose the selection
_this.context.trigger(); // boundary event -> CSHS / heritage service continues
}});
tree.placeAt(host); tree.startup();
_this.tree = tree;
});
// unload handler: if (this.tree) this.tree.destroyRecursive();Data: a flat list of {id, parentId, label} from SQL (select id, parent_id, name from categories) maps directly to the store above; for lazy loading of big trees replace getChildren with an Ajax service call per node. On 8.5.7+ with the UI Toolkit the same view works, but a plain HTML / CSS tree (question 3142) or bootstrap-treeview is lighter than dijit and easier to style; heritage coaches (8.0) can host the view through a coach view container. Selection into the flow: the selectedId option bound to a variable plus the boundary event, as shown.
References