How to make clickable table row Without adding OnClick to each cell in Reactive app?
Application Type
Mobile, Reactive

How to make clickable entire table row Without  adding OnClick to each cell in Reactive app?

Not the kind of approach mentioned here below: 

https://www.outsystems.com/forums/discussion/64333/how-to-make-clickable-table-row-in-reactive-web-application/

Hello Sudipta,´´

I didn't quite understand what you mean, can you explain a little better?

Regards,

Jorge Rodrigues

Hello Jorge ,

I want to make an entire table row clickable inside a table and call an event ...

regards 

Sudipta

Hi Sudipta,

I don't think there is a straight forward low code way to do this, as the table-row is not available to attach events on in Service Studio.

So I had a bit of a try with some Javascript, and you can add an eventlistener to each row click event in the onRender of your screen.  This will work, you can even call a client action directly as the function of the addEventListener.  The only problem with that is it will not position the currentrownumber and the Current record of your list correctly.

If that is what you need (and usually that is indeed what you need when you want to do anything meaningfull with a click event in a table), you'll have to take in one step further, and I have found this trick to make sure the current record in the called client action is correct :

I made sure that 1 element inside the row 

  • has a click event through the normal low code way
  • has a special class ClickableElement

And in the javascript in the OnRender, instead of attaching the wanted client action directly to the event, I attach a function to the event, that executes a click on this element.


See attached oml.

Dorine


EDIT : to make it complete, also add this CSS to change your cursor

#TableWithClickableRows .table-row {
    cursor: pointer;
}

EDIT2 : you might want to check out this forge component.  It does something similar like I have attempted, but it looks much more professional.



QDRConditionalClick.oml

I will have a look at this componenet.

mvp_badge
MVP

Hi Sudipta,

In addition to the previously suggested solutions, I want to share one more approach to implemented the mentioned use case using JS.

Implementation steps:

1) Add a custom class to the table widget (jsClass)

2) Define OnRender event handler to the respective screen

3) Within the OnRender event handler, introduce a JS node with the below-mentioned javaScript code

JavaScript Snippet:

var table = document.querySelector('.table.jsClass');

table.addEventListener('click', function(e) {
    var row = e.target.closest('tr');
    var parentNode = row.parentNode;
    var index = Array.prototype.indexOf.call(parentNode.children, row);
    
    $actions.OnRowClick(index);
});


See this sample screen: RWA | TriggerEvntOnRowClick

Refer to the attached .oml file


I hope this helps you!


Kind regards,

Benjith Sam

RWALabClickEvtOnTableRow.oml

Nice and clean solution, @Benjith Sam 

just one more adjustment : now header clicks will fire event for first row, I added a check on the parent tag to avoid that :

Dorine


EDIT : also, you have the same disandvantage as I ran into : you have to use indexing into your list instead of being able to use currentRowNumber and the current record.

mvp_badge
MVP

Hi @Dorine Boudry 

Thank you for the correction :)

Yes, I too agree that the list currentRowNumber property is not working as expected with this approach (a bit strange!).


Kind regards,

Benjith Sam

Well,

that´ s not really strange, the framework must run some logic to set it under water  in low code events on a list, this little bit of javascript obviously doesn´ t.

That´ s why i added the detour of clicking an item in the list, which in turn triggers a normal low code event, to force the current record to be correct.

Dorine

Thanks Guys, I will investigate these approaches.  Although I am aware of these JS approach but looking for more Outsystemy approach.  Again, thanks, really appreciate your feedback

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.