Pop-up Methods

Pop-up methods allow you to display / pop-up the desired information on the Zoho Desk UI. You can find the list of pop-up methods below:

Alerts/Confirmations
Modal Boxes

Alerts/Confirmations

This method helps you to trigger a custom popup window along with the desired information. You can trigger such a window using the following code:

Attribute	Description
title	Represents the title of the pop-up window
content	Describes the text / content inside the pop-up window
type	Determines the type of pop-up window, whether it is alert or confirmation.
contentType	Represents type of the content
color	Represents the color of the pop-up window, whether it is red or blue. The default value is red

Note: Only if you choose 'confirmation' as the value for parameter type, the ZOHODESK.showpopup will return a value (true/false).

Sample Request

CopiedZOHODESK.showpopup({
  title : "Custom Popup",
  content:"This is a Popup —check it out!",
  type : "confirmation",
  contentType : "html",
  color : "red",
  okText : "proceed",
  cancelText : "stop"
}).then(res=>{
  console.log("success");
},(err)=>{
  console.log('err');
});

Sample Response

Copied{
  result : true // result will be return false when cancel/reject the confirmation
}

Modal Boxes

Besides the main widgets, you can display information or fetch input from the user through modal boxes. Modal boxes are UI elements in which users must perform a particular action as part of the overall process. As a result, users will be able to continue using the app on the main window only after performing the said action on the modal box.

To configure a modal box in your extension, write the necessary code in the modal.html file in the project folder, and reference this file where required in your extension.

Sample Request

Copied//Example for configuring modal box
App.instance.modal({
    url: '/app/modal.html',
    title: "Modal box"
}).then(function(modalInfo) {
    var modalInstance = App.instance.getWidgetInstance(modalInfo.widgetID);
    modalInstance.on('modal.opened', function(data) {
    console.log('modal opened ++++++++++++++++++')
 });
}).catch(function(err) {
    console.log(err, "Modal error");
})

You can make a modal box to appear in a smaller size when it is invoked initially then expand to display more information using the resize command.

To include this resizing option in the modal box, use the following command in the modal.html file:

Sample Request

Copied//Example for resizing modal box
ZOHODESK.invoke("RESIZE");
or
ZOHODESK.invoke("RESIZE", {height : "80%", width : "80%"});