Skip to Content
0
May 27, 2016 at 01:00 PM

how to make specific area is clickable of tile in sapui5

786 Views

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.

Attachments

clickableZone.PNG (25.2 kB)