Mapping Service to Appery.io HTML Component and Variables

Question

Is there a way to take a service that connects to an Appery database and map it to an HTML page component or a variable?

I have successfully set up a service that connects to my Appery.io database and I'm mapping it to a page.

I can get content into Text and Image components, but mapping a string to the HTML component doesn't seem to work, nor does mapping a string to a variable set up on that page (typed as a string). I tried mapping the $[i] object to the HTML object as well, but that didn't seem to change anything.

I tried mapping a couple different columns to the variable and the HTML component and even the ones that successfully map to other components don't result in any content showing on the page. As a way of trying to see what was going on, I used the "log value to console" transformation and nothing shows up in the console for the variable or HTML component.

Answer 1

The basic mapping won't work for that purpose, so please use the following workaround:

1. Please add two custom includes (SafeHtml and DomSanitizer) and define variables, based on them:

2. On the HTML component add the property [innerHtml]:

[innerHtml]=value

3. Set the value to that variable with the custom code:

this.value = this.sanitizer.bypassSecurityTrustHtml('<a href="https://appery.io">appery.io</a>');