Rendering a long text field that contains html tags on a template

  • 2
  • Problem
  • Updated 9 months ago
  • Solved
Hi all, 

 Currently I have a base64 code stored in a field along with html tags. For example, <img src="(code)"/>. That is the data that is in the field. When I try to place this field {{fieldname}} and allow html. It just comes out as text. I can't call the image externally like this. <img src="{{fieldname}}"/> because the text inside already contains the img src tag. Has anyone ever ran into this or does anyone have any idea how I could solve this? I've also tried with 3 mustaches instead of 2 and I assume I could possibly call a javascript snippet but I'm unsure if that would work or if that's possible. 

Thanks, 

P.S. The base64 code inside works fine in an external source outside of skuid. 
Photo of Kyle Mathis

Kyle Mathis

  • 576 Points 500 badge 2x thumb

Posted 3 years ago

  • 2
Photo of Anna Wiersema

Anna Wiersema

  • 10,890 Points 10k badge 2x thumb
Hi Kyle, just to clarify - did you try  allowing HTML and 3 mustaches  without the external html tag, i.e. just {{{fieldname}}} as the content of your template?

Because in theory in that case the field output would be raw code, but since the template is allowing html it would render not as code but as the finished product (it may be weird in the Composer, but preview to make sure). 
Photo of Kyle Mathis

Kyle Mathis

  • 576 Points 500 badge 2x thumb
Hi Anna, 

Thanks for the reply and yes I did what you suggested. Strangely enough it's not showing the image even though the html tag is included in the field. It just comes out as text. I've tried it with extra tags around and without. I've also tried 2 mustaches and 3 mustaches. The template isn't spitting out the html, just the text with the proper html tags in place. 
Photo of Anna Wiersema

Anna Wiersema

  • 10,890 Points 10k badge 2x thumb
): Okay, thanks.  I'm looking into it and will let you know what I figure out (e.g. whether this is an expected outcome and/or a bug).
Photo of Anna Wiersema

Anna Wiersema

  • 10,890 Points 10k badge 2x thumb
I spoke to one of our product engineers and have a clearer idea of what's going on.  The reason the HTML field isn't working probably has to do with the way Skuid security is set up (to protect against XSS attacks)

One thing you can do is to use the javascript console in your browser to pull up the model and field in question and see what's going on and if the HTML in the field is getting stripped out. You can use the decodeHTML method described here
Photo of Kyle Mathis

Kyle Mathis

  • 576 Points 500 badge 2x thumb
Thanks Anna, I'll look into this!
Photo of Anna Wiersema

Anna Wiersema

  • 10,890 Points 10k badge 2x thumb
no problem, keep us posted!
Photo of Kyle Mathis

Kyle Mathis

  • 576 Points 500 badge 2x thumb
So I just wanted to come back to this and show how we sovled for it. 


$(document.body).one('pageload', function() {   imgPopulate(skuid);
   var $ = skuid.$;


   function imgPopulate(skuid) {
     var $ = skuid.$;


     var model = skuid.model.getModel('Signer'),
       row = model.getFirstRow(),
       sigField = row.Signature__c;

     var img = $("#imageSource");


     img.html(sigField);


     img.children().css("height", "200px").css("width", "75%");

     console.log("image populate");

   }

 });


Thanks all for your time!
Photo of Anna Wiersema

Anna Wiersema

  • 10,890 Points 10k badge 2x thumb
Thank you for sharing your solution!
Photo of Henry Goddard

Henry Goddard

  • 776 Points 500 badge 2x thumb
{{#urlDecode}}{{Test_HTML__c}}{{/urlDecode}}
Photo of Tim Shores

Tim Shores

  • 542 Points 500 badge 2x thumb
Henry's syntax worked for me, the urlDecode Global Merge Variable. Documented here:
https://docs.skuid.com/latest/en/skuid/merge-syntax/global-merge-variables.html