Hi Yizuhi,

Regarding your  JavaScript, the most obvious reason is that the statement

var corrugador = rootObject.getElementById("corrugador");

Did not return the HTML element, as such corrugador is null.

The easiest (low-code) way to include an SVG in an OutSystems Reactive application, is to go to the Logic tab and under the Images folder add the SVG as Image.Then add an Image widget to your screen and select the the Image widget property Image the SVG images from the Image folder.

Now you can add on the Image widget the OnClick event. As you see no JavaScript required.

Regards,

Daniel

Hi Yizuhi, 

Daniel's solution should also do the trick when an onClick is needed, but I think you want to differentiate between the muscles in the image (with an image/area/map?) or is this assumption wrong?

Some of my thoughts when reading your post:

• Is the object "corrugador" available within the page, or is it an OutSystems generated object (in that case the name will be different).
• Are you also doing something in the On Destroy with these Event Listeners?
• Be aware the On Destroy is activated after the new screen is displayed. When removing things like listeners, this could be a problem for items which have the same name and position in the DOM.
• Also, if both (old and new screen) have a "corrugador" named item, you could end up with the wrong one (in certain cases)
• Also, document is not destroyed. Only the content is replaced. Any object in "document" will not be removed

Hi Yizuhi,

How did you load the SVG in the DOM? Please keep in mind OutSystems Reactive Web app uses ReactJs as underlying technology. It is reactJS that is maintaining the DOM. Did you check in your browser the SVG is loaded? 

You could try and leverage the InlineSVG widget from OutSystems UI:

And set the expression of its SVGCode parameter to your SVG code. This way you ensure the SVG is correctly loaded.

 In the OnRender event handler of your screen you can add the JavaScript to add your OnClickEvent handler logic.

Regarding that your code is:

var rootObject = document.getElementById($parameters.ObjectId).contentDocument;
var corrugador = rootObject.getElementById("corrugador");
corrugador.addEventListener('click', $actions.OnMuscleSelected())

But the element in your SVG is identified by the id "currugador" so there is no need to first get the content document and from that the element, you can get it straight from the document object

var corrugador = document.getElementById("corrugador");
corrugador .addEventListener('click', $actions.OnMuscleSelected, false);

Regards,

Daniel

I did load your complete SVG in the InliveSVG it works the click on the one path also worked.

Before you add the SVG to the inlineSVG first replace " with ' and then include the complete text between "".

This code must work, it does for me:

var corrugador = document.getElementById("corrugador");
corrugador .addEventListener('click', $actions.OnMuscleSelected, false);

i  will sent you a working module. Give me 10 minutes.

See attached