cancel
Showing results for 
Search instead for 
Did you mean: 

how to make specific area is clickable of tile in sapui5

rohit_darwade
Explorer
0 Kudos

Hi,

My Requirement is,

To Make bottom area of tile is clickable only.

I used Custom tile, but whole area is clickable.

now i'm trying make to custom control for same.

i used onclick event but same results happen.

here i share some code:

Controller.js:

jQuery.sap.require("sap.ui.core.mvc.Controller");

jQuery.sap.declare("NewControl.util.myNewControl.js");

sap.ui.core.mvc.Controller.extend("NewControl.view.Im", {

  onInit: function() {

  var props= new util.myNewControl({

  name: "Click on Red Zone",

  color : "#c691cc"

  });

  var page=this.getView().byId("pageid");

  page.addContent(props);

  },

});

Custom Control js :

sap.ui.core.Control.extend("util.myNewControl", {

  metadata : {

  properties : {

  name : {

  type   : "string"

  },

  text : {

  type : "string"

  },

  size : {

  type : "sap.ui.core.CSSSize", defaultValue: "200px"

  },

  innerwidth :{

  type : "sap.ui.core.CSSSize", defaultValue: "200px"

  },

  innerheight :{

  type : "sap.ui.core.CSSSize", defaultValue: "50px"

  },

  color :{

  type : "string"

  },

  image :{

  type : "string"

  }

  },

  },

  renderer : function(oRenderManager, oControl){

  oRenderManager.write("<div");

        oRenderManager.writeControlData(oControl);

        oRenderManager.addStyle("width", oControl.getSize());  

                                                   

        oRenderManager.addStyle("height", oControl.getSize());

        oRenderManager.writeStyles();

        oRenderManager.addClass("mySquare");       

        oRenderManager.writeClasses(); 

        oRenderManager.write(">");

       

        oRenderManager.write("<img");

        oRenderManager.addStyle("src", oControl.getImage());

        oRenderManager.write(">");

        oRenderManager.write("</img>");

       

        oRenderManager.write("<div");

        oRenderManager.writeControlData(oControl);

        oRenderManager.addStyle("width", oControl.getInnerwidth());  

                                                   

        oRenderManager.addStyle("height", oControl.getInnerheight());

        oRenderManager.addStyle("background-color", oControl.getColor());

        oRenderManager.writeStyles();

        oRenderManager.addClass("mySquareInner");       

        oRenderManager.writeClasses();              

        oRenderManager.write(">");

        oRenderManager.write(oControl.getName());

       

        oRenderManager.write("</div>");

  },

  onclick : function(){

  alert("Hi Rohit");

  }

});

Hope you understand my requirement.

waiting for solution.

Thanks,

Rohit.

Accepted Solutions (1)

Accepted Solutions (1)

saivellanki
Active Contributor
0 Kudos

Hi Rohit,

Will this sample help? JS Bin - Collaborative JavaScript Debugging

Regards,

Sai Vellanki.

saivellanki
Active Contributor
0 Kudos

Perfect Dennis!

Regards,

Sai Vellanki.

Answers (1)

Answers (1)

rohit_darwade
Explorer
0 Kudos

Thanks sai and Dennis.

rohit_darwade
Explorer
0 Kudos

Hi Dennis,

You are using oButton. but my i know why you uses it.

you not added oButton to custom tile or anywhere. so how could it appear as on press event.


confusing while adding a button;


and one think is that i don't want to use tile container.


so may this works only for custom tile.



Thanks,

-Rohit

rohit_darwade
Explorer
0 Kudos

Hi ,

Got the Solution.

Thanks,

Rohit