Lightning Now Workshop

Exercise 6Data Binding with force:recordPreview (Developer Orgs Only)

Exercise Goals

Leverage Lightning Data Service to read and update records without an Apex Controller
Understand cross component communication

Step 1 - Leverage force:recordPreview to Bind the Data

In the Developer Console, switch to the SimilarProperties component markup.

Add a new line following the last <aura:attribute> on line 4 and paste:

 <aura:attribute name="property" type="Property__c" />
 <aura:attribute name="remoteRecordId" type="Id" />
 <aura:attribute name="showDialog" type="String" default="false" />

Make another new line below the <aura:handler> tag (currently line 8, if your line numbers match) and add:

 <force:recordPreview aura:id="propertyService" 
                      recordId="{!v.recordId}" 
                      targetRecord="{!v.property}" 
                      recordUpdated="{!c.doSearch}" 
                      layoutType="FULL" /> 

Save the file.
Click on the Helper tile on the right-hand side of the Developer Console.
Select all and delete the default contents of the Helper.

Paste the following into the helper:

 ({
     getProps : function(component) {
         var recId = component.get("v.recordId");
         var compValue = component.get("v.searchCriteria");
         var action = component.get("c.getSimilarProperties");
         action.setParams({
             recordId: recId,
             searchCriteria: compValue
         });
         action.setCallback(this, function(response){
             var res = response.getReturnValue();
             component.set("v.similarProperties", res);
         });
         $A.enqueueAction(action);
     }
 })

Switch to the SimilarProperties controller tab.

Replace the contents with:

 ({
     doInit : function(component, event, helper) {
         helper.getProps(component);
     },
     doSearch : function (component, event, helper) {
         helper.getProps(component);
     }
 })

Save the file(s).
Reload the Property Record Detail page.
Change the Price of the Record to be +/- more than 100000.
Click Save and watch the Similar Properties component update.

Step 2 - Creating a Record Detail Component

In the Dev Console, create a new Lightning Component (File > New > Lightning Component).
Give the component a name of SimilarProperty, and leave all of the checkboxes unchecked.

Replace the contents of the SimilarProperty.cmp file with:

 <aura:component implements="force:hasRecordId" access="global">
     <aura:attribute name="propertyId" type="Id" />
     <aura:attribute name="selectedProperty" type="Property__c" />
     <aura:attribute name="showDialog" type="String" />
     <aura:attribute name="remoteRecordId" type="Id" />
	
     <force:recordPreview aura:id="propertyRecord" 
                          recordId="{!v.propertyId}" 
                          targetRecord="{!v.selectedProperty}" 
                          layoutType="FULL" />
	
     <div class="slds-media">
         <div class="slds-media__figure">
             <img src="{!v.selectedProperty.Thumbnail__c}" class="slds-avatar--large slds-avatar--circle" alt="{!v.selectedProperty.Title_c}" />
         </div>
         <div class="slds-media__body">
             <div class="slds-grid">
                 <a data-record="{!v.selectedProperty.Id}" onclick="{!c.navToRecord}">
                     <h3 class="slds-text-heading--small slds-m-bottom--xx-small">{!v.selectedProperty.Name}</h3>
                 </a>
                 <lightning:buttonIcon iconName="utility:edit" class="slds-col--bump-left" variant="bare" alternativeText="Edit Record" onclick="{!c.editMini}" value="{!v.selectedProperty.Id}" />
             </div>
             <div 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.selectedProperty.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.selectedProperty.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.selectedProperty.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.selectedProperty.Status__c}</li>
                 </ul>
             </div>
         </div>
     </div>
 </aura:component>

Click on the Controller tile to create SimilarPropertyController.js.

Replace the contents with:

 ({
     editMini : function(component, event, helper) {
         var recId = component.get("v.propertyId");
         component.set("v.remoteRecordId", recId);
         component.set("v.showDialog", "true");
     },
     navToRecord : function (component, event, helper) {
         var selectedItem = event.currentTarget;
         var recId = selectedItem.dataset.record;
         var navEvt = $A.get("e.force:navigateToSObject");
         navEvt.setParams({
             "recordId": recId
         });
         navEvt.fire();
   	}
 })

Save the file(s).
Switch to the SimilarProperties.cmp tab in the Dev Console.

Replace the contents of <li class="slds-list__item"> with:

 <c:SimilarProperty propertyId="{!item.Id}" selectedProperty="{!item}" remoteRecordId="{!v.remoteRecordId}" showDialog="{!v.showDialog}" />

Save the file.
Refresh the Property Record Detail page. Notice that “nothing” has changed.

Step 3 - Add a Custom Edit View

In the Dev Console, create a new Lightning Component named SimilarPropertyEdit. Leave all of the checkboxes unchecked.

