Hi,

You should not try to access the Element IDs, because they are automatically generated by OutSystems. They will change as you change your screen design. Use the element name or use specific classes if you really need to access those DOM elements from JavaScript.

What you can do is obtain this id at runtime (each named widget will have an Id runtime attribute you can only read) and inject it in your JavaScript node. 

Regards,

Daniel

Hi @Thales Ferraz 

In this post https://www.outsystems.com/forums/discussion/36146/how-to-use-getelementbyid-javascript-in-outsystems/

You will find your solutions. 

Hi Thales,

I suggest to make an input parameter in your JS node and assign it with the [elementName].Id

Sample:

Note:

You have to "name" the element before you can access its Id.

I solve my problem and i'm posting this aswer with the details to help another users with the same problem.

But I need to mention first that it would be impossible to solve without the help of @Daniël Kuhlmann and @Marco Mateo.

My problem starts in that post.

My goal was to validate the data on the rest api side and simplify the app side to work without dependencies. That is, I would like to make validation changes in the rest api side without need to make changes on the app side.

IN THE REST API SIDE:

To solve this goal i created a rest api that validate the fields.

For each invalid field, the rest api appends the field ina list containing FieldName and ErrorMessage.

IN THE APP SIDE:

I have a save button that calls the rest api and fills the ScreenElements in a local variable called InvalidFields. I need to do this because I need to access it in a client action called OnRender in the following.

In the end of the save client action, the app runs the OnRender client action.

OnRender client action checks if the InvalidFields list has data. 

If has, it calls another client action called FillInvalidFieldsMessages (This is separate to be reused on all forms of the app).

FillInvalidFieldsMessages client action loop the invalid fields, converts them to json, and runs a javascript code to fill the error messages in the form.

Done!

THE JAVASCRIPT CODE TO FILL THE ERROR MESSAGES:

block = document.getElementById($parameters.FormId);if (block) {    blockId = block.parentNode.id;    blockId = blockId.replace('$', '');    var screenElementJson = JSON.parse($parameters.ScreenElement);    var elementId = blockId + "-" + screenElementJson["FieldName"];    var element = document.getElementById(elementId);    if (element) {        element.classList.add("not-valid");        var validationMessageSpan = document.createElement('span');        validationMessageSpan.innerHTML = screenElementJson['ErrorMessage'];        validationMessageSpan.classList.add("validation-message");        validationMessageSpan.classList.add("custom-invalid");        element.parentNode.appendChild(validationMessageSpan);    }}

THE JAVASCRIPT CODE TO CLEAN THE ERROR MESSAGES (I didn't mention this in the answer because I'm still thinking about where to put this): 

var elements = Array.from(document.getElementsByClassName("custom-form-input"));elements.forEach( element => {    element.classList.remove("not-valid");});

var elements = Array.from(document.getElementsByClassName("validation-message custom-invalid"));elements.forEach( element => {    element.parentNode.removeChild(element);});

FINAL NOTES:

If anyone knows a smarter and safer way to do this, I'd be happy to know.