Welcome to Portal

?Unknown\pull-down

Welcome to Zoho Cares

Bienvenido a Soporte de Zoho

Search our knowledge base, ask the community or submit a request.

Handling Modal Boxes

Opening a modal box with the invoke method

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

zohobugtracker.invoke("modal.create",modal_location);

Argument Name Data Type Description
action string "modal.create" - creates or opens a modal box.
modal_location Object The 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.

zohobugtracker.invoke("modal.close",modalInfo.widgetID);

Argument Name Data Type Description
action string "modal.close" - closes the opened modal box.
widgetID Object The widgetID generated as the output for "modal.create" should be passed here.

Resizing a modal box with the invoke method

Resizes the iframe instance of the extension to the specified size.

zohobugtracker.invoke("modal.resize", resize_modal);

Argument Name Data Type Description
action string "modal.resize" - increases the default size of a modal box.
resize_modal Object The relative path of the HTML file that has to be invoked. Example:{"width" : 600,"height" : 400};
Min & Max allowed height 380px & 450 px.
Min & Max allowed width 550px & 850 px.

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

Displaying notifications with the invoke method

Displays notifications related to the extension at the specified location. It is currently supported only for Bug tabs.

zohobugtracker.invoke("showNotification", notification_details);

Argument Name Data Type Description
action string "showNotification"
notification_details Object

Example: {notificationData:"5"} 

The value mapped against this key will be displayed as a notification.

 

Closing an attachement picker with the invoke method

Closes an iframe instance of the extension that was opened in the specified location to attach a file.

zohobugtracker.invoke("attachment_picker.close");

instance

Creates an instance for a specific widget.

zohobugtracker.instance(widget_ID);

Argument Name Data Type Description
ID string Widget ID generated from the invoke method.

emit

Throws data from the current location.

zohobugtracker.emit("KeyforMyListener", data);

on

Listens or receives data from the emit method.

zohobugtracker.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"};
zohobugtracker.invoke("modal.create",modal_location).then(function(modalInfo){
var modalInstance=zohobugtracker.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*/
zohobugtracker.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"};
zohobugtracker.on("submit", function (data) {});
/*This code listens for an event with the key "submit" from the parent file index.html  */
zohobugtracker.emit("submitted", filedetails); 
/* This code throws a status 'submitted' along with an object to the parent file index.html */

Alert

Set and display success or failure alerts.

zohobugtracker.invoke("alert", {
                            type: "success",  //or "failure"
                            data: "Permission granted successfully"
                        });


Helpful?00
Updated: 10 months ago
Share :