instance

Handling modal boxes

Opening a modal box with the invoke method

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


zohoprojects.invoke("modal.create",modal_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.


zohoprojects.invoke("modal.close",modalInfo.widgetID);
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"};
zohoprojects.invoke("modal.create","modal_location_html").then(function(modalInfo){
console.log(modalInfo);
/*
{
  "url": "/app/choosefiles.html",
  "location": "__MODAL__",
  "widgetID": "3f9f2d2b-22df-4266-8681-fa75fd01c7ba"
}
*/
zohoprojects.invoke("modal.close",modalInfo.widgetID).then(function(response)
{console.log(response);
/*Output
Modal closed
*/
});
});

instance

Creates an instance for a specific widget.


zohoprojects.instance(widget_ID);
Argument NameData TypeDescription
IDstringWidget ID generated from the invoke method.

emit

Throws data from the current location.


zohoprojects.emit("KeyforMyListener", data);

on

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"};
zohoprojects.invoke("modal.create",modal_location).then(function(modalInfo){
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*/
modalInstance.on("submitted",function(data){ 
/*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: support@zohoprojects.com