Question

How to use breadcrumbs in BAW ? I tried by there is less documentation. Can any one share an approach

Answer 1

BAW has no OOB "breadcrumb" coach view; what people use is either the Tab Section / Step Progress style of the UI Toolkit or a 30-line custom coach view. The custom one is the flexible option:

// Coach view "Breadcrumbs"  - binding: String (current step id); configuration option "steps": String, e.g. "Request|Review|Approve|Done"
// Layout: one <ol class="breadcrumb"></ol> (Bootstrap 3 is on the page)
// load handler
var me = this;
function render() {
  var steps = (me.context.options.steps.get("value") || "").split("|");
  var current = me.context.binding.get("value");
  var ol = me.context.element.querySelector("ol"); ol.innerHTML = "";
  steps.forEach(function (s, i) {
    var li = document.createElement("li"); li.textContent = s;
    if (s === current) li.className = "active"; else if (steps.indexOf(current) > i) li.style.color = "#5cb85c";
    li.onclick = function () { if (steps.indexOf(current) > i) me.context.binding.set("value", s); };  // allow going back only
    ol.appendChild(li);
  });
}
render();
// change handler (binding changed): render();

Use it: drop the view on every coach of the wizard, bind it to tw.local.step, set the steps option once. The CSHS changes tw.local.step when the user moves on; the view re-renders through its change event. Fire a boundary event from the click if the click should navigate (me.context.trigger()).

Ready-made alternatives: the UI Toolkit Tab Section with Tab style = pills and tabs disabled until reached, or the Progress Bar control fed with index / steps.length * 100. Salient's Spark reference (the toolkit's origin) documents the tab section options.

References

• BAW documentation - creating coach views (layout, options, event handlers)
• BPM UI Toolkit - Tab Section, Progress Bar