Lightning Components Basics: Connect to Salesforce with Server Side Controllers

Lightning Components Basics: Connect to Salesforce with Server Side Controllers

Campaign List Component Code

<aura:component controller="CampingListController"

implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >

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

    

    <aura:attribute name="items" type="Camping_Item__c[]"/>

    <aura:attribute name="newItem" type="Camping_Item__c" default="{ 'sobjectType': 'Camping_Item__c',

                        'Name': '',

                        'Quantity__c': 0,                                          

                        'Price__c': 0,

                        'Packed__c': false }"/>

    <!--<ol>

        <li>Bug Spray</li>

        <li>Bear Repellant</li>

        <li>Goat Food</li>

    </ol>  -->

    <!-- PAGE HEADER -->

    

    <c:campingHeader />

    <lightning:layout >

        <lightning:layoutItem padding="around-small" size="6">

<div aria-labelledby="newcampaignform">

                <fieldset class="slds-box slds-theme--default slds-container--small">

    <legend id="newcampaignform" class="slds-text-heading--small slds-p-vertical--medium">

                    Add Campaign List

                    </legend> 

                    <form class="slds-form--stacked">

                        <lightning:input aura:id="campaignform" label="Campaign Item Name"

                         name="campaignitemname"

                         value="{!v.newItem.Name}"

                         required="true"/>

                        <lightning:input type="number" aura:id="expenseform" label="Quantity"

                         name="campaignitemprice"

                         min="1"

                         formatter="number"

                         step="0.1"

                         value="{!v.newItem.Quantity__c}"

                         messageWhenRangeUnderflow="Enter quantity that's at least 1."/>

<lightning:input type="number" aura:id="expenseform" label="Price"

                         name="campaignitemprice"

                         min="0.1"

                         formatter="currency"

                         step="0.01"

                         value="{!v.newItem.Price__c}"

                         messageWhenRangeUnderflow="Enter an amount that's at least $0.10."/>

<lightning:input type="checkbox" aura:id="expenseform" label="Packed?" 

                         name="expreimbursed"

                         checked="{!v.newItem.Packed__c}"/>

<lightning:button label="Create Camping" class="slds-m-top--medium"

                                 variant="brand" onclick="{!c.clickCreateItem}"/>

                    </form>

                </fieldset>

            </div>

            

</lightning:layoutItem>

    </lightning:layout>

    <c:campingHeader />

<div class="slds-card slds-p-top--medium">

        <header class="slds-card__header">

            <h3 class="slds-text-heading--small">Items</h3>

        </header>

         

        <section class="slds-card__body">

            <div id="list" class="row">

                <aura:iteration items="{!v.items}" var="items">

                    <c:campingListItem item="{!item}"/>

                </aura:iteration>

            </div>

        </section>

    </div>

</aura:component>

CampaignListController Code

({

     // Load expenses from Salesforce

    doInit: function(component, event, helper) {

    

        // Create the action

        var action = component.get("c.getItems");

    

        // Add callback behavior for when response is received

        action.setCallback(this, function(response) {

            var state = response.getState();

            if (state === "SUCCESS") {

                component.set("v.items", response.getReturnValue());

            }

            else {

                console.log("Failed with state: " + state);

            }

        });

    

        // Send action off to be executed

        $A.enqueueAction(action);

    },

    

clickCreateItem: function(component, event, helper) {

        var validCamping = component.find('campingform').reduce(function (validSoFar, inputCmp) {

            // Displays error messages for invalid fields

            inputCmp.showHelpMessageIfInvalid();

            return validSoFar && inputCmp.get('v.validity').valid;

        }, true);

if(validCamping){

var addItm = event.getParam("item");

            helper.createItem(component, addItm);

            var newCampingItem = component.get("v.newItem");

            var campings = component.get("v.items");

            var item = JSON.parse(JSON.stringify(newCampingItem));

            campings.push(item);

            component.set("v.items",campings);

            component.set("v.newItem",{ 'sobjectType': 'Camping_Item__c','Name': '','Quantity__c': 0,

                                           'Price__c': 0,'Packed__c': false });

        }

}

})

Campaign  List Helper Code

({

   

    createItem : function(component, campaign) {

        var action = component.get("c.saveItem");

        action.setParams({

            "item": campaign

        });

        action.setCallback(this, function(response){

            var state = response.getState();

            if (state === "SUCCESS") {

                var expenses = component.get("v.items");

                expenses.push(response.getReturnValue());

                component.set("v.items", expenses);

            }

        });

        $A.enqueueAction(action);

    },

})