• Chad Hammond
  • NEWBIE
  • 10 Points
  • Member since 2014

  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 1
    Questions
  • 0
    Replies
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>