Question

How does control addressing work in Spark UI / BPM UI toolkit e.g. ${TextArea1}

Answer 1

Control addressing is the toolkit's way to find a control object from JavaScript by its control id and its position in the coach's view tree, instead of DOM ids (which change per instance). The forms:

• ${Total} - shorthand (only in control event text and formulas) for page.ui.get("Total"): the first control with id Total on the page.
• page.ui.get("Section/Total") - path from the coach root through container ids (Horizontal Layout, Section, Tab, custom coach view...).
• me.ui.get("Total") - search below the current control; me.ui.get("../Total") - go up one container; ../../ two.
• page.ui.get("Lines[2]/Qty") - index into a repeating container (table row, repeated collapsible panel); me.ui.get("../Qty") inside the same row.
• page.ui.get("Lines/Qty") without an index returns the first row's control; for all rows iterate page.ui.get("Lines[" + i + "]/Qty") over the length of the bound list.

// examples from a button "Recalculate" placed in the section "Order"
var lines = ${Lines};                                    // table anywhere on the page
for (var i = 0; i < lines.getData().length; i++) {
  var qty = page.ui.get("Lines[" + i + "]/Qty").getData();   // control in row i
}
me.ui.get("../Total").setData(sum);                      // sibling in the same section
page.ui.get("Header/Status").setText("recalculated");   // absolute path

Ids come from the Control Id field of each control (unique within its container, defaults like Text1); give meaningful ids before writing handlers. A custom coach view is a container too: its internal controls are addressed through its id (MyView/Inner), which is why reusable views should address their own children with me / this.ui rather than page.

References

• BPM UI Toolkit - control addressing