Hello


I have an entity that contains notes.  I have a web app screen that I use to create the notes, using the CK editor component. Notes are therefore styled in HTML inside the entity and it looks like this:


When I display this on my web app, it looks like this:




I want this same display on a mobile app, but I just cannot get that to work. 


What I did thus far is:


- I created a web block with javascript on ready:


I then add this web block on the screen where I want to display the text, right below a container with the name of "hdesc" 



This works perfect when I only want to display a single entry from my database:



But when I try to do the same thing in a list, it ends up showing weird and wonderful things. It shows the formatted text only once and it always shows the value that was returned by the last list item.




I know nothing about javascript and I guess this has something to do with the index that I use when the java script is being read, but I have no idea how to fix this.


This is a link to my test app:


https://itprosper-dev.outsystemscloud.com/DemoAppCKEditor/Screen1?_ts=637067401065126663


And my oml is attached to this post. 


I will appreciate if anyone has some ideas. Thanks!

Hi Vonnelize,

You should use the id to target the elements where to put innerHtml instead of a class. Also, looking at your code you could include everything in the PatternNote web block. Something like this:

This way Outsystems will generate a unique id for each element of your list, and the code that runs in each webBlock will target the corresponding Id. Otherwise every web block is targeting the same element ( the first element of all the elements with "hdesc" class).


And in the javascript itself getElementsByClassName("hdesc") becomes document.getElementById($parameters.PlaceholderId);.

Also looking at your code there are some other things that could be improved:

- There's no point running the javascript in the OnReady callback, as the results of the aggregate won't be fetched yet, you could put it on the AfterFetch event of the aggregate.

- Instead of making an aggregate on every webBlock you could just pass the whole PatternNote record as an input. 


Solution

Hi Afonso


Thanks for the help. I have change my code to what you recommend but I have more questions, please. The url to the test app is still the same.


I now have this error and I guess I got something wrong in the javascript.


My javascript now looks like this:

Is the x[0].innerHTML correct or do I need to change something there? (I have zero knowledge about javascript).


I have also implemented your other feedback with regards to the aggregates. If I dont have an aggregate, I cannot use on After Fetch, so I am still using on Ready. Is that ok?


I am attaching the latest oml and will appreciate of you can have a look again?


Thank you

Solution

"I have also implemented your other feedback with regards to the aggregates. If I dont have an aggregate, I cannot use on After Fetch, so I am still using on Ready. Is that ok?"

Yes that makes perfect sense!


All you need to change is x[0] to x, as it is not an array anymore, it's a single element. I would also advice you to change the variable name to something more meaningful, so people understand your code faster in the future (like var placeholder)

Thank you Afonso, you are my hero for today. Everything works perfectly now!


Just uploading the final oml in case any one wants to refer to it in future ...