The Lightning Realty App

The Lightning Realty App is a more robust example of messaging between the Lightning Container Component and Salesforce.

The Lightning realty app’s messaging framework relies on code in a Lightning component, the component’s handler, and the static resource referenced by lightning:container. The Lightning container component points to the message handling function in the Lightning component’s JavaScript controller. The message handling function takes in a message sent by the source JavaScript, which uses a method provided by the lightning-container NPM module.

See Install the Example Lightning Realty Appfor instructions to install this example in your development org.

Let’s look at the Lightning component first. Although the code that defines the Realty component is simple, it allows the JavaScript of the realty app to communicate with Salesforce and load sample data.

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

    <aura:attribute access="global" name="mainTitle" type="String" required="true" default="My Properties"/>
    
    <aura:attribute access="private" name="messageReceived" type="String" default=""/>
    <aura:attribute access="private" name="error" type="String" default=""/>
    
    <div>
        <aura:if isTrue="{! !empty(v.messageReceived)}">
            <lightning:textarea name="messageReceivedTextArea" value="{!v.messageReceived}" label=" "/>
        </aura:if>
        
        <aura:if isTrue="{! !empty(v.error)}">
            <lightning:textarea name="errorTextArea" value="{!v.error}" label="Error: "/>
        </aura:if>
    
        <lightning:container aura:id="ReactApp"
                             src="{!$Resource.Realty + '/index.html?mainTitle=' + v.mainTitle}"
                             onmessage="{!c.handleMessage}"
                             onerror="{!c.handleError}"/>
    </div>
    
</aura:component>

This code is similar to the example code in Sending Messages from the Lightning Container Component and Handling Errors in Your Container.

There’s also code in the Lightning component’s controller and in the source JavaScript that allows the iframed app to communicate with Salesforce. In PropertyHome.js, part of the source, the realty app calls LCC.sendMessage. This segment of code filters the list of properties, then creates a message to send back to the container that includes the selected property’s address, price, city, state, zip code, and description.

saveHandler(property) {
    let filteredProperty = propertyService.filterProperty(property);
    propertyService.createItem(filteredProperty).then(() => {
        propertyService.findAll(this.state.sort).then(properties => {
            let filteredProperties = propertyService.filterFoundProperties(properties);
            this.setState({addingProperty: false, properties:filteredProperties});
        });
        let message = {};
        message.address = property.address;
        message.price = property.price;
        message.city = property.city;
        message.state = property.state;
        message.zip = property.zip;
        message.description = property.description;
        LCC.sendMessage({name: "PropertyCreated", value: message});
    });
},

Then, the JavaScript calls LCC.sendMessage with a name-value pair. This code uses the sendMessage method, which is part of the messaging API provided by the lightning-container NPM module. For more information, see Sending Messages to the Lightning Container Component.

The last bit of action happens in the component’s controller, in the handleMessage() function.

handleMessage: function(component, message, helper) {
        var payload = message.getParams().payload;
        var name = payload.name;
        if (name === "PropertyCreated") {
            var value = payload.value;
            var messageToUser;
            if (value.price > 1000000) {
                messageToUser = "Big Real Estate Opportunity in " + value.city + ", " + value.state + " : $" + value.price;
            }
            else {
                messageToUser = "Small Real Estate Opportunity in " + value.city + ", " + value.state + " : $" + value.price;
            }
            var log = component.get("v.log");
            log.push(messageToUser);
            component.set("v.log", log);
        }
    },

This function takes a message as an argument, and checks that the name is "PropertyCreated". This is the same name set by LCC.sendMessage in the app’s JavaScript.

This function takes the message payload—in this case, a JSON array describing a property—and checks the value of the property. If the value is over $1 million, it sends a message to the user telling him or her that there’s a big real estate opportunity. Otherwise, it returns a message telling the user that there’s a smaller real estate opportunity.