[SalesForce] Display fields if null in an aura:iteration

I'm making an edit records component on Opportunity where I display fields from related objects like Account, the Primary Contact and Contact Role only if their value are null. For the Account and the Primary Contact, I've just clone the data, made the check on once side and update the value with the other one like this:

<aura:attribute name="opp1" type="Opportunity" />
<aura:attribute name="opp2" type="Opportunity" />
.
.
.
<aura:if isTrue="{!v.opp1.Account.VAT_Number__c == null }">
     <lightning:input type="text" label="VAT Number" value="{!v.opp2.Account.VAT_Number__c}" aura:id="accForm" required="true"/>
</aura:if>

Then I get my values in my helper to update them.

The problem is that for the Contact Roles, I have to made an aura:iteration on an Opportunity Contact Role list:

<aura:iteration items="{!v.oppContRoles}" var="item">
                    <aura:if isTrue="{!item.taux != null}">
                        <aura:if isTrue="{! item.Contact.Salutation == null || item.Contact.FirstName == null || item.Contact.LastName == null || item.Contact.Birthdate == null || item.Contact.Title == null }">

                            <div class="slds-card__header slds-grid slds-border_top">
                                <header class="slds-media slds-media_center slds-has-flexi-truncate">
                                    <div class="slds-media__figure">
                                        <span class="slds-icon_container slds-icon-standard-contact" title="contact">
                                            <lightning:icon iconName="standard:contact" size="medium"/>
                                        </span>
                                    </div>
                                    <div class="slds-media__body">
                                        <h2 class="slds-card__header-title">                       
                                            <span class="slds-text-heading_small"><b>Owner Contact:&nbsp;{!item.Contact.FirstName}&nbsp;{!item.Contact.LastName}</b></span>                       
                                        </h2>
                                    </div>
                                </header>
                            </div>
                        </aura:if>

                        <div class="{!item.Contact.Salutation == null ? 'Display' : 'Hidden'}">
                            <lightning:input type="text" label="Salutation" value="{!item.Contact.Salutation}" required="true" class="{!item.Contact.Salutation == null ? 'Display' : 'Hidden'}"/>
                        </div>

                        <aura:if isTrue="{!item.Contact.FirstName == null }">
                            <lightning:input type="text" label="First Name" value="{!item.Contact.FirstName}" aura:id="accForm" required="true"/>
                        </aura:if>

                        <aura:if isTrue="{!item.Contact.LastName == null }">
                            <lightning:input type="text" label="Last Name" value="{!item.Contact.LastName}" aura:id="accForm" required="true"/>
                        </aura:if>

                        <aura:if isTrue="{!item.Contact.Birthdate == null }">
                            <lightning:input type="date" label="Birthdate" value="{!item.Contact.Birthdate}" aura:id="accForm" required="true"/>
                        </aura:if>

                        <aura:if isTrue="{!item.Contact.Title == null }">
                            <lightning:input type="text" label="Job Title" value="{!item.Contact.Title}" aura:id="accForm" required="true"/>
                        </aura:if>

                    </aura:if>
                </aura:iteration>

In this situation, if a user type a single character in a field, this one disappear immediatly because the condition is no longer respected. As you can see on the first field, I also tried to use a class to handle this problem but it doesn't work. I could not find a solution on this problem, do you have any idea how to solve it?

Thank you in advance,

Matthieu

—Update—
In my data loading function, i add this loop to duplicate data:

for(var  i = 0; i < res.length ; i++){
                res[i].Contact.Salutation2 = res[i].Contact.Salutation;
                res[i].Contact.FirstName2 = res[i].Contact.FirstName;
                res[i].Contact.LastName2 = res[i].Contact.LastName;
                res[i].Contact.Birthdate2 = res[i].Contact.Birthdate;
                res[i].Contact.Title2 = res[i].Contact.Title;
            }
            component.set("v.oppContRoles", res);

