How to Render Custom HTML on P10

  

Hello everyone,
I'm having a problem on P10 Environment (Mobile) related to Custom HTML.

I'll explain what I need to do:

I have a file that is an SVG sprite with a list of custom icons that I need to use in the application I am working on so that it is possible to do some icon animations, so I can not use Fonts for this case.


What I already did

  1. I started by uploading the SVG sprite file to the application's resources (I know it is possible to load SVG into the images folder, but a Sprite is still not possible, says the format is not valid).
  2. Now to display the icons on the page I need to render this HTML block:
    1. <svg class="icon icon-search"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/svg/iconsSprite.svg#icon-search"></use></svg>

To do the previous step (HTML Render) on platform 9, I would use an "Expression" and do the unescape expression where it would work, but in P10 (Mobile) this is no longer supported.

So I tried to use the HTML Widget but it does not support "svg" and "use" tags, which is a problem.

Given this, what alternatives do I have?
Build HTML by Javascript and do append the same to the pages? This causes a problem. No preview of the icons on the Studio thing which is important.

I leave here a Printscreen of a part of my Svg sprite for those who do not know what it is and also the link of an good article that explains why I want and the advantages of using Svg instead of font.


To finish, I use the post to ask Outsystems:
- Would not it make sense for this HTML widget to support this kind of tags (svg and use)?
- How can we know the list of tags currently supported?


I hope someone can help me!
Cumpz!

Hi Daniel,

How are you?

Outsystems 10 already support SVG format in image component, as you can see at images bellow.

I hope that helps.

Kind Regards,

Miguel Vicente

For fonts: 

please, use font icon using icomoon and generate a normal font.

https://icomoon.io/

Hi, Miguel,
Thanks for your answer, but as I mentioned above, I know it's possible to put SVG's as Image, however I want to load a Sprite (set of svg's) and then only needed to put the class of each icon to use in the application.


Regarding the fonts, I also use IconMoon and this is what I'm using in the application right now until I get a solution to this problem and use Svg's everywhere.

Cumpz

Hi Daniel,

I think you will need to wait for someone of the engineering team to answer you.


Regarding this:

Daniel Sintrão wrote:

Given this, what alternatives do I have?
Build HTML by Javascript and do append the same to the pages? This causes a problem. No preview of the icons on the Studio thing which is important.


I know it's not the best solution, but why you don't do this?


Cheers

Hi Alexandre,
Thanks for your answer!

That solution does not solve the problem.
First, that preview image does not allow you to be dynamic according to the icon.
And then on P10 (Mobile) you can not put HMTL in an expression.

This solution that you indicated works yes, in P9 because we can still use expressions to put for example html.
But thanks anyway for the help!

Cumpz!


Hi Daniel.


Just to clarify, I was not saying that the code will be in an expression. I was just saying that you can use whatever the JS code you created (to inject the SVG in the page) in the False of the if condition.

And when you use the block on your page you have just an image as a placeholder to get the feeling of what the block does.


If you really need to see the correct image in Service Studio, you can do a Block for each icon, but I think just getting the look and feel of the block is enough for Service Studio, so you can just leave an input parameter to define the class of the icon you need to see on your page.


And by the way, this is just a workaround because of the preview in Service Studio...


Cheers

Hi Alexandre,
I was in doubt when I saw the expression, I also thought that you should not mean to put the code in the same but in the If False condition.

I think creating a weblock for each icon was unsustainable, because in the future there should be an extensive list of icons.


I already tried several alternatives and I concluded that at the moment it is not possible to find a solution that does everything I need, I will have to choose between using svg or having preview them in the studio.

  • If I choose to use the sprite svg, I would make a webblock with an input parameter (icon class to use) and make the HTML build by Javascript replacing the icon classes by what I received in the input parameter.

This does not render the icon in Studio.

  • The other option is to use a Font family for everything, use the Icons widget to place the icons in the studio or the HTML Widget with a <i> tag and class = "icon-name" attributes.

With this last alternative, every time I needed a svg to do an animation I would have to put it as image.


If I find a magic solution that does it all, I'll post it here!
Thanks!

Was curious about the problem and the solution. It's just strange OS doesn't reconize the <svg> element as a valid html element. Think this should be added. Have searched for which elements are allowed, but could find that list quick. Even a list at all.

Might ad a supportcase (or idea) to get this element in the html element list. It would be the nice way to solve this problem.