postMessage API
Zoho Sheet document messaging or postMessage API enables your web application to interact with Zoho Sheet editor frame by securely sending messages and making the editor work your way.
How it works?
To integrate with Zoho Sheet online editor and communicate from your web application, we have come up with XDC (Cross Domain Communicator) API wrapper.
The XDC wrapper is written over the Web Messaging protocol and handles all the communication between the host page and Sheet editor window with minimal configuration. To facilitate ease of integration and accomplish required tasks, partners will be using Zoho Sheet's custom XDC methods instead of Web Message protocol methods directly.
The XDC.setTarget wrapper as shown in the code window defines the origin host page and target editor iFrame (Zoho Sheet) that will be used for sending and receiving messages.
Admin Note:
To enable postMessage APIs, you need to register your domain(s) with us.
Please refer this link to know how to add your postMessage domains using Office Integrator Dashboard.
Posting messages to the Sheet Editor Window
To post messages to the Sheet editor iFrame, you need to send a request from the host page in the format as shown in the "XDC.postMessage" code section:
Request Parameters
Parameter | Data Type | Description |
Mandatory Parameters | ||
message | String | Specifies the method name |
data | Object | Defines the data to be sent from the host page |
oncomplete | Success callback | Returns successful response |
onexception | Exception callback | Returns error cases |
Note: You can check the available postMessage APIs in our Sheet service here.
Load xdc-1.0.min.js and set target:
Copied<script type="text/javascript" src="https://js.zohocdn.com/officeplatform/v1/js/common/xdc-1.0.min.js"></script>
<script type="text/javascript">
// Cross Domain Communicator
XDC.setTarget({
"origin": "https://sheet.zoho.com",
"window": document.getElementById("updateIframe").contentWindow
});
</script>
Posting messages:
CopiedXDC.postMessage({
*"message": [<MethodName: String>],
*"data": {<Any Object>},
*"oncomplete": function(data){
//Handle completion
},
*"onexception": function(data){
//Handle exception
}
});