Understand widgets

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
• Create and customize
• Redefine app interface
• Configuring fields in widgets
• Incorporate third-party apps
• Points to remember
• Limitations

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 help 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.

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.

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 too 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 JavaScript, 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 fields in widget

You can define fields within a widget to accommodate dynamic values and map them to your application's fields in the Widget Configuration section. These widget fields 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 fields and ensures the seamless integration of the widget with your application interface, thereby enhancing personalization.

The application components which can be used for configuring the key "type" are application, form, report, and field. The possible data values for configuring the key "type" are string, integer, float, or boolean. 

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"},
   {"name":"appName","type":"Application"},
   {"name":"formName","type":"Form","help":"Provide Employee form details","mandatory":true/false} 
  ]
}

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. Your page contains course details, registration forms, 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 third-party services 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.
• Name and type of the widget field are mandatory for every configuration provided inside manifest.json file when configuring a widget field.
• The values for the name key should be unique and should not be duplicated.

• 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

• The widget ZIP folder must be packed only using the zet pack command to be considered a valid ZIP file. Uploading the widget file using any other command will result in failure.

  $ zet pack

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.
• Customer can configure only a single widget field from one type of widget component in the json file either application, form, or report.

Related Topics

• Install CLI
• Create your first widget
• Add widget to a page
• JS API documentation
• Sample widget