PropertySummary.cmp

<aura:component implements="force:hasRecordId,flexipage:availableForAllPageTypes" access="global">

    <aura:attribute name="recordId" type="Id" />
    <aura:attribute name="property" type="Property__c" />
    
    <c:rflibLoggerCmp aura:id="logger" name="PropertySummary" appendComponentId="true" />

    <force:recordData aura:id="service"
                      recordId="{!v.recordId}"
                      targetFields="{!v.property}"
				      fields="['Id',
                              'Thumbnail__c',
                              'Address__c',
                              'City__c',
                              'State__c',
                              'Zip__c',
                              'Price__c',
                              'Beds__c',
                              'Baths__c',
                              'Broker__r.Id',
                              'Broker__r.Name',
                              'Broker__r.Title__c',
                              'Broker__r.Mobile_Phone__c',
                              'Broker__r.Email__c',
                              'Broker__r.Picture__c']" />

    <aura:handler event="ltng:selectSObject" action="{!c.recordChangeHandler}"/>

	<lightning:card title="Property Summary" iconName="custom:custom85">

        <aura:set attribute="actions">
            <lightning:buttonIcon iconName="utility:edit" variant="bare" alternativeText="Edit Record" onclick="{!c.editRecord}" />
        </aura:set>

        <aura:if isTrue="{!v.recordId==undefined}">
            <div aura:id="selectSection" class="select slds-text-color_weak">
                Select a property to see details here
            </div>
        </aura:if>

        <aura:if isTrue="{!v.recordId!=undefined}">
            <lightning:layout verticalAlign="center">
                <lightning:layoutItem padding="horizontal-small">
                    <aura:if isTrue="{!v.property.Thumbnail__c}">  <!-- to make sure we don't show a broken image before the record is loaded -->
                        <img src="{!v.property.Thumbnail__c}" class="property-pic" />
                    </aura:if>
                </lightning:layoutItem>
                <lightning:layoutItem >
                        <div>
                        <lightning:formattedAddress street="{!v.property.Address__c}"
                                city="{!v.property.City__c}"
                                province="{!v.property.State__c}"
                                postalCode="{!v.property.Zip__c}"/>
                        <p>Beds: {!v.property.Beds__c}
                        Baths: {!v.property.Baths__c}</p>
                        <p><lightning:formattedNumber value="{!v.property.Price__c}" style="currency" currencyCode="USD" minimumFractionDigits="0" maximumFractionDigits="0" /></p>
                    </div>
                </lightning:layoutItem>
            </lightning:layout>
            <lightning:layout verticalAlign="center">
                <lightning:layoutItem padding="around-small">
                    <aura:if isTrue="{!v.property.Broker__r.Picture__c}"> <!-- to make sure we don't show a broken image before the record is loaded -->
                        <img src="{!v.property.Broker__r.Picture__c}" class="broker-pic" />
                    </aura:if>
                </lightning:layoutItem>
                <lightning:layoutItem >
                    <div class="broker">
                        <p><a onclick="{!c.navigateToBrokerRecord}">{!v.property.Broker__r.Name}</a></p>
                        <p>{!v.property.Broker__r.Title__c}</p>
                        <p>{!v.property.Broker__r.Mobile_Phone__c}</p>
                        <p>{!v.property.Broker__r.Email__c}</p>
                    </div>
                </lightning:layoutItem>
            </lightning:layout>
        </aura:if>

    </lightning:card>
</aura:component>