• arpit sethi 23
  • NEWBIE
  • 0 Points
  • Member since 2015

  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 0
    Questions
  • 2
    Replies
I'm new to Lightning components and am experimenting with my first app displaying a list of records from a custom object (Aircraft_Relationship__c); each record will include fields from two other related objects (master-detail to Aircraft__c and lookup to Account (field is  Account is Aircraft_User__c). The listing of the primary object (Aircraft_Relationship__c) works fine.

For the life of me I cannot figure out why when I launch the app the related fields do not appear; I've reviewed the documentation and from what I understand the dot notation is supposed to work in traversing these relationships (as I'm familiar with in VF).

Any help would be appreciated (am I missing something obvious?)

Hre's Apex controller pulling the related fields:
public with sharing class auraAClisting {

    @AuraEnabled
    public static List<Aircraft_Relationship__c> findAll() {
        return [SELECT id, name,status__c,ownership__c,Aircraft__r.name,aircraft__r.id,New_Used__c,Model__c,Aircraft_User__c,Aircraft_User__r.name,Owner__c,Owner__r.name FROM Aircraft_Relationship__c where status__c = 'Delivered' LIMIT 50];
    }
}
Here's the client-side controller:
({
    doInit : function(component, event) {
        var action = component.get("c.findAll");
        action.setCallback(this, function(a) {
            component.set("v.acr", a.getReturnValue());
        });
        $A.enqueueAction(action);
    }
})
And the component:
<aura:component controller="auraAClisting">
    <aura:attribute name="acr" type="Aircraft_Relationship__c[]"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <ul class="list-group">
        <aura:iteration items="{!v.acr}" var="ac">
            <li class="list-group-item">
                <a href="{! '/' + ac.Id }">
                    <p>{!ac.Name}</p>             <-- DISPLAYS VALUE in APP
                    <p>{!ac.Aircraft__c}</p>      <-- DISPLAYS VALUE in APP
                    <p>{!ac.Aircraft__r.id}</p>   <-- NOTHING APPEARS in APP
                </a>
            </li>
        </aura:iteration>
    </ul>
</aura:component>
I realize this is a relativly new thing but I am new to the salesforce platform in general and not sure if my questions are lightning component specific, or more a general salesforce question, so here goes.
I am working through the workbook: http://www.salesforce.com/us/developer/docs/lightning/lightning.pdf and ran into a couple things I just can't make sense of.

1. Prefix's.
    a. I know in visualforce the "c:" prefix means you're using a component. I posted the code below as a reference. In the formhelper.js line "  var action = component.get("c.getExpenses");" what is the "c." referencing?
   b. in the line "action.setCallback(this, function(a){" what is the "a"? is it related to the "A" in "$A.enqueueAction(action);"?
   c. What is the "v" prefix referencing in "var expenses = component.get( "v.expenses");"?

My best guess is that "v"  is for accessing a variable, and "c" for a component, while the "a" passed into the function is a generic placeholder for something (but Idk what...). I don't see anywhere in the code where these 3 prefixes are initialed or declared, which is throwing me off. I'm a Java guy and learning javascript as well as salesforce, so i'm sure it's something obvious that I just don't know yet. I just want to thouroughly understand the example and this piece is giving me grief.


FormHelper.js:
({
    getExpenses : function(component) {
        var action = component.get("c.getExpenses");
        var self = this;
        action.setCallback(this, function(a){
            component.set("v.expenses", a.getReturnValue());
            self.updateTotal(component);
        });
        $A.enqueueAction(action);
    },
    updateTotal : function(component){
        var expenses = component.get( "v.expenses");
        var total = 0;
        for(var i=0; i<expenses.length; i++){
            var e = expenses[i];
            total += e.zoidberg__Amount__c;
        }
        //Update counters
        component.set("v.total",total);
        component.set("v.exp" ,expenses.length);
    },
    createExpense : function(component, expense){
        
        this.upsertExpense(component, expense, function(a) {
            
            var expenses = component.get("v.expenses");
            expenses.push(a.getReturnValue());
            component.set("v.expenses",expenses);
            this.updateTotal(component);
            
        });
    },
    upsertExpense : function(component, expense, callback){
        var action = component.get("c.saveExpense");
        action.setParams({
            "expense":expense
        });
        if(callback){
            action.setCallback(this,callback);
        }
        $A.enqueueAction(action);
    }
})

