1

I have a lightning component to display a image formula field in the lightning app and Community. when added this field to the lightning app image is not rendering instead it just displaying the html tag.. I have referred to this post and tried implementing this in my formula but still no luck..

my formula field is as below.

    IF(ISPICKVAL( Reward_level__c , 'Gold') ,  
IMAGE(LEFT($Api.Partner_Server_URL_260, 
   FIND( '/services', $Api.Partner_Server_URL_260))+"resource/Gold",'Gold Status',20,577) ,
IF( ISPICKVAL(Reward_level__c, 'Bronze') ,  
IMAGE(LEFT($Api.Partner_Server_URL_260, 
   FIND( '/services', $Api.Partner_Server_URL_260))+"resource/Bronze",'Bronze Status',20,577) , 
IF(ISPICKVAL(Reward_level__c , 'Silver')  ,
IMAGE(LEFT($Api.Partner_Server_URL_260, 
   FIND( '/services', $Api.Partner_Server_URL_260))+"resource/Silver",'Silver Status',20,577) ,  
IMAGE(LEFT($Api.Partner_Server_URL_260, 
   FIND( '/services', $Api.Partner_Server_URL_260))+"resource/None",'Not Started',20,577) 
) 
))

Component

<aura:component controller="olympic" implements="forceCommunity:availableForAllPageTypes" access="global">

<aura:attribute name="OlympicReward" type="Olympic_Rewards__c[]"/>
<aura:handler name="init" value="{!this}" action="{!c.getMyObjects}" />
<!--  <ui:button label="Check Reward status" press="{!c.getMyObjects}" /> -->
<aura:iteration var="OLRS" items="{!v.OlympicReward}">
    <p>{!OLRS.Name},
    {!OLRS.StatusBar__c}</p>
</aura:iteration>

component controller

({
getMyObjects: function(cmp){
    var action = cmp.get("c.getOlympic");
    action.setCallback(this, function(response){
        var state = response.getState();
        if (state === "SUCCESS") {
            cmp.set("v.OlympicReward", response.getReturnValue());//The attribute that you are iterating has to be set here
        }
    });
    $A.enqueueAction(action);
}

})

  • Do you have a None,gold, bronze and silver loaded as images in static resources? – Rao Jul 14 '17 at 18:07
  • yes.. I have those all png images loaded in static resources and those id refers to them only ., – Aman Jul 14 '17 at 18:09
  • can you post your component code? – Rao Jul 14 '17 at 19:20
  • @Rao ya sure I have added that to my post.. – Aman Jul 14 '17 at 19:22
6

It appears that the way to render text without HTML-escaping is using aura:unescapedHtml. I have not used Lightning, but I'd assume you need to change your page to (assuming OLRS.StatusBar__c is the formula field):

<aura:iteration var="OLRS" items="{!v.OlympicReward}">
    <p>{!OLRS.Name},
    <aura:unescapedHtml value="{!OLRS.StatusBar__c}" /></p>
</aura:iteration>
|improve this answer|||||
  • Awesome. I saw that the server was returning a HTML value for the formula field. I was going to post a solution that took the response extracted the image URL from the response and then modified the response to pass the image URL. I then used the image URL through lightning:avatar. Never knew there was an unescapeHtml Tag. – Rao Jul 14 '17 at 21:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.