Hi Max,

If you want to get the Id of a Widget you could assign a name to it, Then when you want to execute Javascript you could pass the Id to the input parameter, see my screenshot. 

Description:
Id runtime property : data type Text (Read Only) Identifies the widget instance at runtime (HTML 'id' attribute). You can use it in JavaScript and Extended Properties. 

Hi Max,

Please find the attached OML file.

HTML  = document.getElementById($parameters.ElementId).innerHTML;

Thanks,

Ramesh

Hi Damian,

Maybe this was not clear enough, but I want to be able to get the Id by the name of the element in run time. 

My application should be able to let end users create their own guided tour based on the elements selected by them. This means that if they create the tour in June, it should still work (with the same Id's etc in October). I store the ElementNames that they have selected in an entity and match these with an actual tour. So above will not work since I don't know the elements they want to use.

Hi @Max de Groot,

If you want to get the id of a container or a widget and use it in a javascript code or function, you should pass the id as input parameter in a javascript action, and inside that javascript, you should now have the id of the element you want to get. See images below for reference.


Hope you get the idea and this helps.

Regards,
Alec

Hi Max,

 I don't think saving the ID is the best option because IDs can be dynamic. A better solution could be adding a custom data attribute to every element you want to save. This way, you have control over each ID, and they will only change when a developer modifies an ID. By doing this, you can create a static entity and use this ID to store it in the database and assign it to an element.

https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes 

Hi @Max de Groot 

OutSystems dynamically creates IDs based on the names of the containers, it is not recommended to use the exact ID hard-coded (example #b5-WorldMap) as these ID prefixes tend to dynamically change.

Try something like this:

var partialId = 'WorldMap'; 

var container = document.querySelector('[id*="' + partialId + '"]'); 

if (container) {  

var containerId = container.id;  

}

You will have to change the partialId and make it dynamic of course, but this implementation might solve your issue.

Thanks for all the answers! 

I managed to resolve it by explicitly defining the name as attribute (kinda like Damian suggested). 

Then with this JS:

var elements = document.getElementsByName($parameters.ElementName);

var id = elements[0].getAttribute('id');

$parameters.ElementId_Out =  id;

I get back the required Id.

PS. I though it would be sufficient to specify the Name attribute already given by OutSystems, but this apperantly turn into the Id, making the name unavailable.