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
	}
});