Extended Control - call custom function

[former_member182374]

Hello Experts,

I've written a custom control that extends ToolPopup.

"use strict";

  jQuery.sap.declare("controls.MyToolPopup");

  sap.ui.ux3.MyToolPopup.extend("controls.MyToolPopup", {
      renderer: {},

      myFunc : function() {
          //TODO:
      },

      onAfterRendering: function() {
          var $this = this.$();

          var sID = this.getId();

          var title = $this.find('.sapUiUx3TPTitle');
          title.removeClass("sapUiUx3TPTitle");
          title.addClass("customClassUiUx3TPTitle");

              title.append('<a id="' + sID + '-close" href="#" onclick="myFunc()">X</a>');
      }
  });

The control has additional html 'a' tag and I need to call a custom function when clicking on the link.

How can I call the custom function (myFunc) from the onclick event of the 'a' tag?

Regards,

Omri

[former_member182374 · Accepted solution]

Solved it on my own:

  "use strict";

  jQuery.sap.declare("controls.MyToolPopup");

  sap.ui.ux3.ToolPopup.extend("controls.MyToolPopup", {
      renderer: {},

      myFunc : function() {
          console.log("OK!");
      },


      onAfterRendering: function() {
          var that = this;
          var $this = this.$();

          var sID = this.getId();

          var title = $this.find('.sapUiUx3TPTitle');

          title.removeClass("sapUiUx3TPTitle");
          title.addClass("customClassUiUx3TPTitle");
              title.append('<a id="' + sID + '-close" href="#"">X</a>');

           $("#" + sID + "-close").on("click",function(){
            that.myFunc();
              });

      }
  });

However if someone has a cleaner solution...

Regards,

Omri

[former_member182862 · Accepted solution]

maybe like this.

jQuery.sap.declare("controls.MyToolPopup");      sap.ui.ux3.ToolPopup.extend("controls.MyToolPopup", {      renderer: {},         myFunc: function() {     },

    onAfterRendering: function() {  
        var title = this.$().find('.sapUiUx3TPTitle');  
        title.removeClass("sapUiUx3TPTitle");  
        title.addClass("customClassUiUx3TPTitle");


        var elm = $('<a href="#">X</a>');
        elm.attr('id', this.getId() + '-close');
        elm.on('click', function() {
            this.myFunc();
        }.bind(this));


        title.append(elm);
    } 
});

Thanks

-D

[former_member182374 · Accepted solution]

Hi Dennis,

Thanks for your answer.

However, I ended up copying the click event from 'sap.ui.commons.Dialog' control since my requirement was to add 'close' button to the ToolPopup control.

    D.prototype.onclick = function(e) {

        var c = this.getId() + '-close';

        if (e.target.id === c) {

            this.close();

            e.preventDefault();

        }

        return false;

    };

Regards,

Omri