Bound content in Popover is not shown

user_16348840 0
Viewed 310

I created a popover which is called on mouseover via addEventDelegate. The popover has a text element with binding to my Model.

The fragment:

<Popover xmlns="sap.m"
    id="myCardPopover"
    showHeader="false"
    contentWidth="260px"
    placement="Bottom">
    <Text id="myCardPopoverText" text="{propertyModel>Tooltip}" />
</Popover>

Register the browser events:

attachCardPopoverOnMouseover: function () {
    var rootHBox = this.byId("myReportCardContent");
    rootHBox.addEventDelegate({
        onmouseover: function () {
            this.timeId = setTimeout(() => that.onOpenCardPopover(this), 600);
        },
        onmouseout: function () {
            clearTimeout(this.timeId) || that.onCloseCardPopover(this);
        }
    }, rootHBox);
},

The event listener:

onOpenCardPopover: function (oControl) {
    this.oCardTooltipPopover.then(function (oPopover) {
        var oContext = oControl.getBindingContext("propertyModel");
        oPopover.setBindingContext(oContext);
        oPopover.openBy(oControl);
    });
},

The Popover itself is a dependent of multiple controls created from an aggregation binding and is created in onAfterRendering.

// Fragment required from "sap/ui/core/Fragment"
createCardPopover: function () {
    var oView = this.getView();
    var oRootHBox = this.byId("myReportCardContent");
    if (!this.oCardTooltipPopover) {
        this.oCardTooltipPopover = Fragment.load({
            id: oView.getId(),
            name: "namespace.view.CardPopup"
        }).then(function (oPopover) {
            oRootHBox.addDependent(oPopover);
            return oPopover;
        });
    }
},

When I hover over one of my controls, I only get an empty popover. The bound text isn't shown.

However, when I lookup the created popover in the UI5 debug tools, the binding seems correct and also the text is shown up there. The text's <span> element in the DOM is also empty.

sapui5
1 Answers

[...] multiple controls created from an aggregation binding

With this.byId("myReportCardContent"), you're accessing the template control rather than the actual rendered ones. A template in aggregation binding is usually a static control (i.e. without propagated models and contexts) that the ManagedObject will clone for each data object. After cloning, the parent models and contexts are propagated to those clones, and not to the internal template control.

So if you add the popover to the dependent aggregation of the template (oRootHBox), there is no context to propagate. The binding paths in the fragment definition stay unresolved.

How the issue can be circumvented is up to you. There are many approaches to show something on mouseover. Just avoid manipulating the template after rendering.

user_58460450
Related