function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Greg FinzerGreg Finzer 

How to output raw HTML in Lightning?

I have a flat set of data that I need to turn into a pivot table in a lightning component.

Initially I tried this:

        <aura:iteration var="element" items="{!v.elements}">
            <!-- Begin Table Row -->
            <aura:If isTrue="{!element.StartElement}">
                <aura:unescapedHtml value="<tr>" />
            </aura:If>  

I am presented with this error:
            Failed to save FRCElementMatrixComponent.cmp: c:FRCElementMatrixComponent:57,44: ParseError at [row,col]:[58,44] Message: The value of attribute "value" associated with an element type "aura:unescapedHtml" must not contain the '<' character.: Source

So I tried to set an attribute called beginTR and set the value in JavaScript:
            <aura:If isTrue="{!element.StartElement}">
                <aura:unescapedHtml value="{!v.beginTR}" />
            </aura:If> 

This does not work as it cleans out the <tr> before it is output.  

Is there any way I can output straight HTML in lightning?  If not is there any other way to it in Salesforce?  Visual Force, React, etc.
 
Best Answer chosen by Greg Finzer
Greg FinzerGreg Finzer
All,

Thanks for your help.  At this point I have determined that it is not possible to do a pivot table with lightning since it strips out HTML that does not have an end tag.

So if I do this:
component.set("v.beginTR", "begin<TR>");

It will strip out the <TR> and it outputs: begin

If I do this:  
component.set("v.beginTR", "<TR><TD>begin</TD></TR>");

It will not strip it since there are beginning and ending tags.  I thought about rendering the entire table as well, the problem is that the cells need to be styled differently and there will be checkboxes that the user needs to click and I need to bind to events to update data.

So, I am going to create a bunch of divs that are inline-block.  I guess I am not surprised, Lightning is only a year old.  HTML and Classic ASP were very limited when it first came out too.

Thanks everyone.
Greg

All Answers

Raj VakatiRaj Vakati
Try this 
  
<aura:attribute name="cval" type="String" default="<tr>"/>
   
  <aura:iteration var="element" items="{!v.elements}">
            <!-- Begin Table Row -->
            <aura:If isTrue="{!element.StartElement}">
                <aura:unescapedHtml value="{!v.cval}" />
            </aura:If>

https://wedgecommerce.com/unescapedhtml-in-lightning-component/
Greg FinzerGreg Finzer
Raj,

Thanks for the quick response.  

I tried that eariler as well.  Salesforce does not allow the < or > inside of a default.

Greg

 
Raj VakatiRaj Vakati
You need to set from Aura controller 
  
<aura:component >
 
 <aura:attribute name="cval" type="String"/>
 <aura:handler name="init" value="{!this}" action="{!c.myAction}" />
 <div>
 This value is rendered by using aura:unescapedHtml : <aura:unescapedHtml value="{!v.cval}" />
 This value is rendered by span : <span>{!v.cval}</span>
 </div>
</aura:component>
  
({
	myAction : function(component, event, helper) {
		component.set("v.cval", "<span class='hello'>Hello World!!</span>");
	}
})

 
Alain CabonAlain Cabon
The other workaround is to "escape" all the raw html with freeformatter.com

Raw html (impossible to save directly indeed) 
<style>table {  display: inline-table; margin: 1em; border: dashed 6px; border-width: 6px;} table th, table td {  border: solid 3px;}</style>
<table border="1"><tr><td>Test-1-1</td><td>Test-1-2</td></tr><tr><td>Test-2-1</td><td>Test-2-2</td></tr></table>

Escaped String:
  
&lt;style&gt;table {  display: inline-table; margin: 1em; border: dashed 6px; border-width: 6px;} table th, table td {  border: solid 3px;}&lt;/style&gt;&lt;table border=&quot;1&quot;&gt;&lt;tr&gt;&lt;td&gt;Test-1-1&lt;/td&gt;&lt;td&gt;Test-1-2&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Test-2-1&lt;/td&gt;&lt;td&gt;Test-2-2&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;


https://www.freeformatter.com/html-escape.html#ad-output
  
<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >
    
    <aura:attribute name="mytable" type="String" 
  default="&lt;style&gt;table {  display: inline-table; margin: 1em; border: dashed 6px; border-width: 6px;} table th, table td {  border: solid 3px;}&lt;/style&gt;&lt;table border=&quot;1&quot;&gt;&lt;tr&gt;&lt;td&gt;Test-1-1&lt;/td&gt;&lt;td&gt;Test-1-2&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Test-2-1&lt;/td&gt;&lt;td&gt;Test-2-2&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;"/>
  
        <aura:unescapedHtml value="{!v.mytable}" />
</aura:component>

 
Greg FinzerGreg Finzer
All,

Thanks for your help.  At this point I have determined that it is not possible to do a pivot table with lightning since it strips out HTML that does not have an end tag.

So if I do this:
component.set("v.beginTR", "begin<TR>");

It will strip out the <TR> and it outputs: begin

If I do this:  
component.set("v.beginTR", "<TR><TD>begin</TD></TR>");

It will not strip it since there are beginning and ending tags.  I thought about rendering the entire table as well, the problem is that the cells need to be styled differently and there will be checkboxes that the user needs to click and I need to bind to events to update data.

So, I am going to create a bunch of divs that are inline-block.  I guess I am not surprised, Lightning is only a year old.  HTML and Classic ASP were very limited when it first came out too.

Thanks everyone.
Greg
This was selected as the best answer