Then in my cmp file, I made this change:

 <aura:if isTrue="{!item.Contact.Salutation2 == null }">
                            <lightning:input type="text" label="Salutation" value="{!item.Contact.Salutation}" required="true"/>
                        </aura:if>

                        <aura:if isTrue="{!item.Contact.FirstName2 == null }">
                            <lightning:input type="text" label="First Name" value="{!item.Contact.FirstName}" aura:id="accForm" required="true"/>
                        </aura:if>

                        <aura:if isTrue="{!item.Contact.LastName2 == null }">
                            <lightning:input type="text" label="Last Name" value="{!item.Contact.LastName}" aura:id="accForm" required="true"/>
                        </aura:if>

                        <aura:if isTrue="{!item.Contact.Birthdate2 == null }">
                            <lightning:input type="date" label="Birthdate" value="{!item.Contact.Birthdate}" aura:id="accForm" required="true"/>
                        </aura:if>

                        <aura:if isTrue="{!item.Contact.Title2 == null }">
                            <lightning:input type="text" label="Job Title" value="{!item.Contact.Title}" aura:id="accForm" required="true"/>
                        </aura:if>

Then, no fields are displaying in my lightning component. Did I miss a point?

Best Answer

After your callback function returns where you load the records from the database, just loop through the result records and create new on-the-fly copies of the properties, e.g.

record.__backupFirstName = record.FirstName;

Now in your aura:if just check against the backup value instead of the field itself.

Note that I've used the leading underscores to make theoretical clashes impossible.

Related Solutions

[SalesForce] get values in lightning:input with $A.createComponents

In order to bind to something dynamically, you need a reference. Here is a very basic, no-frills, slightly buggy implementation that demonstrates that this basically works.

Notice how I use component.getReference to dynamically link to a field. Also notice how I can bind to the same field twice, which literally lets me modify the same field more than once in real-time, just to prove that they are real references.

With a little more error checking and fact-gathering, this could indeed be a dynamic form with some basic describe data, etc. Notice how I do not use aura:id at all. I simply bound all the fields to a common object, and I could get and retrieve the values at will (in this case, demonstrated through Object.keys). I could also bind this object to, say, a force:recordData to dynamically save the data back to the server, or send it through a server action in Apex.

<aura:application extends="force:slds">
    <aura:attribute name="accountRecord" type="Account" default="{ 'sobjectType': 'Account' }" />
    <aura:attribute name="edits" type="Aura.Component[]" />
    <aura:attribute name="fieldName" type="String" />
    <aura:attribute name="output" type="String" />

    <aura:handler name="init" value="{!this}" action="{!c.init}" />

    {!v.output}

    <hr />

    {!v.edits}

    <ui:inputText value="{!v.fieldName}" />
    <ui:button press="{!c.addField}" label="Add" />
    <br/>
    <ui:button press="{!c.display}" label="Show Data" />
</aura:application>

({
    init: function(component, event, helper) {
        component.set("v.edits", []);
    },
    addField: function(component, event, helper) {
        var field = component.get("v.fieldName"), 
            obj = component.get("v.accountRecord");
        obj[field] = "";
        component.set("v.accountRecord", obj);
        $A.createComponent(
            "lightning:input", {
                value: component.getReference("v.accountRecord."+component.get("v.fieldName")),
                label: component.get("v.fieldName"),
                type: "Text"
            },
            $A.getCallback(function(newCmp, status, error) {
                var edits = component.get("v.edits");
                edits.push(newCmp);
                component.set("v.edits", edits);
            })
        );
    },
    display: function(component, event, helper) {
        var obj = component.get("v.accountRecord");
        var results = [];
        Object.keys(obj).forEach(function(key) { results.push(key+":"+obj[key])});
        component.set("v.output", results.join('\n'));
    }
})

Here's a demo of me dynamically binding stuff:

[SalesForce] component.find an aura:id item created in aura:iteration

aura:id must be a literal value. As such, you can't use an expression in aura:id (it will be treated as literal text). Instead, you can use the element's id via document.getElementById:

var selectedItemNew = document.getElementById(oppId);

Best Answer

Related Solutions

[SalesForce] get values in lightning:input with $A.createComponents

[SalesForce] component.find an aura:id item created in aura:iteration

Related Topic