BBj 24.02+ DWC Training

A JavaScript component can send events back to BBj, so you can respond to user interaction within BBj. The BASIS documentation contains a sample. The Chart.js is a special example where we would still recommend using the htmlview as its not directly a WebComponent. We also have an example on how to include normal html Components and how to inject the JavaScript functions into them in the EventMapSample.bbj.

The relevant section in the enhanced sample is in this portion of the JavaScript code:

  js$ = js$ + "        onClick: (evt, item) => {"
  js$ = js$ + "         Chart.defaults.plugins.legend.onClick.call(this, evt, item, this);"
  js$ = js$ + "         const customEvent = new CustomEvent('legend-clicked',{"  
  js$ = js$ + "           detail:{text: item.text, index: item.datasetIndex, hidden: item.hidden}"  
  js$ = js$ + "         });"  
  js$ = js$ + "         window.basisDispatchCustomEvent(chartCanvas, customEvent);"
  js$ = js$ + "        }"

The key statement in this example is the "basisDispatchCustomEvent" which passes the customEvent object back to BBj.

In the event handler for the ON_NATIVE_JAVASCRIPT event we can then work with the event object:

handleNativeJavascript:
  event! = sysgui!.getLastEvent()
  name$ = event!.getEventName()
  map! = event!.getEventMap()
  detail! = map!.get("detail")
  let x=MSGBOX(detail!, 0, "Event Details")
return

Here we simply output the contents of the event object in a MSGBOX for illustration.

The complete sample is hosted under ChartJS.bbj