Element ID - in a table

Element ID - in a table

  

Hi community,

I am wondering if i have editable widget like this, where the 'name' column has widget's name, say it X. I know that the widget is referred in Outsystems using this syntax: X.id. 

My question is, because it is a table, so there are many 'name column' widgets - equals to the number of the table's rows, what are their ids? How to refer them all?

  

Thank you in advance.

regards,

indra


Hi Indra,


The platform generates different IDs when rendering the page. For example, I did a table similar to yours and if I inspect the generated HTML I can see the following IDs:


RichWidgets_wt23_block_wtMainContent_wtCatalogTable_rows_ctl00_wtCatalog_Name

RichWidgets_wt23_block_wtMainContent_wtCatalogTable_rows_ctl02_wtCatalog_Name

RichWidgets_wt23_block_wtMainContent_wtCatalogTable_rows_ctl04_wtCatalog_Name


and so on...


About the "How to refer them all" it depends on what you need to do. Can you give an example of a specific need?


Cheers,

Renato


Indra Budiantho wrote:

Hi community,

I am wondering if i have editable widget like this, where the 'name' column has widget's name, say it X. I know that the widget is referred in Outsystems using this syntax: X.id. 

My question is, because it is a table, so there are many 'name column' widgets - equals to the number of the table's rows, what are their ids? How to refer them all?

  

Thank you in advance.

regards,

indra




Hi Renato,

THank you for quick response.

How if i want to replace the Subject widget to say it a <h2> element using Jquery:


SyntaxEditor Code Snippet

"$(document).ready(function(){
     alert('gorocket2'); 
     $('#" + Students_Subject.Id + "').replaceWith( '<h2>New heading</h2>');
 alert('gorocket3'); 
});"

  Unfortunately, it does not work.

It works when, i use class:

I try:



regards,

indra

Hi Indra

What are you trying to achieve? And why resort to jQuery? in general I'd shy away from using JavaScript if possible, it will make for more maintainable code that's simpler for any OutSystems developer to understand.

In this case in particular, the EditableTable itself is manipulating the DOM to display the editable row... you will need to take into account that this will likely happen after your jQuery code ran (as it is only executing when the page's DOM has fully loaded)

HI Jorge,

Thank you. 

I am just curious to know how to refer to widget in a table, say it widget in row 3 column1, given the name of the widget is X. Trying to refer X.id???

This thread leads me to that sleuthing:

https://www.outsystems.com/forums/discussion/34042/replace-inputs-with-label-on-webscreen/

By the way, your view is correct, introducing some tricky code and hard to read make life harder and the Editable Widget also so complex to handle because it hides the AddRecord behavior.

regards,

indra 

Solution

In order to have the same final result that you get when you use a class selector for the replaceWith, you would need to add your JavaScript snippet in one of the cells for the row, that way you'd be executing it per row and referencing the right element ID.

Solution

Hi Indra,

As Jorge as said try to avoid the javascript if it's possible. But sometimes that is not possible.

Another thing I would say is that if we are talking about an editable table then definitely avoid messing with it.

Having said that if you know the coordinates of the cell in the table you can use the CSS pseudo-selectors nth-child. Something like:

tbody tr:nth-child(6) td:nth-child(2)

Cheers,

José

It really depends on the specific case. But if you really need to use Javascript you can always add a CSS class to the widget and then access using JQuery with the siblings method.


I didn't try it but it should be something like the below example, where index is the position of the element in the table:

$sibling = $(this).siblings('.css_class_name')[index];


Cheers,

Renato


Indra Budiantho wrote:

HI Jorge,

Thank you. 

I am just curious to know how to refer to widget in a table, say it widget in row 3 column1, given the name of the widget is X. Trying to refer X.id???

This thread leads me to that sleuthing:

https://www.outsystems.com/forums/discussion/34042/replace-inputs-with-label-on-webscreen/

By the way, your view is correct, introducing some tricky code and hard to read make life harder and the Editable Widget also so complex to handle because it hides the AddRecord behavior.

regards,

indra 



Hi, Jose, 

Thank you, i am just curious if there is a short-cut to refer the element in the Editable/List, say it its name is X, how to refer it in Outsystem for the row 3th, i am hoping something like this:

X[3].id

and for all the rows, just:

X[ ].id

regards,

indra


Hi Indra,

Not that I know: there is no such way.

Cheers,

José