SAPUI5 Custom Control call function in renderer method

Question

I'm quite new to SAPUI5 and JavaScript topic.

Currently I'm trying to develop a custom control. I'm trying to call a self defined function in the renderer method, but at runtime I always get this error:

Error: Uncaught TypeError: this.someFunction is not a function.

I used the the tutorial code from SAP to illustrate how my code is structured.

Can anyone answer. I'm quite sure it's related to JavaScript not UI5.

My code below:

   sap.ui.define([
    "sap/ui/core/Control",
    "sap/m/RatingIndicator",
    "sap/m/Label",
    "sap/m/Button"

], function (Control, RatingIndicator, Label, Button) {
    "use strict";
    return Control.extend("sap.ui.demo.wt.control.ProductRating", {
        metadata : {
            properties : {
                value:  {type : "float", defaultValue : 0}
            },
            aggregations : {
                _rating : {type : "sap.m.RatingIndicator", multiple: false, visibility : "hidden"},
                _label : {type : "sap.m.Label", multiple: false, visibility : "hidden"},
                _button : {type : "sap.m.Button", multiple: false, visibility : "hidden"}
            },
            events : {
                change : {
                    parameters : {
                        value : {type : "int"}
                    }
                }
            }
        },
        init : function () {
            this.setAggregation("_rating", new RatingIndicator({
                value: this.getValue(),
                iconSize: "2rem",
                visualMode: "Half",
                liveChange: this._onRate.bind(this)
            }));
            this.setAggregation("_label", new Label({
                text: "{i18n>productRatingLabelInitial}"
            }).addStyleClass("sapUiTinyMargin"));
            this.setAggregation("_button", new Button({
                text: "{i18n>productRatingButton}",
                press: this._onSubmit.bind(this)
            }));
        },

        setValue: function (iValue) {
            this.setProperty("value", iValue, true);
            this.getAggregation("_rating").setValue(iValue);
        },

        _onRate : function (oEvent) {
            var oRessourceBundle = this.getModel("i18n").getResourceBundle();
            var fValue = oEvent.getParameter("value");

            this.setValue(fValue);

            this.getAggregation("_label").setText(oRessourceBundle.getText("productRatingLabelIndicator", [fValue, oEvent.getSource().getMaxValue()]));
            this.getAggregation("_label").setDesign("Bold");
        },

        _onSubmit : function (oEvent) {
            var oResourceBundle = this.getModel("i18n").getResourceBundle();

            this.getAggregation("_rating").setEnabled(false);
            this.getAggregation("_label").setText(oResourceBundle.getText("productRatingLabelFinal"));
            this.getAggregation("_button").setEnabled(false);
            this.fireEvent("change", {
                value: this.getValue()
            });
        },
        renderer : function (oRM, oControl) {
            oRM.write("<div");
            oRM.writeControlData(oControl);
            oRM.addClass("myAppDemoWTProductRating");
            oRM.writeClasses();
            oRM.write(">");
            oRM.renderControl(oControl.getAggregation("_rating"));
            oRM.renderControl(oControl.getAggregation("_label"));
            oRM.renderControl(oControl.getAggregation("_button"));
            oRM.write("</div>");

            this.someFunction();
        },

        someFunction: function(){
            //Do something

        }


    });
});

Cassio Cassio · Accepted Answer · 2016-06-08T10:38:59

The control is perfectly fine, and so are the functions. However, I think that since you are providing a renderer function, this context is not in the control itself anymore; you should use oControl instead.

So, your code should work if you use like this:

        renderer : function (oRM, oControl) {
            oRM.write("<div");
            oRM.writeControlData(oControl);
            oRM.addClass("myAppDemoWTProductRating");
            oRM.writeClasses();
            oRM.write(">");
            oRM.renderControl(oControl.getAggregation("_rating"));
            oRM.renderControl(oControl.getAggregation("_label"));
            oRM.renderControl(oControl.getAggregation("_button"));
            oRM.write("</div>");

            oControl.someFunction();
        },

        someFunction: function(){
            //Do something
        }

SAPUI5 Custom Control call function in renderer method

1 Answers