Sending Messages to and from the App

This example shows a Lightning component that includes lightning:container and has three attributes, messageToSend, messageReceived. and error.

This example uses the same code as the one in Using a Third-Party Framework.

1<aura:component access="global" implements="flexipage:availableForAllPageTypes" >
2    
3    <aura:attribute access="private" name="messageToSend" type="String" default=""/>
4    <aura:attribute access="private" name="messageReceived" type="String" default=""/>
5    <aura:attribute access="private" name="error" type="String" default=""/>
6    
7    <div>
8        <lightning:input name="messageToSend" value="{!v.messageToSend}" 
9                         label="Message to send to React app: "/>
10        <lightning:button label="Send" onclick="{!c.sendMessage}"/>
11        
12        <br/>
13        
14        <lightning:textarea name="messageReceived" value="{!v.messageReceived}" 
15                            label="Message received from React app: "/>
16        
17        <br/>
18    
19        <lightning:container aura:id="ReactApp"
20                             src="{!$Resource.SendReceiveMessages + '/index.html'}"
21                             onmessage="{!c.handleMessage}"/>
22    </div>
23    
24</aura:component>

messageToSend represents a message sent from Salesforce to the Lightning container app, while messageReceived represents a message sent by lightning:container to the Lightning component. lightning:container includes the required src attribute, an aura:id, and the onmessage attribute. The onmessage attribute specifies the message-handling method in your JavaScript controller, and the aura:id allows that method to reference the component.

This example shows the component’s JavaScript controller.

1({    
2    sendMessage : function(component, event, helper) {
3        
4        var msg = {
5            name: "General",
6            value: component.get("v.messageToSend")
7        };
8        component.find("ReactApp").message(msg);
9    },
10    
11    handleMessage: function(component, message, helper) {
12        var payload = message.payload;
13        var name = payload.name;
14        if (name === "General") {
15            var value = payload.value;
16            component.set("v.messageReceived", value);
17        }
18        else if (name === "Foo") {
19            // A different response
20        }
21    },
22})

This code does a couple of different things. The sendMessage action creates a variable, msg, that has a JSON definition including a name and a value. This definition of the message is user-defined—the message’s payload can be a value, a structured JSON response, or something else. The messageToSend attribute of the Lightning component populates the value of the message. The method then uses the component’s aura:id and the message() function to send the message back to the Lightning component.

The handleMessage method takes a component, a message, and a helper as arguments. The method uses conditional logic to parse the message. If this is the message with the name and value we’re expecting, the method sets the Lightning component’s messageReceived attribute to the value of the message. Although this code only defines one message, the conditional allows you to handle different types of message, which are defined in the sendMessage method.

The handler code for sending and receiving messages can be complicated. It helps to understand the flow of a message between the Lightning component, its controller, and the app. The process begins when user enters a message as the messageToSend attribute. When the user clicks Send, the component calls sendMessage. sendMessage defines the message payload and uses the message() method to send it to lightning:container.

When lightning:container sends a message to the Lightning component, it calls the controller’s handleMessage method, which is specified by the onmessage attribute of lightning:container. The handleMessage method takes the message, and sets its value as the messageReceived attribute. Finally, the component displays messageReceived in a lightning:textarea.

This is a simple example of message handling across the container. Because you implement the controller-side code and the functionality of the app, you can use this functionality for any kind of communication between Salesforce and the contents of lightning:container.