garazi / forcelandia

Forcelandia

Lightning Components Bootcamp

The following code snippets are for the Hands-on Lightning Components Bootcamp at Forcelandia 2017.

Prior to beginning the workshop, please ensure that you have a new Developer Org with My Domain enabled, and that you have installed this package.

1. Click the App Launcher and select the Dreamhouse Lightning app.
2. Click the Data Import tab and then Initialize Sample Data. This imports data that you use within this project.

Step 1 — Apex Controller

public class PropertyListings {
	@AuraEnabled
	public static List<Property__c> getPropertyListings(Id recordId) {
		return [SELECT Id, Name, Beds__c, Baths__c, Price__c, Broker__c, Status__c, Thumbnail__c FROM Property__c WHERE Broker__c=:recordId];
	}
 }

Step 2 — PropertyListings Component Content

<aura:component controller="PropertyListings" implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <aura:attribute name="recordId" type="Id"/>
    <aura:attribute name="greeting" type="String" default="World" />
    <aura:attribute name="brokerListings" type="Object[]" />
    <aura:attribute name="sortField" type="String" />
    <aura:attribute name="sortOrder" type="String" />

    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <lightning:card iconName="custom:custom85" title="Broker's Listings">
	<div class="slds-p-left--medium slds-p-right--medium">
	    <ul class="slds-list--vertical slds-has-dividers--top-space">
		<aura:iteration items="{!v.brokerListings}" var="item" indexVar="i">
		    <li class="slds-list__item">                   
			{!item.Name}
		    </li>
		</aura:iteration>
	    </ul>
	</div>
    </lightning:card>    
</aura:component>

Step 3 — CompactProperty Component Content

<aura:component >
    <aura:attribute name="property" type="Property__c" />

    <div class="slds-media">
	<div class="slds-media__figure">
	    <img src="{!v.property.Thumbnail__c}" class="slds-avatar--large slds-avatar--circle" alt="{!v.property.Title_c}" />
	</div>
	<div class="slds-media__body">
	    <div class="slds-grid">
		<a onclick="{!c.navToRecord}">
		    <h3 class="slds-text-heading--small slds-m-bottom--xx-small">{!v.property.Name}</h3>
		</a>
		<!-- Edit button goes here -->
		<lightning:buttonIcon iconName="utility:edit" class="slds-col--bump-left" variant="bare" alternativeText="Edit Record" onclick="{!c.editRecord}" />

	    </div>
	    <div aura:id="propertyDetails" class="slds-m-top--small">
		<ul class="slds-grid slds-wrap">
		    <li class="slds-list__item slds-size--1-of-2"><span class="slds-text-color--weak slds-m-right--small">Beds:</span> {!v.property.Beds__c}</li>
		    <li class="slds-list__item slds-size--1-of-2"><span class="slds-text-color--weak slds-m-right--small">Baths:</span> {!v.property.Baths__c}</li>
		    <li class="slds-list__item slds-size--1-of-2"><span class="slds-text-color--weak slds-m-right--small">Price:</span> {!v.property.Price__c}</li>
		    <li class="slds-list__item slds-size--1-of-2"><span class="slds-text-color--weak slds-m-right--small">Status:</span> {!v.property.Status__c}</li>
		</ul>
	    </div>
	</div>
    </div>
</aura:component>

Step 4 — navToRecord

({
    navToRecord : function (component, event, helper) {
	var navEvt = $A.get("e.force:navigateToSObject");
	navEvt.setParams({
	    "recordId": component.get("v.property.Id")
	});
	navEvt.fire();
    }
})

Step 5 — editButton

<lightning:buttonIcon iconName="utility:edit" class="slds-col--bump-left" variant="bare" alternativeText="Edit Record" onclick="{!c.editRecord}" />

Step 6 — editRecord

editRecord : function(component, event, helper) {
    var editRecordEvent = $A.get("e.force:editRecord");
    editRecordEvent.setParams({
	"recordId": component.get("v.property.Id")
    });
    editRecordEvent.fire();
}

Step 7 — Design Parameters

<design:attribute name="sortField" label="Sort By" datasource="Date_Listed__c, Price__c, Status__c" default="Price" description="Set the list based on what criteria?" />
<design:attribute name="sortOrder" label="Sort Order" datasource="ASC, DESC" description="Sort in ascending or descending order" />

Step 8 — Updated Apex

public class PropertyListings {
    @AuraEnabled
    public static List<Property__c> getPropertyListings (Id recordId, String sortField, String sortOrder) {
	String sorting;
	String query = 'SELECT Id, Name, Beds__c, Baths__c, Price__c, Broker__c, Status__c, Thumbnail__c FROM Property__c WHERE Broker__c=:recordId'; 
	if (String.isNotEmpty(sortField)) {
	    query = query + ' ORDER BY ' + sortField;
	    if (String.isNotEmpty(sortOrder)) {
		query = query + ' ' + sortOrder;
	    }
	}          
	return Database.query(query);
    }
}

Step 9 — Updated doInit

({
    doInit : function(component, event, helper) {
	console.log("doInit fire");
	var action = component.get("c.getPropertyListings");
	action.setParams({
	    recordId: component.get("v.recordId"),
	    sortField: component.get("v.sortField"),
	    sortOrder: component.get("v.sortOrder")
	});
	action.setCallback(this, function(response){
	    var properties = response.getReturnValue();
	    console.log(properties);
	    component.set("v.brokerListings", properties);
	});
	$A.enqueueAction(action);
    }
})

Step 10 — Final PropertyListing Component

<aura:component controller="PropertyListings" implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <aura:attribute name="recordId" type="Id"/>
    <aura:attribute name="greeting" type="String" default="World" />
    <aura:attribute name="brokerListings" type="Object[]" />
    <aura:attribute name="sortField" type="String" />
    <aura:attribute name="sortOrder" type="String" />

    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <lightning:card iconName="custom:custom85" title="Broker's Listings">
	<div class="slds-p-left--medium slds-p-right--medium">
	    <ul class="slds-list--vertical slds-has-dividers--top-space">
		<aura:iteration items="{!v.brokerListings}" var="item" indexVar="i">
		    <li class="slds-list__item">                   
			<c:CompactProperty property="{!item}" />
		    </li>
		</aura:iteration>
	    </ul>
	</div>
    </lightning:card>    
</aura:component>