Design Studio OnClick event not triggering on sapui5 component

[former_member194504]

I am trying to extend the sapui5 table component. Was not able to fire the design studio onClick event.  Can anybody explain me? how to get this done.

my js file:

initDesignStudio : function() {
  // Called by sap.designstudio.sdkui5.Handler  (sdkui5_handler.js)
  },
  init : function() {
  sap.ui.table.Table.prototype.init.apply(this,arguments);
  },


  clickHandler : function(){
  this.fireDesignStudioEvent("onclick");
  }

in contribution.xml:

<property type="ScriptText" title="On Click" group="Events" id="onclick"/>

[former_member194504 · Accepted solution]

Thank you guys for your early response. Can You please give me a sample how to attach the event, I am finding difficulty in doing that. I have already tried cellclick, It seems to throw error. And michal, I am working based on your code only. So it will be great help, If you guys help me to sort out this issue.

[mike_howles4 · Accepted solution]

Again, that is covered in the SAPUI5 table documentation.  It shows the syntax on how to attach event listeners to events.

[Karol-K · Accepted solution]

Hi,

for cellclick event here is the code.

var myOnCellClickEventFunction = function(oEvent) {

  alert("halo " + oEvent) ;

};

oTable.attachCellClick(myOnCellClickEventFunction );

you need to check in debugger / documentation what you get as aprameters on the event.

does this work?

the attachemnt of events on SAP UI5 is always similar, there is always the corresponding attach funciton, eg. event is "cellClick" -> function for attachemtn is "attachCellClick"

[former_member194504 · Accepted solution]

Michal Can you provide me with one sample function?

something like this???

this.attachRowSelectionChange(new sap.ui.table.Table({ 
   //parameters here or can i pass some function

);

})

[former_member194504 · Accepted solution]

@karol Thanks man . Thank you all who have been trying to helped me. Now I got some idea, How to get this done.If you have more suggestions feel free to let me know @michal still love to hear from you a sample function.

[MustafaBensan · Accepted solution]

Hi Nithyanandam,

As a further reference, if you look at the sample UI5 components that are provided with the DS SDK, you will find several examples of attaching UI5 event handlers that may be helpful for your understanding.

Regards,

Mustafa.

[mike_howles4 · Accepted solution]

init : function() {
  sap.ui.table.Table.prototype.init.apply(this,arguments);
  this.attachRowSelectionChange(this.rowChangeHandler,this);
},
rowChangeHandler : function(oControlEvent){
  alert("You clicked " + oControlEvent.getParameter("rowIndex"));
  alert("Please read this:\n\nhttps://sapui5.hana.ondemand.com/sdk/#docs/api/symbols/sap.ui.table.Table.html");
  this.fireDesignStudioEvent("onclick");
},

[former_member194504 · Accepted solution]

Thank you so much mustafa. 

[former_member194504 · Accepted solution]

Thank you so much michal. Really appreciate it.

[Former Member · Accepted solution]

I was not able to get the cellClick to work...

Table.attachCellClick(this.cellClicked); // inside: this.init...Table = new sap.ui.table.Table({


this.cellClicked = function(e){
  var rowIndex = "";//e.getParameters.rowIndex; -- not supported???
  var columnIndex = "";//e.getParameters.columnIndex;

//jQuery.sap.log.info("Cell click: " + e.getParameter("rowIndex") + " - " + e.getParameter("columnIndex") + " - " + e.getParameter("cellControl").getId());

  if(rowIndex && columnIndex){  
  cellContent = rowIndex + " + " + columnIndex;  
  }else{  
  cellContent = "";  
  }  
  that.firePropertiesChanged(["cellClicked"]);
  that.fireEvent("oncellclick");  
  };

getParameters does not work... neither via getParameters.rowIndex nor via getParameter("rowIndex")

Can you see where I went wrong?

Thank you!

[former_member194504 · Accepted solution]

Refer sapui5 API. don't use function(e) use function(oControlEvent)

[mike_howles4 · Accepted solution]

nithyanandam,

It does not matter what parameter name you use in a function declaration, anonymous or declared...  This has nothing to do with SAPUI5 API. Daniel can refer to it as 'e', 'oControlEvent', 'apple', 'orange', or whatever.

Daniel,

Try e.getParameter("rowIndex") instead.

EDIT: Looking at your code comments, it looks like you may have already tried that.

Maybe it's something simpler, like declaring your event handler function BEFORE attaching it?  (Move line 1 to the bottom)

[Former Member · Accepted solution]

I got it working - the problem was a missing individual getter and setter function...

and we have to use getParameter().rowIndex

[mike_howles4]

Please review the SAPUI5 Table documentation.

You'd probably want to attach your click event handler to either rowSelectionChange or cellClick, depending on your usage.

If your questions turn specific to SAPUI5, you may also wish to ask them in the UI5 SCN Space: .

[MustafaBensan]

Hi Nithyanandam,

Further to my previous comment, having reviewed the API of the UI5 table control you are trying to implement, depending on your requirements you can attach a UI5 event handler for the cellClick or rowSelectionChange events, then call the fireDesignStudioEvent("onClick") within the UI5 event handler.

Regards,

Mustafa.

[MustafaBensan]

Hi Nithyanandam,

Your code doesn't appear to have a trigger that calls the onClick function.  You need to attach a native UI5 event handler for the UI5 component itself (press or click) and within this event handler call onClick() or just call the fireDesignStudioEvent() function directly.

Regards,

Mustafa.