Hi folks,

In this month's tip, we're going to talk about how to use widgets to create custom forms and reports in your Creator application.

But, before that, let's cover a few basics.

Widgets help you extend the capabilities of your apps and perform tasks beyond the scope of built-in features. You can create powerful apps with richer user experiences and redefine the way your application interacts with your customers. For example, you can build and embed interactive UI components, such as image sliders and multistep forms. You can make use of HTML, CSS, or JavaScript libraries and reusable UI components to create an interactive interface.

We've already shared a sample widget in our help article to integrate with Creator. The widget can be integrated with Creator forms and reports only by specifying the component link name and values in a JSON structure. 

In this tip, we'll walk you through how to create a widget with a custom design for forms and tables (reports). To create it, we'll use HTML, CSS, and JavaScript that we'll integrate into the Creator database using our JS API.

To create the Zoho Creator widget, you must install the Command Line Interface (CLI) on your machine. You can refer to this help article to install the CLI and create your widget with the help of this document.

Note: The CLI is used to send commands to a software program as lines of text, in order to interact with it. This interaction includes typing commands into the interface and receiving responses for them. 

HTML & CSS - Here, we'll leverage HTML and CSS to design custom forms and reports (tables).

JavaScript - With Javascript, we'll be able to implement show/hide components along with data-oriented backend functionality. For example, we can pass data from an HTML table to a custom form within the widget.

JS API - We'll use this to push, pull, delete, and update data to Zoho Creator.

Using the above four methods, let's see how we can create a custom form and table to add and view the data we enter into the application.

We'll be following the below steps to design the custom form and report:

1. Design the custom contact form using HTML and CSS code.

2. Use JavaScript code to show the form when a user clicks on the + button.

3. Use the JS API to add data to the Creator database, once the user enters data in the fields. Then, we'll use JavaScript again to refresh the form once the data is added to the Creator database.

4. Create the custom table (report) using HTML.

5. Use CSS to add style to your table, like colours, font properties, text alignments, etc.

6. Use JavaScript code to show and refresh the table.

Note : We've attached a custom widget file that contains the below JS API tasks. This will help you create your own custom widgets and perform the following actions:

To use the attached widget in your application for testing, all you need to do is replace the form link name, report link name, and all the field link names with yours in the JS API call.

Wouldn't it be useful to create a custom form and report like this? If you have any questions regarding this tip, please feel free to add them as comments below. We'd be happy to answer them for you !