[SalesForce] how to retrieve an attribute value in ternary operator

i have two attributes in my component:

<aura:attribute name="sObjectName" type="String" />
<aura:attribute name="acc" type="Account" />

the attribute sObjectName contains the sObjectName (Lead, Account, Contact etc)
the attribute acc contains an Id,Name,Type.

when i write this line

<label>{!v.acc.Id}</label>

i receive the id of the account and it works great

when i write this line:

<label>{!v.sObjectName=='Lead' ? 'txtTest' : !v.acc.Id}</label>

when im in the lead record, it print 'txtTest' just fine, but when i'm not – it prints 'false' and not !v.acc.Id

what am i doing wrong? what is the correct syntax? Thanks

Best Answer

The reason that you are getting false is that the v.acc.Id is a javascript string, and the logical negation operator, !, returns false when applied to strings.

var s = 'string'; 
console.log(s);   // string
console.log(!s);  // false

Basically, all you need to do is remove the !:

<label>{!v.sObjectName=='Lead' ? 'txtTest' : v.acc.Id}</label>

Related Solutions

[SalesForce] How to pass a function as a Lightning component attribute

The solution is to declare an event instead of an attribute when you want to provide a callback. Below is myButton.cmp rewritten to use events.

pressEvent.evt

<aura:event type="COMPONENT" />

myButton.cmp

<aura:component>
    <aura:attribute name="label" required="true" type="String" />
    <aura:attribute name="class" required="false" type="String" />

    <!-- Declare an "instance" of pressEvent -->
    <aura:registerEvent name="press" type="c:pressEvent"/>

    <input type="button" value="{!v.label}" class="{!v.class}" onclick="{!c.onClick}" />
</aura:component>

myButtonController.js

({
    onClick : function(component, event, helper) {
        helper.trackButtonClick(component, event);

        var event = component.getEvent('press');
        event.fire();
    }
})

This wasn't clear from the documentation, but there are two ways to handle an event. The first is to use the <aura:handler /> markup. To handle the press event of myButton, you could do this:

<aura:handler name="press" event="c:pressEvent" action="{!c.onOk}"/>

I would avoid this approach because if you have more than one button, the press event for all of them would be handled by the same action c.onOk.

The second way to handle an event is to pass a callback as an attribute in the <c:myButton /> markup. I didn't see this in the Salesforce docs but found it in an unrelated question. This is exactly what I needed. Each instance of myButton gets a unique callback.

myButtonConsumer.cmp

<aura:component>
    <!-- No aura:handler necessary. Just pass the callback as an attribute -->
    <!--<aura:handler name="press" event="c:pressEvent" action="{!c.onOk}"/>-->

    <c:myButton label="OK" class="slds-button" press="{!c.onOk}" />
    <c:myButton label="Cancel" class="slds-button" press="{!c.onCancel}" />
</aura:component>

myButtonConsumerController.js

({
    onOk: function(component, event) {
        alert('OK pressed!');
    },

    onCancel: function(component, event) {
        alert('Cancel pressed!');
    }
})

[SalesForce] Can lightning component attribute of type aura component have references to attributes from the same component

I read the documentation you mentioned in the comments and it says attribute of type Aura.Component[] is called a facet. Then I checked the documentation about Component facet and came up with the below working example on how to use the attribute type List in other attribute of type Aura.Component[]:

HelloWorld.cmp

<aura:component implements="force:appHostable">
    <aura:attribute name="bar" type="Aura.Component[]">
    </aura:attribute>
    {!v.bar}
</aura:component>

HellWorld.app:

<aura:application extends="force:slds">
    <aura:attribute name="foo" type="List" default="['red','blue','green']"/>
    <c:HelloWorld>
        <aura:set attribute="bar">
            <aura:iteration items="{!v.foo}" var="item">
                <p><aura:text value="{!item}"></aura:text></p>
            </aura:iteration>
        </aura:set>
    </c:HelloWorld>
</aura:application>

Output:

UPDATE:

I did not work much on Lightning but I was curious on how to solve the issue you are talking about in comments so I came up with this example:

HelloWorld.cmp

<aura:component implements="force:appHostable">
    <aura:attribute name="bar" type="Aura.Component[]" access="global">
    </aura:attribute>
    <aura:attribute name="baz" type="Aura.Component[]" access="global">
    </aura:attribute>    
    <aura:attribute name="componentNumber" type="String" access="global">
    </aura:attribute>
    Below are the contents of {!v.componentNumber} component: <br></br>
    <div style="background-color:red">{!v.bar}</div>
    <div style="background-color:yellow">{!v.baz}</div>
    <div style="background-color:green">{!v.body}</div>
</aura:component>

HelloWorldApp.app

<aura:application extends="force:slds">

    <aura:attribute name="foo1" type="List" default="['red','blue','green']"/>
    <aura:attribute name="foo2" type="List" default="['Orange','Apple','Mango']"/>

    <c:HelloWorld aura:id="first" componentNumber="1">
        <aura:set attribute="bar" >
            <aura:iteration items="{!v.foo1}" var="item" indexVar="i">
                <p><aura:text value="{! i + ':' + item}"></aura:text></p>
            </aura:iteration>
        </aura:set>
    </c:HelloWorld>

    <c:HelloWorld aura:id="second" componentNumber="2">
        <aura:set attribute="bar" >
            <aura:iteration items="{!v.foo2}" var="item" indexVar="i">
                <p><aura:text value="{! i + ':' + item}"></aura:text></p>
            </aura:iteration>
        </aura:set>     
    </c:HelloWorld>

    <div></div>

    <ui:button  label="Update first component with second component body" 
                press="{!c.updateFirstCmp}"/>

</aura:application>

HelloWorldAppController.js:

({
    updateFirstCmp : function(component, event, helper) {
        debugger;
        var secondCmpBdy = component.find('second').get('v.bar');
        // Setting the attribute of type Aura.Component[] of first HelloWorld Component from 
        // second HelloWorld component attribute of type Aura.Component[]
        component.find('first').set('v.baz',secondCmpBdy);
        // Setting the body(type Aura.Compoent[] as per docs) of first HelloWorld Component 
        // from second HelloWorld component attribute of type Aura.Component[]
        component.find('first').set('v.body',secondCmpBdy);
    }   
})

Output:

After clicking on the button: (second component still exists on the page while the content is copied to first component)

I am learning a lot from this question :)

Best Answer

Related Solutions

[SalesForce] How to pass a function as a Lightning component attribute

[SalesForce] Can lightning component attribute of type aura component have references to attributes from the same component

Related Topic