Replace the contents of the file with:

 <aura:component >
     <aura:attribute name="showDialog" type="String" default="false" />
     <aura:attribute name="remoteRecordId" type="Id" />
     <aura:attribute name="selectedProperty" type="Property__c" />
     <aura:handler name="change" value="{!v.showDialog}" action="{!c.toggleDialog}" />
     <aura:handler name="change" value="{!v.remoteRecordId}" action="{!c.getRecord}" />
	
     <force:recordPreview aura:id="editRecord"
                          targetRecord="{!v.selectedProperty}"
                          fields="Id,Name,Beds__c,Baths__c,Price__c,Status__c"
                          mode="EDIT" />
	
     <div aura:id="editDialog" role="dialog" tabindex="-1" aria-labelledby="header43" class="slds-modal">
         <div class="slds-modal__container">
             <div class="slds-modal__header">
                 <button class="slds-button slds-modal__close " title="Close" onclick="{!c.toggleDialog}">
                     <lightning:icon iconName="utility:close" variant="bare" ></lightning:icon>
                     <span class="slds-assistive-text">Close</span>
                 </button>
                 <h2 id="header43" class="slds-text-heading--medium">Edit Record</h2>
             </div>
             <div class="slds-modal__content slds-p-around--medium slds-grid slds-wrap slds-grid--align-spread">
                 <lightning:input aura:id="propName" name="propName" label="Property Name" required="true" value="{!v.selectedProperty.Name}" class="slds-size--1-of-1 slds-p-horizontal--x-small" />
                 <lightning:input aura:id="propBeds" name="propBeds" label="Beds" value="{!v.selectedProperty.Beds__c}" class="slds-size--1-of-2 slds-p-horizontal--x-small" />
                 <lightning:input aura:id="propBaths" name="propBaths" label="Baths" value="{!v.selectedProperty.Baths__c}" class="slds-size--1-of-2 slds-p-horizontal--x-small" />
                 <lightning:input aura:id="propPrice" name="propPrice" label="Price" value="{!v.selectedProperty.Price__c}" class="slds-size--1-of-2 slds-p-horizontal--x-small" />
                 <lightning:input aura:id="propStatus" name="propStatus" label="Status" value="{!v.selectedProperty.Status__c}" class="slds-size--1-of-2 slds-p-horizontal--x-small" />
             </div>
             <div class="slds-modal__footer">
                 <button class="slds-button slds-button--neutral" onclick="{!c.toggleDialog}">Cancel</button>
                 <button class="slds-button slds-button--brand" onclick="{!c.saveRecord}">Save</button>
             </div>
         </div>
     </div>
     <div aura:id="overlay" class="slds-backdrop"></div>
 </aura:component>

Save the file.
Click the Controller tile to create SimilarPropertyEdit.js.

Replace the contents with the following:

 ({
     getRecord : function(component) {
         var tempRec = component.find("editRecord");
         tempRec.set("v.recordId", component.get("v.remoteRecordId"));
         tempRec.reloadRecord();
     },
     toggleDialog : function(component, event, helper) {
         helper.showHideModal(component);
     },
     saveRecord : function(component,event,helper) {
         var tempRec = component.find("editRecord");
         tempRec.saveRecord($A.getCallback(function(result){
             console.log(result.state);
             var event = $A.get("e.c:recordUpdated");
             event.fire();
         }));       
         helper.showHideModal(component);
     }
 })

Click the Helper tile to create SimilarPropertyEditHelper.js.

Replace the contents with:

 ({
     showHideModal : function(component) {
         var modal = component.find("editDialog");
         $A.util.toggleClass(modal, 'slds-fade-in-open');
         var overlay = component.find("overlay");
         $A.util.toggleClass(overlay, 'slds-backdrop--open');
         component.set("v.showDialog", "false");
     }
 })

In the Dev Console, create a Lightning Event (File > New > Lightning Event) with the name recordUpdated.
Switch back to the SimilarProperties.cmp tab.
Replace the line <aura:handler event="force:refreshView" action="{!c.doInit}" /> with the following:
```
<aura:handler event="c:recordUpdated" action="{!c.doSearch}"/>
```
Add a new line just before the closing </lightning:card> (probably line 25) and paste the following:
```
<c:SimilarPropertyEdit showDialog="{!v.showDialog}" remoteRecordId="{!v.remoteRecordId}" />
```
Save the file(s).
Switch back to the Property Record Detail page.
Choose Edit page from the Setup icon.
Add a second copy of the Similar Properties component in the righthand column.
Set its Search Criteria to Beds (or price if the other copy of the component is set to Beds).
Save the page layout and click the back link to go back to the page.
Click the Edit icon for a property in either component and set the beds or price such that it will either appear or disappear from the other component instance.

Not working as expected? The final implementation of the components for this exercise are available here:

SimilarPropertyEdit Component

SimilarPropertyEdit.cmp, SimilarPropertyEditController.js, SimilarPropertyEditHelper.js

SimilarProperty Component

SimilarProperty.cmp, SimilarPropertyController.js

SimilarProperties Component

SimilarProperties.cmp, SimilarPropertiesController.js, SimilarPropertiesHelper.js

Feel free to check it out or cut and paste it in your own component.

Previous Next

exercises

Exercises

Next Steps