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

  • Ternary conditions must be surrounded by brackets. – Martin Lezer Jul 27 '17 at 15:00
  • That doesn't answer the question but force:recordPreview is deprecated, you should use force:recordData. – Fabien Taillon Jul 27 '17 at 15:19
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.

  • 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 '17 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. – Arpit Sethi Jul 27 '17 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 '17 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 – Arpit Sethi Jul 27 '17 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.

  • 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 '17 at 15:50

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.