Mobile app UserAvatar with URL

Mobile app UserAvatar with URL

  

Hi, I am new to Outsystems. I am building a mobile app and I am trying to use the UserAvatar widget with a dynamic URL provided by an external REST endpoint.

However, the widget only takes Binary Data input type, and not Text (url).

How do I proceed?

Answered your other post about this : https://www.outsystems.com/forums/discussion/21525/mobile-app-use-image-with-dynamic-url/


But if your API returns an url, you could add html as expression and put the image url as the <img> tag of that html

Niels Favreau wrote:

But if your API returns an url, you could add html as expression and put the image url as the <img> tag of that html

Thanks Niels, It's just that the image widget official docs state that it takes a URL.... So i thought I overlooked something. But now I'll try your solution, thanks!


Niels Favreau wrote:

But if your API returns an url, you could add html as expression and put the image url as the <img> tag of that html

Hi Niels, Ousystems escapes my HTML and shows the <img> as plain text on the app. In service studio 10 for mobile apps, there is no "escape" property to turn this off. Can you provide an example of  how to format the Img tag in way that it is not escaped? 


Solution

Hi Robin,

You can use JavaScript to set html value on specific container. Check this thread for details https://www.outsystems.com/forums/discussion/20510/unescaped-content-on-mobile-app-v10/

Solution

Mykola Tkachenko wrote:

Hi Robin,

You can use JavaScript to set html value on specific container. Check this thread for details https://www.outsystems.com/forums/discussion/20510/unescaped-content-on-mobile-app-v10/

Hi Mykola and thanks for your reply! I tried the steps mentioned in your question but, I did not understnad step 3  "3) pass the content and the container id to the JS Node

How would I do that?


Hi Robin,

You have JavaScript node when edit client actions. You can add input parameters to use in your js code. to get container id you have to set a name to it - it then will appear in list of widgets with possibility to select its id. Other way you can use class (that you explicitly controls on "styles" attribute) - in this case you only need to pass your unescaped content.