Understand widgets
This help page is for users in Creator 6. If you are in the older version (Creator 5), click here. Know your Creator version.Widgets are used to extend the capabilities of your Zoho Creator application so that you could perform tasks that could not be accomplished using the in-built features. It equips you with additional features to enhance the front-end capabilities of your app.
Widget capabilities
Widgets enable you to:
- Create and customize features that are specific to your app
- Redefine the way your application interacts with your customers
- Take complete control of the front-end design
- Incorporate third party apps that cater to your Creator app
Create and customize features
There are many features in Zoho Creator that helps you bring your application together. However, there can arise instances where you are unable to find the exact solution to a requirement. Widgets can help you resolve such minor setbacks. You can create a feature, configure it as a widget, and add it to your page to attain the kind of usability you are looking for.
You can create and add your widget in Creator in two ways.
Uploading your widget file
You can customize your widget's appearance and feel and then upload the widget file. To do this, you can inject JavaScript code directly into your widget file and incorporate the required interactive and customized functionalities. Creator enables you to upload the widget file from your local device and also supports drag and drop functionality in the page builder.
Any direct changes to the widget script and its elements (for example, CSS and JS files) will require re-uploading the modified file for the widget to work as required.
A few points that can be considered before you create your widget file.
- Define how you want your widget to behave in the uploaded file. For example, you might want to trigger specific actions or display certain data.
- Apply CSS styles to make your widget visually appealing and fit the overall design of your application.
- Test your widget and check for errors by uploading various files and ensuring it behaves as expected.
Click here to know how to create a widget by uploading your file.
Importing from Figma
You can also create widgets in Creator by importing your existing Figma design from Figma UI Kit. This kit comes with comprehensive usage instructions and supported components for Creator widgets. The designed screen can be accessed as a widget by copying the design's frame URL and access token and pasting them into Creator's widget builder. This ability to create widgets from Figma files directly helps bridge the gap between design and development and quickly create efficient widgets with minimal effort.
Click here to know how to create a widget by importing your Figma design file.
Use Cases
Case 1: Uploading your widget file
Let's assume you are an automobile dealer and have an application dashboard for your monthly sales related data. This dashboard has details of the number of vehicles sold, a comparison of the previous month's sales, a ranking of the models sold, the sales teams' individual performance scores, and a customer feedback form. You would need to display a form that is of feedback matrix type. You can configure the form as a widget in your page. Using Java Script, CSS, and HTML, you can create this form, upload it to Creator, and introduce it into the required page as a widget. You can use Creator API to add, update, edit, and delete records from this report.
Case 2: Importing your Figma design file into Creator
Let's assume that you've created a Contacts Management application in Creator. This application has a Contact Details form, in which your consumers must enter their required data. You may not be able to convey the precise depth and context of your requirements in the conventional form style. However, you can add tabs, modify the dropdown menu, and construct your form in a wizard-style manner using our UI kit in Figma and import the customized design into Creator as a widget. This way you can quickly and effectively establish the form's purpose and context with an enhanced user experience.
Redefine app interface
Widgets boost your control over the front-end design of your application. You will be able to completely redesign your app to suit your requirements and to mirror the uniqueness of your brand. This gives you a mechanism that changes the way your app interacts with your customers.
Let's assume you have your application's landing page designed using pages. But if you want to explore more options to design your interface, widgets can assist you with it. If you have a long form in your application, presenting it in a single page might be to tedious for the user. You can create a progressive form that groups form fields into sections and displays them one after the other is a linear manner using Java Script, CSS, and HTML. Then, upload it as a widget in Creator, and drag and drop it into your page. Your custom page is made available in your application.
Configuring widgets parameters
You can define parameters within a widget to accommodate dynamic values and map them to your application's fields in the Widget Configuration section. These widget parameters can be specified in the script present in the manifest.json file (this file specifies how to launch your application) during the widget creation. This feature enables you to exert greater control over the customization of widget parameters and ensures the seamless integration of the widget with your application interface, thereby enhancing personalization.
You can easily edit the manifest.json file in which you can specify the title (name) and app component types.
Possible Key Values | Data type of the value | Character limits | Edit Widget params | Delete Widget params |
name | string | 50 | not possible | not possible |
type | as mentioned below | - | not possible | not possible |
defaultValue | string | 40 | possible | possible |
placeholder | string | - | yes | possible |
help | string | 140 | possible | possible |
mandatory | boolean | - | possible | possible |
The components and data values which can be used for configuring the key "type" are application, form, report, field, string, integer, float, and boolean.
Note: - All the 'name' and 'type' keys mentioned above are case sensitive.
- The 'name' & 'type' keys are mandatory for every configuration. These should not be edited or deleted during widget update
- The values for 'name' key should be unique
- Application, Form, Report type should exists only once. Field type should not exist without a Form/Report type
- The total number of configurations should not exceed 20
Upon adding the widget to the page in the edit mode of the application, the Widget Configuration menu will slide in from the right, presenting mappable fields. This enables you to tailor the widget to suit your specific needs.
Let's assume you have created two applications in Creator, an Employee Management application and an HR Management application. It's essential to maintain and update records in both application dashboards whenever an employee checks in or out of your organization. To streamline this process, a unified widget can be created, and its fields can be configured dynamically using the manifest.json file. This one widget can then be used across the two applications, enabling users to customize field values based on the specific requirements of each application. The Widget Configuration pane, which appears upon adding the widget to a page, provides you with the flexibility to assign values relevant to each application, thereby enhancing the functionality and usability of the applications created within Creator. The following is an example manifest.json script which can be used in the above mentioned applications,
- {
- "service": "CREATOR",
- "cspDomains": {
- "connect-src": []
- }
- "config":
- [
- {"name":"welcomeText","type":"string","defaultValue":"Welcome"},
- {"name":"appName","type":"Application"},
- {"name":"formName","type":"Form","help":"Provide Employee form details"}
- {"name":"reportName","type":"Report"},
- {"name":"fieldName1","type":"Field"},
- {"name":"fieldName2","type":"Field"},
- {"name":"intVal","type":"integer","mandatory":true},
- {"name":"boolval","type":"boolean"},
- {"name":"floatval","type":"float"}
- ]
- }
JS API to fetch Config in Widget parameters
ZOHO.CREATOR.init().then(function(){
const widgetParams = ZOHO.CREATOR.UTIL.getWidgetParams();
});
Incorporate third party apps
Third party apps that cater to your Creator app's requirements can be incorporated into your pages as widgets. Let's assume you have an application for the Online Courses that you offer. The app has registration details, contact details, course details, and webinar schedules. You page contains course details, registration form, and upcoming webinars. If you have a registered user logged in, you need to display a timer to count down to the start of the relevant webinar. You can incorporate this timer from a third party service or third party javascript plugins into your Creator application as a widget.
Points to remember
- The widgets with JS APIs will not work on the published pages.
- The widget ZIP folder contains the widget.html file inside the App folder by default. This is the index file i.e., this file will be incorporated as the widget in your page.
- If you've created another folder inside the App folder and moved the widget.html file inside the new folder, then you need to specify the index file name in the following format:
/<folder-name>/<filename>.html
Limitations
- You can create up to 50 widgets in your Zoho account.
- For internal hosting,
- the maximum size of the widget ZIP file must not exceed 10 MB.
- the number of files inside the widget ZIP file must not exceed 250.
- the maximum size of a file inside the widget ZIP file must not exceed 5 MB.
- The widget ZIP file name must not exceed 100 characters and can contain alphanumerics (A-Z, a-z, 0-9), _, \, $, ., -.
- The file names inside the widget ZIP file must not exceed 50 characters and can contain alphanumerics (A-Z, a-z, 0-9), _, ., $, -.
- The folder name inside the widget ZIP file can contain alphanumerics (A-Z, a-z, 0-9), _, $, -.
- File types supported include .txt, .md, .XML, .dre, .jpg, .jpeg, .png, .gif, .css, .js, .HTML, .json, .mp3, .svg, .woff, .ttf, .eot, .otf, .woff2, .webm, .mp4.
Related Topics
Access your files securely from anywhere
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
Understand navigateParentURL() method
This method is applicable to widgets. Widgets are used to extend the capabilities of your Zoho Creator application, helping you perform tasks that couldn't be accomplished using the built-in features, as well as enhance the front-end capabilities of ...Use Widgets to Track Live Location
Requirement Share the live location of a device and display it on a map that can be accessed from anywhere for tracking purposes. Use Case When an ambulance is on the run, it needs to reach the nearest hospital on time. To avoid any traffic, the ...Understand Pages
1. What Does This Page Cover? Learn about pages and how they are used to create user-friendly, customized dashboards for your applications. Via these dashboards, you can display dynamic elements and visually represent the data stored in Creator. 2. ...Use widgets to create an online mobile store
Requirement Display a card layout with each card containing mobile details like an image, company, model, and features. Any third party languages can also be used, provided the required dependencies like packages, CDN URLs etc. are included. Users ...Understand Page Builder
1. What Does this Page Cover? Learn about the page builder and how you can customize your page and its elements according to your business needs. 2. Availability Pages can be created in all plans of Creator. Only the super admin, admins, and ...
New to Zoho LandingPage?
Zoho LandingPage Resources