Add a tooltip to the trash Icon in a editable table

Hi,

I am using an editable table.

I would like to add something like a tooltip to icon trash.

My Trash icon is disabled, so I have in the same lines in the editable table that icon disabled and for some line enable. 

Any idea to add a tooltip or something like to my disabled trash icon?

Any idea will be Amazing

Best Regards

Hi, friend!

Have you tried this widget (image 1)?

Put the tooltip inside an If condition to show up only when the icon is enable.

Sometimes the tooltip widget is not active in your platform, so you have to get it from the OutSystemsUIWeb module (image 2)


Best regards


sofia g wrote:

Hi,

I am using an editable table.

I would like to add something like a tooltip to icon trash.

My Trash icon is disabled, so I have in the same lines in the editable table that icon disabled and for some line enable. 

Any idea to add a tooltip or something like to my disabled trash icon?

Any idea will be Amazing

Best Regards

Well I'm not sure you can edit this widget to add a tooltip widget but you can do it with CSS and JS

You need to write the CSS of the tooltip, use some JS to check if exist an element into the DOM with the class you are trying to match and if find it you add a class to the element you and to show the tooltip and also add as a child of this element a tag span with the text of your tooltip, so when you hover you will have the effect tooltip but this isn't easy to do it and I would do it just as the last resource ever for my solution


Lenon Manhães wrote:

Hi, friend!

Have you tried this widget (image 1)?

Put the tooltip inside an If condition to show up only when the icon is enable.

Sometimes the tooltip widget is not active in your platform, so you have to get it from the OutSystemsUIWeb module (image 2)


Best regards


Hi Lenon Manhães,

Thanks for your reply, yeah I thought one of my thought was about to apply a tooltip, however, the referred widget needs an id to be associate to another widget So, if I want that associated to the trash icon of the editable table, how can I know or have the id of Editable Table trash Icon 


for now, I have an attribute associated to it, it is 'title' that I inserted with 


However, I take the CSS "pointer-events: none;" off for it works, I mean for the title attribute be shown I can't have that part of CSS 'point-events: none'. the point is if I act in this way, pressing the button is available to press and the action will run. I just would like that the message appears/happen and the but would be really disabled, no possibility to run the action RowDeleteAction. But Can I turn the button disabled, it is there but disabled, and at the same time a piece of information appears as the mouse pass through it.


In addition, I would like to change the look and feel of the title attribute of DeleteRowAction, How can I act on it, with CSS, or in other way?

Hi Sofia g,

I also found it bit difficult to implement the mentioned requirement but at-last, hopefully I achieved what you asked for..

Add the below JavaScript code to the Screen level JavaScript section

JavaScript Code Snippet

$(document).on('mouseenter','.EditableTable tr a.DeleteRowAction', function (event) {
    $(this).attr('title', 'Click this link to delete the record!');
});


Check this out: Demo Application Screen


Hope this helps you!


Regards,

Benjith Sam

Benjith Sam wrote:

Hi Sofia g,

I also found it bit difficult to implement the mentioned requirement but at-last, hopefully I achieved what you asked for..

Add the below JavaScript code to the Screen level JavaScript section

JavaScript Code Snippet

$(document).on('mouseenter','.EditableTable tr a.DeleteRowAction', function (event) {
    $(this).attr('title', 'Click this link to delete the record!');
});


Check this out: Demo Application Screen


Hope this helps you!


Regards,

Benjith Sam


Hi Benjith Sam

Thanks for the reply,

I really appreciate your answer, but the point is a little bit more complex. Even I have the trash icon It is disabled so all the code I put applied to it, it is like no appliable.

I created like control in the editable table to show just the trash icon enable just for some rows which mean in according to a condition I have "

SyntaxEditor Code Snippet

TableFacturas.List.Current.EstadoFacturaId <> Entities.EstadoFactura.Facturada and
 TableFacturas.List.Current.EstadoFacturaId <> Entities.EstadoFactura.Cobrada and 
