0

Component:

<aura:attribute name="record" type="object"/>
<aura:attribute name="fieldMap" type="object"/>
<c:LightningErrorHandler aura:id="leh"/>
<force:recordData aura:id="accountRecord"
                     recordId="{!v.recordId}"
                     targetFields="{!v.record}"
                     fields="Id, Name, Rating"
                     LayoutType="FULL"
                     mode="VIEW" />
<div>
    <div class="slds-text-heading_medium"> Account Temparature</div>
    <div>
        <div class='container'>
            <div class="{!v.record.Rating == 'Hot' ? 'card temp-hot' : v.record.Rating == 'Warm' ? 'card temp-warm': v.record.Rating == 'Cold' ? 'card temp-cold' }">
                <div class='inner'>
                    <div class="{! v.record.Rating == 'Hot' ? 'icon-hot' : v.record.Rating == 'Warm' ? 'icon-warm' :v.record.Rating == 'Cold' ? 'icon-cold' }">   
                    </div>
                    <div class='title'>
                        <div class='text'>TEMPARATURE</div>
                    </div>
                    <div class='number'>{!v.record.Rating}</div>
                </div>
            </div>
        </div>
    </div>
</div>

Error:

FIELD_INTEGRITY_EXPRESSION: Failed to save undefined: Cannot mix expression and literal string in attribute value, try rewriting like {!'foo' + v.bar}: Source

What am I missing here?

UPDATE:

New Error: Failed to save undefined: unexpected end of expression at column 137 of expression: v.record.Rating == 'Hot' ? 'card temp-hot' : v.record.Rating == 'Warm' ? 'card temp-warm': v.record.Rating == 'Cold' ? 'card temp-cold' : Source

2
  • Ternary conditions must be surrounded by brackets. Jul 27, 2017 at 15:00
  • That doesn't answer the question but force:recordPreview is deprecated, you should use force:recordData. Jul 27, 2017 at 15:19

2 Answers 2

1

@Ajay, as you have nested ternary operators to apply the class, you need to properly deal with it. Please find the following fixed code:-

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<aura:attribute name="record" type="object"/>
<aura:attribute name="fieldMap" type="object"/>
<force:recordData aura:id="accountRecord"
                 recordId="{!v.recordId}"
                 targetFields="{!v.record}"
                 fields="Id, Name, Rating"
                 LayoutType="FULL"
                 mode="VIEW" />
<div>
<div class="slds-text-heading_medium"> Account Temparature</div>
<div>
    <div class='container'>
<div class="{!v.record.Rating == 'Hot' ? 'card temp-hot' : (v.record.Rating == 'Warm' ? 'card temp-warm': (v.record.Rating == 'Cold' ? 'card temp-cold':'')) }">
 <div class='inner'>
              <div class="{! v.record.Rating == 'Hot' ? 'icon-hot' : (v.record.Rating == 'Warm' ? 'icon-warm' :(v.record.Rating == 'Cold' ? 'icon-cold':'')) }">   
                </div>
                <div class='title'>
                    <div class='text'>TEMPARATURE</div>
                </div>
                <div class='number'>{!v.record.Rating}</div>
            </div>
        </div>
    </div>
</div>
</div>
</aura:component>

Hope this helps you. Please mark this as answer if this resolve this issue. Thanks.

4
  • Thank you Arpit. It worked. However, why the SLDS CSS styles are not loading? I believe that we dont need to explicitly include them in the component.
    – Ajay
    Jul 27, 2017 at 16:58
  • Glad it worked for you. for css you need to extend slds in the application where you putting the component. <aura:application extends="force:slds"> Please mark it as answer so that it can help other members as well. Jul 27, 2017 at 17:16
  • I am not using it in any application, using it in Account detail page. In this case what do we do with SLDS?
    – Ajay
    Jul 27, 2017 at 17:58
  • I also believe that it should be inherited automatically. can you please check with <ltng:require styles="lightning css file" /> , whether it works for you Jul 27, 2017 at 19:20
0

There is a typo in your div class just after <div class='container'>, you're closing your } in the middle of your class expression instead of the end.

1
  • Thank you @FabienTaillon: I did corrected the tag, however I am getting new error with the expression. Updated the description with the new error.
    – Ajay
    Jul 27, 2017 at 15:50

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .