Custom UI5 control does not update bound value

Question

How can I pass OData value to property of a custom UI5 control? I tried this but it's not working.
If I try passing it to normal control like <Text>, it's working fine.
If I try passing a static value, it's working fine too:

<cc:CheckPrice valuePrice="{Price}"/> <!--❌-->
<Text text="{Price}"/> <!--✔️-->
<cc:CheckPrice valuePrice="1000"/> <!--✔️-->

How can I pass the value from a remote OData service to show it like in Text control?

sap.ui.define([
    "sap/ui/core/Control",
    "sap/m/Label",
    "sap/m/Button"
], function (Control, Label, Button) {
    "use strict";

    return Control.extend("zgutfiory.zguttestfiorylr.controls.CheckPrice", {
        metadata: {
            properties: {
                "valuePrice": {
                    type: "string",
                    bindable: "bindable"
                }
            },
            aggregations: {
                "_label": {
                    type: "sap.m.Label",
                    multiple: false,
                    visibility: "hidden"
                },
                "_button": {
                    type: "sap.m.Button",
                    multiple: false,
                    visibility: "hidden"
                }
            },
            events: {
                // ...
            }
        },

        init: function () {
            this.setAggregation("_label", new Label({
                text: "{i18n>controlCheckPrice}"
            }).addStyleClass("sapUiSmallMargin"));
            this.setAggregation("_button", new Button({
                text: "{i18n>controlCheckPrice}",
                press: [this._onSubmit, this]
            }).addStyleClass("sapUiTinyMarginTopBottom"));
        },

        _onSubmit: function (oEvent) {
            // ...
        },

        renderer: function (oRm, oControl) {
            oRm.write('<div class="zgutCheckPriceWrap">');
            oRm.write('<div class="zgutPriceWrap">' + oControl.getValuePrice() + '</div>');
            oRm.renderControl(oControl.getAggregation("_label"));
            oRm.renderControl(oControl.getAggregation("_button"));
            oRm.write('</div>');
        }
    });
});

UI5 version: 1.92

Boghyon Hoffmann Boghyon Hoffmann · Accepted Answer · 2021-08-24T16:07:45

You missed adding some mandatory control data in the render function. When the model value changes (e.g. ODataModel receiving data), the control with the bound property needs to be identifiable by an id at least so that the control can be updated. In your case, the id was not rendered.

To add the required control data, use:

oRm.openStart("div", oCotrol) in case of the new semantic rendering (UI5 ≥ 1.67).
oRm.writeControlData(oControl) in case of the now-deprecated string-based rendering (UI5 ≤ 1.66). Note: please use .writeEscaped for oControl.getValuePrice() here to avoid XSS.

Also, make sure to call the super function if you overwrite borrowed methods (e.g. init). This is especially important for lifecycle hooks.

Sample: https://embed.plnkr.co/gnmPoh3KS7L3DDXZ?show=controls%2FCheckPrice.js,preview

See the API reference: sap/ui/core/RenderManager for more information.

Custom UI5 control does not update bound value

3 Answers