TableFacturas.List.Current.EstadoFacturaId <> Entities.EstadoFactura.Abono and 
TableFacturas.List.Current.EstadoFacturaId <> Entities.EstadoFactura.Anulada and 
TableFacturas.List.Current.EstadoFacturaId <> Entities.EstadoFactura.CobroParcial

"

the trash icon is disabled or not.

That control I did it is like an editable table and a cell, All the code I have to do that control consist in an attribute created for the editable table and which line I am seeing, it is like:

The attribute by default in an editable table

 And the cell is seen: 

then I add some CSS to control the displaying for trash icon

For that reason, I have really for some lines the icon indeed disabled.

The point is I would like to have that behavior but in addition, I would like to have a message "It is not possible to delete this invoice", But how to have that two behavior in that button both working, How to have that trash button in editable table disabled, meaning the button doesn't allow do nothing, any action, but even so we are able to see the message like: "It is not possible to delete this invoice"(Which row means an invoice).


Hi Sofia g,

I succeeded in implementing  the requirement which you mentioned in the previous post, Hurrah!

Check this: EditableTable Challenge App

Note: In the List of fruits only the Banana Fruit record is not allowed to be deleted i.e. for Banana Fruit record the delete bin icon is in disable mode and the tool-tip for the respective record Bin icon is set to "It is not possible to delete this invoice"

Let me know, if this is what you are looking for?


Regards,

Benjith Sam

Benjith Sam wrote:

Hi Sofia g,

I succeeded in implementing  the requirement which you mentioned in the previous post, Hurrah!

Check this: EditableTable Challenge App

Note: In the List of fruits only the Banana Fruit record is not allowed to be deleted i.e. for Banana Fruit record the delete bin icon is in disable mode and the tool-tip for the respective record Bin icon is set to "It is not possible to delete this invoice"

Let me know, if this is what you are looking for?


Regards,

Benjith Sam

Hi Benjith Sam

I am really glad having your help 

I think we are almost there

Yeah that looks like I want, however, as you can notice in your example you can effectively delete the row

How can we avoid it?

If you find a way through code or something, let me know

Yeah we have the first point done, we have a button grey and the message, but we want a button really disabled, I mean the functionality disabled too, right? 

Anyways I am really glad knowing there is somebody who is trying help. That is amazing.

Hi Sofia g,

Sorry, I missed that part to implement... Now its fully done (I'm too much happy for the success) Hurray! :)

I really enjoyed doing this challenging task :)


Check this: EditableTable Challenge App


Regards,

Benjith Sam

Solution

Hi Sofia g,

PFA - Includes the .oml solution file.

I tried to refactor the code and added some comments to make the code way visible and understanding (sorry for the delay in posting the solution file).

Let me know if you have any queries.


Hope it helps you!


Regards,

Benjith Sam

Solution

Benjith Sam wrote:

Hi Sofia g,

PFA - Includes the .oml solution file.

I tried to refactor the code and added some comments to make the code way visible and understanding (sorry for the delay in posting the solution file).

Let me know if you have any queries.


Hope it helps you!


Regards,

Benjith Sam

Hi Benjith Sam,

Amazing your collaboration,

I really appreciate, 

Yeah that is the spirit and a solution, in addition, I tried again and implemented in a different way, anyways I am gonna let you know, it can be helpful for somebody too

so : 

I needed some CSS in addition:

As I said I use that attribute 'ShowLinkDelete' as a control to my condition which allows the trash icon is available or not just for some rows. 


then I use that code

To put it no clickable and the attribute title seen. 


Anyways, I want to thank you a lot I was really needing,  and wanting a lot to complete that changeling task, Your collaboration was amazing. I want to thank you for all of you guys who tried help me, Knowing there is someone who we can share our experiences and solve problems is amazing.

Thank you so much.

Best Regards

Hi Sofia g,

You are welcome :)

I'm happy that you enjoyed the collaborative work experience we had... Thank you for sharing the final implementation with all of us, we also learnt many things from your approach :)

Glad I could be of help!

Happy coding :)


Regards,

Benjith Sam