Lightning Component Framework Super Badge
Lightning Component Framework Specialist super badge step 2
Build the query-by-example form
Create a form displaying a drop-down that lists each boat type, along with Search and New buttons, using BoatSearchForm.cmp, BoatSearchResults.cmp, and
BoatSearch.cmp, as described in the business requirements.
Add these components to a Lightning page named Friends with Boats, and activate the page as a new tab in Lightning Experience and the Salesforce App.
Lastly, create a Lightning application named FriendswithBoats.app that has a layout that is similar to the Lightning page.
BoatSearchForm.cmp
<aura:component description="BoatSearchForm" controller="BoatSearchFormController" implements="flexipage:availableForAllPageTypes">
<aura:registerEvent name="launchNewBoatForm" type="c:launchNewBoatForm"/>
<!-- Handle component init in a client-side controller -->
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:handler name="launchNewBoatForm" event="c:launchNewBoatForm" action="{!c.handleNewBoatForm}"/>
<!-- dynamically load the BoatTypes -->
<aura:attribute name="BoatTypes" type="BoatType__c[]" />
<aura:attribute name="selectedType" type="String" default="foo"/>
<aura:attribute name="standAlone" type="Boolean" default="true"/>
<article class="slds-card slds-m-bottom_medium">
<div class="slds-media__body">
<div>
<lightning:layout horizontalAlign="center" verticalAlign="center" >
<lightning:layoutItem padding="horizontal-medium">
<!-- Create a dropdown menu with options -->
<lightning:select aura:id="boatTypes" label="" name="selectType"
onchange="{!c.handleChange}">
<option value="">All Types</option>
<aura:iteration items="{!v.BoatTypes}" var="boatType">
<option value="{!boatType.Id}">{!boatType.Name}</option>
</aura:iteration>
</lightning:select>
</lightning:layoutItem>
<lightning:layoutItem>
<div class="slds-button-group" role="group">
<lightning:button class="slds-button" variant="brand" label="Search" onclick="{!c.search}"/>
<br></br>
<aura:if isTrue="{!v.standAlone}">
<lightning:button class="slds-button" variant="neutral" label="New" onclick="{!c.newBoat}"/>
</aura:if>
</div>
</lightning:layoutItem>
</lightning:layout>
</div>
</div>
</article>
</aura:component>
BoatSearchController.js
({
doInit : function(component, event, helper){
helper.loadBoatTypes(component);
},
handleChange : function(component, event, helper){
console.log(component.find("boatTypes").get("v.value"));
component.set("v.selectedType", component.find("boatTypes").get("v.value"));
},
search : function(component, event, helper){
var selectedType = component.get("v.selectedType");
console.log("Search button pressed " + selectedType)
},
newBoat : function(component, event, helper){
var boatTypeId = component.get("v.selectedType");
console.log("New button pressed " + boatTypeId);
var requestNewBoat = component.getEvent("launchNewBoatForm");
requestNewBoat.setParams({"boatTypeId": boatTypeId});
requestNewBoat.fire();
},
handleNewBoatForm: function(component, event, helper){
console.log("handleNewBoatForm handler called.")
var boatTypeId = component.get("v.selectedType");
console.log(boatTypeId);
var createNewBoat = $A.get("e.force:createRecord");
createNewBoat.setParams({
"entityApiName": "Boat__c",
})
if(! boatTypeId==""){
createNewBoat.setParams({
"defaultFieldValues": {'BoatType__c': boatTypeId}
})
}
createNewBoat.fire();
},
//more handlers here
})
BoatSearchHelper.js
({
loadBoatTypes: function(component){
//create the action
console.log("Helper started");
var action = component.get("c.getBoatTypes");
//add the callback behavior for when the response is received
action.setCallback(this,function(response){
var state = response.getState();
if (state === "SUCCESS"){
component.set("v.BoatTypes", response.getReturnValue());
console.log(response.getReturnValue());
}
else {
console.log("Failed with state: " + state);
}
});
//send action off to be executed
$A.enqueueAction(action);
},
})
Apex Controller:
public with sharing class BoatSearchFormController
{
@AuraEnabled
public static List<BoatType__c> getBoatTypes()
{
return [SELECT Id, Name from BoatType__c ORDER BY Name];
}
}
FriendswithBoats.app
<aura:application extends="force:slds">
<lightning:layout >
<lightning:card title="Find a Boat" class="slds-m-top_10px" >
<c:BoatSearchForm />
</lightning:card>
</lightning:layout>
</aura:application>
Event:
launchNewBoatForm.eve
<aura:event type="APPLICATION" description="Event template" >
<aura:attribute name="boat" type="Boat__c"/>
</aura:event>
Event:
launchNewBoatForm.eve
<aura:event type="APPLICATION" description="Event template" >
<aura:attribute name="boat" type="Boat__c"/>
</aura:event>
After that to create Lightning App Builder --- Create APP
Create a Lightning page named Friends with Boats that uses the Main Column and Right Sidebar Layout. Put the BoatSearch component in the main column. Activate the page as a new tab in Lightning Experience and the Salesforce App.
Implement the BoatTile and BoatSearchResults components
Create a new BoatTile component and update your BoatSearchResults container to loop through all the results returned from an Apex controller BoatSearchResults to display an unfiltered list of every boat that HowWeRoll leases.
Define the method getBoats() in BoatSearchResults, to return search results as described in the business requirements. BoatSearchResults.cmp displays search results with a helper method, onSearch(), and displays each result as a BoatTile component.
BoatSearchResults.cmp
<aura:component controller="BoatSearchResults">
<aura:handler name="init" action="{!c.doSearch}" value="{!this}"/>
<aura:attribute name="boats" type="Boat__c[]" />
<lightning:layout horizontalAlign="center" verticalAlign="center" multipleRows='true'>
<lightning:layoutItem flexibility="grow" class="slds-m-right_small" >
<aura:iteration items="{!v.boats}" var="boatVar">
<c:BoatTile boat="{!boatVar}"/>
</aura:iteration>
<aura:if isTrue="{!v.boats.length > 0}">
<aura:iteration items="{!v.boats}" var="bot">
<lightning:layoutItem flexibility="grow" class="slds-m-around_small">
<c:BoatTile boat="{!bot}" />
</lightning:layoutItem>
</aura:iteration>
<aura:set attribute="else">
<lightning:layoutItem class="slds-align_absolute-center" flexibility="auto" padding="around-small">
<ui:outputText value="No boats found" />
</lightning:layoutItem>
</aura:set>
</aura:if>
</lightning:layoutItem>
</lightning:layout>
</aura:component>
BoatSearchResultsController.js
({
doSearch : function(component, event, helper) {
alert(component.get("v.boatTypeId")); //<---here I am getting undefined
helper.onSearch(component); //calling helper method
},
search: function(component, event, helper){
var params = event.getParam('arguments');
alert(params.boatTypeId); //<---getting proper value
alert(component.set("v.boatTypeId", params.boatTypeId)); //<---here I am getting undefined
var a = component.get('c.doSearch');
$A.enqueueAction(a);
}
})
BoatSearchResultsHelper.js
({
onSearch : function(component, event) {
var boatTypId = component.get("v.boatTypeId");
alert(boatTypId); //<---here I am getting undefined
console.log("boatTypId--> " + boatTypId);
var action = component.get("c.getBoats");
action.setParams({boatTypeId:boatTypId});
//add the callback behavior for when the response is received
action.setCallback(this, function(response){
var state = response.getState();
console.log("state " + state);
if(state === "SUCCESS"){
var res = response.getReturnValue();
component.set("v.boats", res);
//console.log("v.boats ->"+ JSON.stringify(res));
}
else{
console.log("Failed with state: " + state);
}
});
//send action off to be executed
$A.enqueueAction(action);
},
})
BoatTile.cmp
<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
<aura:attribute name="boat" type="Boat__c" />
<lightning:button class="tile">
<!-- Image -->
<div style="{!'background-image: url(\'' + v.boat.Picture__c + '\')'}" class="innertile">
<div class="lower-third">
<h1 class="slds-truncate">{!v.boat.Contact__r.Name}</h1>
</div>
</div>
</lightning:button>
</aura:component>
BoatTileHelper.js
.THIS.tile {
position:relative;
display: inline-block;
width: 100%;
height: 220px;
padding: 1px !important;
}
.THIS .innertile {
position: relative;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
.THIS .lower-third {
position: absolute;
bottom: 0;
left: 0;
right: 0;
color: #FFFFFF;
background-color: rgba(0, 0, 0, .4);
padding: 6px 8px;
}
.THIS.selected {
border: 3px solid rgb(0, 112, 210);
}
BoatSearchResults.apex
public with sharing class BoatSearchResults {
@AuraEnabled
public static List <Boat__c> getBoats(String boatTypeId) {
if(boatTypeId != '') {
return [SELECT id, BoatType__c, picture__c, name,contact__r.Name FROM Boat__c WHERE BoatType__c =:boatTypeId];
} else {
return [SELECT id, BoatType__c, picture__c, name,contact__r.Name FROM Boat__c];
}
}
}
Implement the search filter
Create a FormSubmit event to allow your BoatSearchFormto pass the selected boat type to the BoatSearchResultscomponent, which queries Apex and stores the results.
Handle FormSubmit with a controller action, onFormSubmit, and pass formData.boatTypeId from the controller to search, a public method on the BoatSearchResults component. The search function uses a helper function, onSearch(), and controller function, doSearch(), to get the list of boats.
1. BoatSearchResults.cmp
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes"
access="global" controller="BoatSearchResults">
<aura:handler name="init" action="{!c.doSearch}" value="{!this}"/>
<aura:attribute name="boatTypeId" type="String" />
<aura:attribute name="boats" type="Boat__c[]" />
<!--<aura:method name="search" description="Sample method with parameter">
<aura:attribute name="boatTypeId" type="String" />
</aura:method>-->
<!-- set up the aura:method for search -->
<aura:method name="search" description="accepts boatTypeId
and executes search that refreshes the boats attribute">
<aura:attribute name="boatTypeId" type="Id"/>
</aura:method>
<!-- Display errors, if any -->
<!--
<aura:if isTrue="{!not(empty(v.errorString))}">
<div class="recordError">
<ui:message title="Error" severity="error" closable="true">
{!v.errorString}
</ui:message>
</div>
</aura:if>-->
<aura:if isTrue="{!not(empty(v.boats))}">
<lightning:layout multipleRows="true" horizontalAlign="center">
<aura:iteration items="{!v.boats}" var="boatVar">
<lightning:layoutItem flexibility="grow" class="slds-m-right_small" >
<c:BoatTile boat="{!boatVar}"/>
</lightning:layoutItem>
</aura:iteration>
</lightning:layout>
<aura:set attribute="else">
<div class="slds-align_absolute-center">No boats found</div>
</aura:set>
</aura:if>
</aura:component>
2. BoatSearchForm.cmp
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" controller="BoatSearchFormController" >
<aura:handler name="formsubmit"
event="c:FormSubmit"
action="{!c.onFormSubmit}"
phase="capture"/>
<aura:attribute name="searchOptions" type='String[]' default='All'/>
<aura:attribute name='searchOptionToIdMap' type='Map' default="{All:''}" />
<aura:attribute name='showNewButton' type='Boolean' default='false'/>
<lightning:layout horizontalAlign="center" >
<lightning:layoutItem class="slds-grid_vertical-align-center" >
<lightning:select aura:id='typeSelect' name='selectItem' label='' onchange=''>
<aura:iteration items='{!v.searchOptions}' var='option'>
<option value='{!option}' text='{!option}'></option>
</aura:iteration>
</lightning:select>
</lightning:layoutItem>
<lightning:layoutItem class="slds-grid_vertical-align-center" >
<lightning:button label="Search" variant="brand" onclick='{!c.onFormSubmit}' />
<aura:if isTrue='{!v.showNewButton}'>
<lightning:button variant='neutral' label='New' onclick='{!c.createBoat}'/>
</aura:if>
</lightning:layoutItem>
</lightning:layout>
</aura:component>
3. BoatSearch.cmp
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" >
<lightning:card title="Find a Boat" class="slds-m-top_10px" >
<c:BoatSearchForm />
</lightning:card>
<lightning:card title="Matching Boats" >
<c:BoatSearchResults />
</lightning:card>
<aura:handler name="formsubmit"
event="c:FormSubmit"
action="{!c.onFormSubmit}"
phase="capture"/>
</aura:component>
4. BoatSearchFormController.js
({ createBoat: function (component,event,helper) {
var createRecordEvent = $A.get('e.force:createRecord');
if (createRecordEvent) {
var typeName = component.find('typeSelect').get('v.value');
var typeMap = component.get('v.searchOptionToIdMap');
var typeId = null;
if (typeName && typeMap && typeMap[typeName]) {
typeId = typeMap[typeName];
}
createRecordEvent.setParams({
'entityApiName': 'Boat__c',
'defaultFieldValues': {
'BoatType__c': typeId
}
});
createRecordEvent.fire();
}
},
onFormSubmit : function(component, event, helper){
var boatTypeId = component.get("v.selectedType");
console.log("Search button pressed " + boatTypeId);
var formSubmit = component.getEvent("FormSubmit");
formSubmit.setParams({"formData":
{"boatTypeId" : boatTypeId}
});
formSubmit.fire();
},
})
5. BoatSearchResults.apxc
public with sharing class BoatSearchResults {
@AuraEnabled
public static List <Boat__c> getBoats(String boatTypeId) {
if(boatTypeId != '') {
return [SELECT id, BoatType__c, picture__c, name,contact__r.Name
FROM Boat__c
WHERE BoatType__c =:boatTypeId];
} else {
return [SELECT id, BoatType__c, picture__c, name,contact__r.Name
FROM Boat__c];
}
}
}
6. BoatSearchResultsHelper.js
({
onSearch : function(component) {
var action = component.get("c.getBoats");
action.setParam({"boatTypeId":""});
action.setCallback(this, function(response){
var status = response.getState();
if(status === "SUCCESS"){
if(! $A.util.isEmpty(response.getReturnValue())){
component.set("v.boatTypeId",response.getReturnValue());
} else {
component.set("v.recordError","No boats found");
}
}
});
$A.enqueueAction(action);
}
})
7. Event FormSubmit.evt
<aura:event type="COMPONENT" description="Boat Event">
<aura:attribute name="formData" type="Object"/>
</aura:event>
8. BoatSearchController.js
({
onFormSubmit : function(component, event, helper){
console.log("event received by BoatSearchController.js");
var formData = event.getParam("formData");
var boatTypeId = formData.boatTypeId;
var BSRcmp = component.find("BSRcmp");
var auraMethodResult = BSRcmp.search(boatTypeId);
console.log("auraMethodResult: " + auraMethodResult);
}
})
Highlight the selected boat
Fire a new BoatSelect event when a BoatTile is clicked, which sets the selectedBoatId on BoatSearchResults and in turn toggles the selected attribute on the right BoatTile, triggering the addition of a CSS class that shows a dark blue border around the selected boat as shown in the requirements.
Do this by defining a click handler on the BoatTile’s lightning:button that invokes controller function onBoatClick, and raises the BoatSelect event, as laid out in the business requirements.
1. BoatDetail.cmp
1.BoatTile.cmp
<<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" >
<aura:attribute name="boat" type="Boat__c" />
<aura:attribute name="selected" type="Boolean" default="false" />
<aura:registerEvent name="BoatSelect" type="c:BoatSelect"/>
<lightning:button name="{!v.boat.Id}" class="{!v.selected? 'tile selected' : 'tile'}"
onclick="{!c.onBoatClick}" >
<div style="{! 'background-image:url(\'' + v.boat.Picture__c + '\'); '}" class="innertile">
<div class="lower-third">
<h1 class="slds-truncate">{!v.boat.Contact__r.Name}</h1>
</div>
</div>
</lightning:button>
</aura:component>
2.BoatTile.css
.THIS.tile {
position:relative;
display: inline-block;
width: 100%;
height: 220px;
padding: 1px !important;
}
.THIS .innertile {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
.THIS .lower-third {
position: absolute;
bottom: 0;
left: 0;
right: 0;
color: #FFFFFF;
background-color: rgba(0, 0, 0, .4);
padding: 6px 8px;
}
.THIS.selected {
border-color: rgb(0, 112, 210);
border-style: solid;
border-width: 5px;
}
3.BoatSearchResults.aspx
public with sharing class BoatSearchResults {
@AuraEnabled
public static List <Boat__c> getBoats(String boatTypeId) {
if(boatTypeId != '') {
return [SELECT id, BoatType__c, picture__c, name,contact__r.Name
FROM Boat__c
WHERE BoatType__c =:boatTypeId];
} else {
return [SELECT id, BoatType__c, picture__c, name,contact__r.Name
FROM Boat__c];
}
}
}
4.BoatSearchResults.cmp
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes"
access="global" controller="BoatSearchResults">
<aura:handler name="init" action="{!c.doSearch}" value="{!this}"/>
<aura:attribute name="boatTypeId" type="String" />
<aura:attribute name="boats" type="Boat__c[]" />
<aura:handler name="BoatSelect" event="c:BoatSelect" action="{!c.onBoatSelect}"/>
<aura:attribute name="selectedBoatId" type="Id"/>
<lightning:layout multipleRows="true" >
<aura:iteration items="{!v.boats}" var="boat">
<lightning:layoutItem padding="around-small">
<c:BoatTile boat="{!boat}"
selected="{!boat.Id == v.selectedBoatId ? 'true' : 'false' }"/>
</lightning:layoutItem>
</aura:iteration>
<aura:if isTrue="{!v.boats.length==0}">
<lightning:layoutItem class="slds-align_absolute-center" flexibility="auto" padding="around-small">
<ui:outputText value="No boats found" />
</lightning:layoutItem>
</aura:if>
</lightning:layout>
</aura:component>
5.BoatTileController.js
({
onBoatClick : function(component, event, helper) {
var cmpEvent = component.getEvent("BoatSelect");
var boatId = event.getSource().get("v.name");
cmpEvent.setParams({
"boatId" : boatId
});
cmpEvent.fire();
}
})
6.BoatSearchResults.js
({
doSearch : function(component, event, helper) {
component.get("v.boatTypeId");
helper.onSearch(component, event, helper);
},
search: function(component, event, helper){
var params = event.getParam('arguments');
console.log("boatTypeId extracted: " + params.boatTypeId);
component.set("v.boatTypeId", params.boatTypeId);
helper.onSearch(component);
return "search complete.";
},
onBoatSelect : function(component, event, helper) {
var boatId = event.getParam("boatId");
console.log(boatId);
component.set("v.selectedBoatId",boatId);
}
})
7.BoatSearchResultsHelper.js
({
onSearch : function(component) {
var action = component.get("c.getBoats");
action.setParam({"boatTypeId":""});
action.setCallback(this, function(response){
var status = response.getState();
if(status === "SUCCESS"){
if(! $A.util.isEmpty(response.getReturnValue())){
component.set("v.boatTypeId",response.getReturnValue());
} else {
component.set("v.recordError","No boats found");
}
}
});
$A.enqueueAction(action);
}
})
8.BoatSelect.evt
<aura:event type="COMPONENT" description="fires when a user clicks a boat on BoatSearchResults.cmp">
<aura:attribute name="BoatId" type="Id"/>
</aura:event>
Display boat details
Create two new components—BoatDetails and BoatDetail—as well as a new event BoatSelected. Raise the new event from BoatTile, and leverage Lightning Data Service to output boat details. Deploy the BoatDetails component in the top right corner of the Lightning page.
1. BoatDetail.cmp
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<aura:attribute name="boat" type="Boat__c"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:attribute name="showButton" type="Boolean" default="false"/>
<lightning:button label="Full Details" onclick="{!c.onFullDetails }" />
<lightning:card iconName="utility:anchor">
<aura:set attribute="title">
{!v.boat.Contact__r.Name}'s boat
</aura:set>
<aura:set attribute="actions">
<aura:if isTrue='{!v.showButton}'>
<lightning:button label="Full Details" onclick="{!c.onFullDetails}"/>
</aura:if>
</aura:set>
<p class="slds-p-horizontal_small">
<lightning:layout >
<lightning:layoutItem flexibility="grow" size="6" mediumDeviceSize="6" largeDeviceSize="6">
<div class="slds-p-horizontal--small">
<div class="boatproperty">
<span class="label">Boat Name:</span>
<span><ui:outputText value="{!v.boat.Name}"/></span>
</div>
<div class="boatproperty">
<span class="label">Type:</span>
<span><ui:outputText value="{!v.boat.BoatType__r.Name}"/></span>
</div>
<div class="boatproperty">
<span class="label">Length:</span>
<span><ui:outputText value="{!v.boat.Length__c}"/> ft</span>
</div>
<div class="boatproperty">
<span class="label">Est. Price:</span>
<span><lightning:formattedNumber value="{!v.boat.Price__c}" currencyCode="USD" style="currency" currencyDisplayAs="symbol"/></span>
</div>
<div class="boatproperty">
<span class="label">Description:</span>
<span><ui:outputRichText class="slds-text-longform" value="{!v.boat.Description__c}"/></span>
</div>
</div>
</lightning:layoutItem>
<lightning:layoutItem flexibility="grow" size="6" mediumDeviceSize="6" largeDeviceSize="6">
<div class="imageview" style="{!'background-image:url(\'' + v.boat.Picture__c + '\')'}"/>
</lightning:layoutItem>
</lightning:layout>
</p>
</lightning:card>
</aura:component>
2. BoatDetailController.js
({
onFullDetails: function(component, event, helper) {
var navEvt = $A.get("e.force:navigateToSObject");
navEvt.setParams({
"recordId": component.get("v.boat.Id")
});
navEvt.fire();
}
})
3. BoatDetails.cmp
<aura:component description="BoatDetails"
implements="flexipage:availableForAllPageTypes">
<aura:attribute name="boat" type="Boat__c"/>
<aura:attribute name="recordError" type="String"/>
<aura:attribute name="id" type="Id" default="" access="public"/>
<aura:handler event="c:BoatSelected" action="{!c.onBoatSelected}"/>
<force:recordData aura:id="service"
recordId="{!v.id}"
mode="VIEW"
fields= "Id,
Name,
Description__c,
Price__c, Length__c,
Contact__r.Name,
Contact__r.Email,
Contact__r.HomePhone,
BoatType__r.Name,
Picture__c"
targetFields="{!v.boat}"
targetError="{!v.recordError}"
recordUpdated="{!c.onRecordUpdated}" />
<aura:if isTrue="{! !empty(v.boat)}">
<article class="slds-card">
<lightning:tabset>
<lightning:tab label="Details" id="details">
<c:BoatDetail boat="{!v.boat}"/>
</lightning:tab>
<lightning:tab label="Reviews" id="boatreviewtab">
Sample review
</lightning:tab>
<lightning:tab label="Add Review" id="addReview">
Sample add review
</lightning:tab>
</lightning:tabset>
</article>
</aura:if>
</aura:component>
4. BoatDetailsController.js
({
init: function(component, event, helper) {
component.set("v.enableFullDetails", $A.get("e.force:navigateToSObject"));
},
onFullDetails: function(component, event, helper) {
var navEvt = $A.get("e.force:navigateToSObject");
navEvt.setParams({
"recordId": component.get("v.boat.Id")
});
navEvt.fire();
},
onBoatSelected : function(component, event, helper) {
var boatSelected = event.getParam("boat");
component.set("v.id",boatSelected.Id);
var service = component.find("service");
service.reloadRecord() ;
},
onRecordUpdated : function(component, event, helper) {
},
onBoatReviewAdded : function(component, event, helper) {
console.log("Event received");
component.set("v.selTabId", "boatreviewtab");
}
})
5. BoatTile.cmp
<aura:component >
<aura:attribute name="boat" type="Boat__c" />
<aura:attribute name="selected" type="boolean" default="false"/>
<aura:registerEvent name="boatselected" type="c:BoatSelected"/>
<aura:attribute name="selectedBoatId" type="Id"/>
<aura:registerEvent name="BoatSelect" type="c:BoatSelect"/>
<lightning:button onclick="{!c.onBoatClick}"
class="{! v.selected ? 'tile selected' : 'tile' }">
<div style="{!'background-image:url(\'' + v.boat.Picture__c + '\')'}"
class="innertile">
<div class="lower-third">
<h1 class="slds-truncate">{! v.boat.Contact__r.Name}</h1>
</div>
</div>
</lightning:button>
</aura:component>
6. BoatTileController.js
({
onBoatClick : function(component, event, helper) {
var BoatSelectEvent = component.getEvent('BoatSelect');
var boat = component.get('v.boat');
BoatSelectEvent.setParams({
"boatId" : boat.Id
});
BoatSelectEvent.fire();
//var BoatSelectedEvt = component.getEvent('boatselected');
var BoatSelectedEvt = $A.get('e.c:BoatSelected');
BoatSelectedEvt.setParams({
"boat" : boat
});
BoatSelectedEvt.fire();
}
})
7. BoatTile.css
.THIS.selected {
border: 3px solid rgb(0, 112, 210);
}
.THIS.tile {
position:relative;
display: inline-block;
width: 100%;
height: 220px;
padding: 1px !important;
}
.THIS .innertile {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
.THIS .lower-third {
position: absolute;
bottom: 0;
left: 0;
right: 0;
color: #FFFFFF;
background-color: rgba(0, 0, 0, .4);
padding: 6px 8px;
}
.THIS.selected {
border-color: rgb(0, 112, 210);
border-style: solid;
border-width: 5px;
}
8. BoatSearch.cmp
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" >
<lightning:card title="Find a Boat" class="slds-m-top_10px" >
<c:BoatSearchForm />
</lightning:card>
<lightning:card title="Matching Boats" >
<c:BoatSearchResults />
</lightning:card>
<aura:handler name="formsubmit"
event="c:FormSubmit"
action="{!c.onFormSubmit}"
phase="capture"/>
</aura:component>
9. BoatSearchController.js
({
onFormSubmit : function(component, event, helper){
console.log("event received by BoatSearchController.js");
var formData = event.getParam("formData");
var boatTypeId = formData.boatTypeId;
var BSRcmp = component.find("BSRcmp");
var auraMethodResult = BSRcmp.search(boatTypeId);
console.log("auraMethodResult: " + auraMethodResult);
}
})
10. BoatSearchResults.apxc
public with sharing class BoatSearchResults {
@AuraEnabled
public static List <Boat__c> getBoats(String boatTypeId) {
if(boatTypeId != '') {
return [SELECT id, BoatType__c, picture__c, name,contact__r.Name
FROM Boat__c
WHERE BoatType__c =:boatTypeId];
} else {
return [SELECT id, BoatType__c, picture__c, name,contact__r.Name
FROM Boat__c];
}
}
}
11. BoatSearchForm.cmp
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" controller="BoatSearchFormController" >
<aura:handler name="formsubmit"
event="c:FormSubmit"
action="{!c.onFormSubmit}"
phase="capture"/>
<aura:attribute name="searchOptions" type='String[]' default='All'/>
<aura:attribute name='searchOptionToIdMap' type='Map' default="{All:''}" />
<aura:attribute name='showNewButton' type='Boolean' default='false'/>
<lightning:layout horizontalAlign="center" >
<lightning:layoutItem class="slds-grid_vertical-align-center" >
<lightning:select aura:id='typeSelect' name='selectItem' label='' onchange=''>
<aura:iteration items='{!v.searchOptions}' var='option'>
<option value='{!option}' text='{!option}'></option>
</aura:iteration>
</lightning:select>
</lightning:layoutItem>
<lightning:layoutItem class="slds-grid_vertical-align-center" >
<lightning:button label="Search" variant="brand" onclick='{!c.onFormSubmit}' />
<aura:if isTrue='{!v.showNewButton}'>
<lightning:button variant='neutral' label='New' onclick='{!c.createBoat}'/>
</aura:if>
</lightning:layoutItem>
</lightning:layout>
</aura:component>
12. BoatSearchFormController.js
({ createBoat: function (component,event,helper) {
var createRecordEvent = $A.get('e.force:createRecord');
if (createRecordEvent) {
var typeName = component.find('typeSelect').get('v.value');
var typeMap = component.get('v.searchOptionToIdMap');
var typeId = null;
if (typeName && typeMap && typeMap[typeName]) {
typeId = typeMap[typeName];
}
createRecordEvent.setParams({
'entityApiName': 'Boat__c',
'defaultFieldValues': {
'BoatType__c': typeId
}
});
createRecordEvent.fire();
}
},
onFormSubmit : function(component, event, helper){
var boatTypeId = component.get("v.selectedType");
console.log("Search button pressed " + boatTypeId);
var formSubmit = component.getEvent("FormSubmit");
formSubmit.setParams({"formData":
{"boatTypeId" : boatTypeId}
});
formSubmit.fire();
},
})
12.BoatSearchResults.cmp
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes"
access="global" controller="BoatSearchResults">
<aura:handler name="init" action="{!c.doSearch}" value="{!this}"/>
<aura:attribute name="boatTypeId" type="String" />
<aura:attribute name="boats" type="Boat__c[]" />
<aura:handler name="BoatSelect" event="c:BoatSelect" action="{!c.onBoatSelect}"/>
<aura:attribute name="selectedBoatId" type="Id"/>
<lightning:layout multipleRows="true" >
<aura:iteration items="{!v.boats}" var="boat">
<lightning:layoutItem padding="around-small">
<c:BoatTile boat="{!boat}"
selected="{!boat.Id == v.selectedBoatId ? 'true' : 'false' }"/>
</lightning:layoutItem>
</aura:iteration>
<aura:if isTrue="{!v.boats.length==0}">
<lightning:layoutItem class="slds-align_absolute-center" flexibility="auto" padding="around-small">
<ui:outputText value="No boats found" />
</lightning:layoutItem>
</aura:if>
</lightning:layout>
</aura:component>
13. BoatSearchResultsController.js
({ search: function(component, event, helper)
{
var params = event.getParam('arguments');
component.set("v.boatTypeId", params.boatTypeId);
component.get("c,doSearch"); },
doSearch : function (component, event, helper)
{ component.get("v.boatTypeId"); helper.onSearch(component); },
onBoatSelect : function(component, event, helper) {
var boatId = event.getParam("boatId");
console.log(boatId);
component.set("v.selectedBoatId",boatId);
}
})
finally add those component in your Lighting page Ex :- Friends with Boats
Add boat reviews
Instantiate an AddBoatReview component inside the Add Review tab and display the form. When a user clicks Submit, save the record using Lightning Data Service and fire a BoatReviewAdded event that the BoatDetails parent component listens for so that it can switch the active tab to Reviews. Don’t worry about displaying the reviews yet.