formController.js:
({
    doInit : function(component, event, helper) {
        helper.getExpenses(component);
    },
    createExpense : function (component,event,helper){
        var amtField = component.find("amount");
        var amt = amtField.get("v.value");
        if(isNaN(amt)||amt==''){
            amtField.setValid("v.value",false);
            amtField.addErrors("v.value",[{message:"Enter an expense amount."}]);
        }
        else{
            amtField.setValid("v.value",true);
            var newExpense = component.get("v.newExpense");
            helper.createExpense(component,newExpense);
        }
    },
    updateEvent : function(component, event, helper){
        helper.upsertExpense(component,event.getParam("expense"));
    },
    waiting : function(component, event, helper){
        component.set("v.wait","updating...");
    },
     doneWaiting : function(component, event, helper){
        component.set("v.wait","");
    },
})

form.cmp:
<aura:component controller="zoidberg.ExpenseController">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:handler event="zoidberg:updateExpenseItem" action="{!c.updateEvent}"/>
    <aura:handler event="aura:waiting" action="{!c.waiting}"/>
    <aura:handler event="aura:doneWaiting" action="{!c.doneWaiting}"/>
    <aura:attribute name="wait" type="String"/>
    <aura:attribute name="expenses" type="zoidberg.Expense__c[]"/>
    <aura:attribute name="newExpense"
                    type="zoidberg.Expense__c"
                    default="{ 'sobjectType': 'zoidberg__Expense__c',
                                 'Name': '',
                                 'zoidberg__Amount__c': 0,
                                 'zoidberg__Client__c': '',
                                 'zoidberg__Date__c': '',
                                 'zoidberg__Reimbursed__c': false
                             }"/>
    
    <!-- Attributes for Expense Counters -->
    <aura:attribute name= "total" type="Double" default="0.00"/>
    <aura:attribute name="exp" type="Double" default="0" />
    <div class="wait">
        {!v.wait}
    </div>
    <!-- Input from using components -->
    <form>
        <fieldset>
            <ui:inputText aura:id="expname" label="Expense Name"
                          class="form-control"
                          value="{!v.newExpense.name}"
                          placeholder="My Expense" required="true"/>
            <ui:inputNumber aura:id="amount" label="Amount"
                          class="form-control"
                          value="{!v.newExpense.zoidberg__Amount__c}"
                          placeholder="20.80" required="true"/>
            <ui:inputText aura:id="client" label="Client"
                          class="form-control"
                          value="{!v.newExpense.zoidberg__Client__c}"
                          placeholder="ABC Co."/>
            <ui:inputDateTime aura:id="expdate" label="Expense Date"
                          class="form-control"
                          value="{!v.newExpense.zoidberg__Date__c}"
                          displayDatePicker="true"/>
            <ui:inputCheckbox aura:id="reimbursed" label="Reimbursed?"
                          class="form-control"
                          value="{!v.newExpense.zoidberg__Reimbursed__c}"/>
            <ui:button label="Submit" press="{!c.createExpense}"/>
        </fieldset>
    </form>
    
    <!--Expense Counters -->
    <div class="row">
        <!--Change the counter color to red if total amount is more than 100 -->
        <div class= "{!v.total >= 100 ? 'alert alert-danger' : 'alert alert-success'}">
            <h3>Total Expenses</h3>$
            <ui:outputNumber value="{!v.total}" format=".00" />
        </div>
        <div class="alert alert-success">
            <h3>No. of Expenses </h3>
            <ui:outputNumber value="{!v.exp}"/>
        </div>
    </div>
    <!--Display expense records -->
    <div class="row">
        <aura:iteration items="{!v.expenses}" var="expense">
           <zoidberg:expenseList expense="{!expense}"/>
        </aura:iteration>
    </div>
</aura:component>