Opening UI5 Quickview by non-SAPUI5 control

Question

I'm trying to integrate UI5 with other libraries(namely D3) and am unable to open a UI5 Popover(or QuickView) by my controls.

The only method I can call to open the popover is .openBy(control).

According to the UI5 documentation: The Control = This is the control to which the popover will be placed. It can be not only a UI5 control, but also an existing DOM reference.

I've tried multiple things, but am unable to get the popover to open successfully. I continue to get errors in sap-ui-core.js.

Does anyone have any ideas on how to properly pass the DOM reference of my non-UI5 control?

Here is a code snippet showing what I'm trying to accomplish:

// circleClicked is the SVG element clicked on the map
function openQuickView(circleClicked) {

    // quickView controls are UI5 and were created before this function
    quickViewPage.setHeader(circleClicked.created_by);

    // error
    quickView.openBy(d3.select(circleClicked));
};

Answer 1

Everything you describe seems to be correct. According to the documentation of sap.m.Popover you can also call openBy with a DOM reference as parameter.

What you are passing in your code snippet is not a DOM reference however, it is a d3 selection. To get the required DOM reference from the selection you have to add [0][0](see this answer).

function openQuickView(circleClicked) {
  quickViewPage.setHeader(circleClicked.created_by);
  quickView.openBy(d3.select(circleClicked)[0][0]); 
};

---

EDIT: After playing around with the provided fiddle I found the problem. The parameter to the function is the datum of the clicked object, not the DOM. You should change your click handler and the function like this:

svg.selectAll("circle")
// ...
.on("click", function(d) {
  openQuickView(this, d);
});
function openQuickView(circleClicked, circleData) {
  quickViewPage.setHeader(circleData.created_by);
  quickView.openBy(circleClicked);
}