Modal Boxes
Besides the main widgets, you can also display information or fetch user input 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.
Below is a sample code for a widget that invokes a 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 configure a modal box to appear in a smaller size when invoked first and then expand to display more information. You can make this possible through the resize command.
To include this resizing option in the modal box, use the following command in the modal.html file:
- ZOHODESK.invoke('RESIZE');
Zoho CRM Training Programs
Learn how to use the best tools for sales force automation and better customer engagement from Zoho's implementation specialists.
Zoho DataPrep Personalized Demo
If you'd like a personalized walk-through of our data preparation tool, please request a demo and we'll be happy to show you how to get the best out of Zoho DataPrep.
- Zoho Workerly Home
- Forums
- Connect With Us:
- Zoho Recruit Home
- Forums
- Connect With Us:
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Zoho Marketing Plus?
Everything you need to run your marketing
You are currently viewing the help pages of Qntrl’s earlier version. Click here to view our latest version—Qntrl 3.0's help articles.
New to Zoho Survey?
Zoho Sheet Resources
Zoho Forms Resources
New to Zoho Sign?
Zoho Sign Resources
Sign, Paperless!
New to Zoho TeamInbox?
Zoho TeamInbox Resources
New to Zoho ZeptoMail?
Zoho DataPrep Resources
Design. Discuss. Deliver.
New to Zoho Workerly?
New to Zoho Recruit?
New to Zoho CRM?
New to Zoho Projects?
New to Zoho Sprints?
New to Zoho Assist?
New to Bigin?
Related Articles
Invoke APIs
Below are some extra APIs that you can use in your extension. ROUTE_TO INSERT MODAL_CLOSE RESIZE ROUTE_TO This command navigates between the multiple subtabs on the ticket detail page. Listed below are the different routes supported: ...Setting up your CRM Application
The first step in building your vertical CRM is to configure certain basic settings and choose the application modules you'd like to include. To create and setup a new application: Log in to your Zoho Developer account and click CRM for Verticals. In ...Setting up Fields & Links Permissions
Set Access Permissions for Fields With the field-level security, you can allow your customers to control the access rights of CRM fields for various profiles. This will ensure smooth security at the field-level, allowing users to access the fields ...Customization - Working with Custom Modules
This guide will help you with: Add Custom Modules Edit Custom Modules Link Custom Modules With Other Modules Manage Modules Delete Custom Modules Zoho Developer offers more than 10 standard modules for Sales, Marketing, Customer Support and ...Portals
This guide will help you with the following: Create a Portal Configure the Portal Settings Preview the Portal Send Portal Invite to Users A Portal enables you to share selective data in the Vertical Solution with your customers. For example, consider ...
New to Zoho LandingPage?
Zoho LandingPage Resources