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));
};

I had a similar situation in one of my applications. I spent a long time to get it work with the Popover but faced more and more problems. What I did was to control a div container (with an unique Id) with D3 and once I want to open the popover (a tooltip in my case) I simply call `.placeAt` of my UI5 Control to inject it to the div container. The coordinates of the div container are controlled with D3´s event coordinates. — Tim Gerlach, Aug 07 '15 at 10:30

score 0 · Accepted Answer · edited May 23 '17 at 12:06

0

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);
}

edited May 23 '17 at 12:06

Community

1
1

answered Aug 06 '15 at 18:55

hirse

2,394
1
22
24

Thanks for your response, unfortunately the code above still results in errors in the SAPUI5 core: Uncaught TypeError: i.replace is not a function – Sarah Lottman Aug 06 '15 at 20:30
Well, I only tested it with `oPopover.openBy(document.getElementById("target"))`. Are you sure your selection is not empty? Can you add a link to a working example of your code? – hirse Aug 06 '15 at 20:43
It took me awhile to get the fiddle uploaded. Here is my code: https://jsfiddle.net/okhuskerfan/m05p4vef/ Hopefully my SVG and JSON files loaded correctly - should be under external resources. – Sarah Lottman Aug 06 '15 at 21:30
Thank you hirse!!!! It is working now, I greatly appreciate your help - nice work. – Sarah Lottman Aug 07 '15 at 15:04

Opening UI5 Quickview by non-SAPUI5 control

1 Answers1