PropertySummary.cmp

<aura:component
    implements="force:hasRecordId,flexipage:availableForAllPageTypes"
    access="global"
>
    <aura:attribute name="recordId" type="Id" />
    <aura:attribute name="property" type="Property__c" />

    <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>