Refresh custom control in sapui5 when model change

Question

I've a custom control which have multiple properties inserted in Detail View page. I've binded data with these properties. Scenario is I've two pages one is list view and then detail view. I've to navBack from detail page and select diff product from main page.Detail view page show diff products detail according to selected product. everything works fine. but problem is that my custom control doesn't update values and other page have updated values.

<custom:product topic="" subTopic="{product>name}" id="productDetial"></custom:product>

I've used one methond this.getView().byId("productDetail").rerender(); but it doesn't update my Inner HTML of control.

the control code. might be some typos error.as I've changed some variables name and remove unwanted code. the purpose is to show the methods which I've used and how I did

sap.ui.define([
        "sap/m/Label",
        "sap/m/Button",
        "sap/m/CustomTile"

    ], function(Label, Button, CustomTile) {
        "use strict";
        jQuery.sap.declare("testProduct.control.product");
        return CustomTile.extend("testProduct.control.product", {
                metadata: { // the Control API
                    properties: {
                        name: {
                            type: "string",
                            defaultValue: "--"
                        },
                        subTopic: {
                            type: "string",
                            defaultValue: "--"
                        }
                    }

                },
                init: function() {

                },

                rerender: function(oRM, oControl) {

                },
                renderer: function(oRM, oControl) {
                    oRM.write('<div class=" sapMTile customTileCourseDetail">');
                    oRM.write('<div class="leftTileYourScore">');
                    if (oControl.getSubTopic() !== "" && oControl.getSubTopic() !== undefined) {
                        oRM.writeEscaped(oControl.getSubTopic());
                    } else {
                        oRM.write("&nbsp;");
                    }
                    oRM.write('</div>');
                    oRM.write('</div>
                    }
                });
        });

Same as stackoverflow.com/a/68910648/5846045, the control is missing oRm.writeControlData(oControl). A custom setter, as suggested by the current accepted answer below, is not necessary. — Boghyon Hoffmann
Does this answer your question? Custom UI5 control does not update bound value — Boghyon Hoffmann

Stephen S Stephen S · Accepted Answer · 2017-09-04T13:16:27

Yo just need to add a setter function in you control. When the binding is refreshed/changes, UI5 will trigger a setter method specific to the property. So in you case for the property subTopic it expects a method setSubTopic. This method should define you own logic to update said property in the UI layer according to your needs.

Here is part of the code you need to add, you will also have to tweak the initial rendering logic a bit.

renderer: function (oRM, oControl) {
        //oRM.write('<div class=" sapMTile customTileCourseDetail">');
        oRM.write("<div")
        oRM.writeControlData(oControl);
        oRM.addClass("sapMTile customTileCourseDetail");
        oRM.writeClasses();
        oRM.write(">");
        oRM.write('<div class="leftTileYourScore">');
        if (oControl.getSubTopic() !== "" && oControl.getSubTopic() !== undefined) {
            oRM.writeEscaped(oControl.getSubTopic());
        } else {
            oRM.write("&nbsp;");
        }
        oRM.write('</div>');
        oRM.write('</div>');
    },

    setSubTopic: function(sText){
        this.setProperty("subTopic", sText, true);
        $("#"+this.sId+" .leftTileYourScore").html(sText);
    }

Refresh custom control in sapui5 when model change

1 Answers