Handling modal boxes

Opening a modal box with the invoke method

Creates a new iframe instance of the extension in the specified location.

Argument NameData TypeDescription
actionstring"modal.create" - creates or opens a modal box.
modal_locationObjectThe relative path of the HTML file that has to be invoked. Example: {"url":"/app/choosefiles.html"};

A widget ID and a string constant are generated as the output.

Closing a modal box with the invoke method

Closes an iframe instance of the extension that was already opened in the specified location.

Argument NameData TypeDescription
actionstring"modal.close" - closes the opened modal box.
widgetIDObjectThe widgetID generated as the output for "modal.create" should be passed here.

Sample code and response

var modal_location_html={"url":"/app/choosefiles.html"};
  "url": "/app/choosefiles.html",
  "location": "__MODAL__",
  "widgetID": "3f9f2d2b-22df-4266-8681-fa75fd01c7ba"
Modal closed


Creates an instance for a specific widget.

Argument NameData TypeDescription
IDstringWidget ID generated from the invoke method.


Throws data from the current location.

zohoprojects.emit("KeyforMyListener", data);


Listens or receives data from the emit method.

zohoprojects.on("KeyforMyListener", data);

Assume the following sample code block is called from a parent file '/apps/index.html' and '/apps/file.html' is the child file.

var modal_location={"url":"/apps/file.html"};
var modalInstance=zohoprojects.instance(modalInfo.widgetID);
modalInstance.on("modal.opened", function(){ /* This code listens for the status 'modal.opened' from the child HTML - file.html */
var data = {org: "1234"};
modalInstance.emit("submit", data);
});/* This code throws a status 'submit' along with an object to the child HTML - file.html*/
/*This code listens for a status with the key 'submitted' from the child HTML*/
zohoprojects.invoke("modal.close", modalInfo.widgetID);

Assume the following sample code block is called from the child file '/apps/file.html' and '/apps/index.html' is the parent file.

var filedetails = {"filename": "abc"};
zohoprojects.on("submit", function (data) {});
/*This code listens for an event with the key "submit" from the parent file index.html  */
zohoprojects.emit("submitted", filedetails); 
/* This code throws a status 'submitted' along with an object to the parent file index.html */

Share this post : FacebookTwitter

Still can't find what you're looking for?

Write to us: