Tip 33: How to create custom forms and reports using widgets
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.
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.
What are widgets?
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.
How can you create a custom widget?
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.
Let's create the Zoho Creator widget!
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.
Methods used to Creator custom widgets
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.
So let's get started !
Step 1: Design the custom contact form using HTML and CSS code.
HTML code
<body>
<div class="wrapper" >
<div class="icon addIcon"onclick="myftn()" >
<div class="tooltip">
<b> Add Data</b>
</div>
<span><i class="fa fa-plus"></i></span>
</div>
</div>
<div class="contact-form"id="myForm">
<img alt=""class="avatar"src="https://i.postimg.cc/zDyt7KCv/a1.jpg">
<b><h2>Contact Form</h2></b>
<form id="itsMyForm">
<p>Name</p><input type="text"id="EnterName"name="EnterName"placeholder="Enter Your Full Name">
<p>Email</p><input type="text"id="EnterEmail"name="EnterEmail"placeholder="Enter Your Email">
<p>Age</p><input type="number"id="EnterAge"name="EnterAge"placeholder="Enter Your Age">
<p>Mobile</p><input type="text"id="EnterMobile"name="EnterMobile"placeholder="Enter Your Mobile Number">
<button class="Submitbutton"id="SubmitReset"type="button">S U B M I T</button><br><br><br>
<button class="Resetbutton"id="SubmitReset1"type="button"onclick="resetForm()">R E S E T</button>
</form>
</div>
</body>
CSS styling code
<style>
.wrapper{
display: inline-flex;
}
.wrapper .icon{
margin: 0 20px;
text-align: center;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
right:-900px;
top:70px;
z-index: 2;
transition: 0.4scubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .icon span{
display: block;
height: 60px;
width: 60px;
background: #fff;
border-radius: 40%;
position: relative;
z-index: 2;
box-shadow: 0px 10px 10pxrgba(0,0,0,0.1);
transition: 0.4scubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .icon span i{
line-height: 60px;
font-size: 25px;
}
.wrapper .icon .tooltip{
position: absolute;
top: 0;
z-index: 1;
background: #fff;
color: #fff;
padding: 10px 18px;
font-size: 20px;
font-weight: 500;
border-radius: 25px;
opacity: 0;
pointer-events: none;
box-shadow: 0px 10px 10pxrgba(0,0,0,0.1);
transition: 0.4scubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .icon:hover .tooltip{
top: -70px;
opacity: 1;
pointer-events: auto;
}
.icon .tooltip:before{
font-family: Arial, Helvetica, sans-serif;
position: absolute;
content: "";
height: 15px;
width: 15px;
background: #fff;
left: 50%;
bottom: -6px;
transform: translateX(-50%) rotate(45deg);
transition: 0.4scubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .icon:hover span{
color: #fff;
}
.wrapper .icon:hover span,
.wrapper .icon:hover .tooltip{
font-family: Arial, Helvetica, sans-serif;
text-shadow: 0px -1px 0pxrgba(0,0,0,0.4);
}
.wrapper .addIcon:hover span,
.wrapper .addIcon:hover .tooltip,
.wrapper .addIcon:hover .tooltip:before{
background: #ffc475;
}
.wrapper .ViewIcon:hover span,
.wrapper .ViewIcon:hover .tooltip,
.wrapper .ViewIcon:hover .tooltip:before{
background: #ffc475;
}
body {
content: '';
position: fixed;
width: 100vw;
height: 100vh;
background-image: url(https://images.unsplash.com/photo-1515420043797-69a1bc7ee7a0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MTU0fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60);
background-position: centercenter;
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-background-size: cover;
background-size: cover;
}
.contact-form {
font-family: Arial, Helvetica, sans-serif;
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 400px;
padding: 80px 40px;
background: rgba(0, 0, 0, 0.5);
border-radius: 15px;
}
.avatar {
position: absolute;
width: 80px;
height: 80px;
border-radius: 50%;
overflow: hidden;
top: calc(-80px/2);
left: 190px;
}
.contact-form h2 {
margin: 0;
padding: 0 0 20px;
color: #fff;
text-align: center;
text-transform: uppercase;
}
.contact-form p {
margin: 0;
padding: 0;
font-weight: bold;
color: #fff;
}
.contact-form input {
width: 100%;
margin-bottom: 20px;
}
.contact-form button {
width: 40%;
}
.contact-form input[type=email], .contact-form input[type=password],.contact-form input[type=text],.contact-form input[type=number],.contact-form input[type=radio] {
border: none;
border-bottom: 1pxsolid #fff;
background: transparent;
outline: none;
height: 40px;
color: #ffc475;
font-size: 16px;
}
.Submitbutton {
height: 35px;
color: white; font-size: 15px;
background: none; cursor: pointer; border-radius: 5px; border: none; outline: none; position: absolute; right:250px; bottom:40px;} Submitbutton:hover { background: #ffc475; color:black;both} .Resetbutton { height: 35px; color: white; font-size: 15px; background: none; cursor: pointer; border-radius: 5px; border: none; outline: none; position: absolute; left:250px; bottom:40px;}.Resetbutton:hover { background: #ffc475; color:black;}.contact-form a { color: #ffc475; font-size: 14px; font-weight: bold; text-decoration: none;}
</style>
Step 2: Use the JavaScript code to show the form on click of the + button.
<script>
function myftn()
{
document.getElementById("customers").style.display = "none";
document.getElementById("myForm").style.display = "block";
}
</script>
Step 3: Use the JS API to add data to the Creator DB 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.
<script>
function myfunctionAdd(){
ZOHO.CREATOR.init()
.then(function(data) {
//Code goes here
var Namee= document.getElementById("EnterName").value;
var Emaill= document.getElementById("EnterEmail").value;
var Mobilee= document.getElementById("EnterMobile").value;
var Agee= document.getElementById("EnterAge").value;
formData = {
"data" : {"Name":Namee,"Email" : Emaill, "Phone_Number":Mobilee, "Age":Agee} }
var config = {
formName : "Add_Request_Form",
data : formData
}
ZOHO.CREATOR.API.addRecord(config).then(function(response){
if(response.code == 3000){
console.log("Record added successfully");
}
});
//get all records API
});
}
function resetForm(){
setTimeout(function(){document.getElementById("itsMyForm").reset(); }, 1000);
}
var buttonbtn = document.getElementById("SubmitReset");
buttonbtn.addEventListener("click", myfunctionAdd);
buttonbtn.addEventListener("click", resetForm);
function resetForm(){
setTimeout(function(){document.getElementById("itsMyForm").reset(); }, 1000);
}
</script>
Step 4: Create the custom table (report) using HTML, as shown in the image below.
<body>
<div class="icon ViewIcon" onclick="showtable()" id="myBtn" >
<div class="tooltip">
<b> View Data</b>
</div>
<span><i class="fab fa-wpforms"></i></span>
</div>
<table id="customers">
<tr>
<th> P E R S O N N A M E </th>
<th> P H O N E N U M B E R </th>
<th> E M A I L A D D R E S S </th>
<th> A G E </th>
<th> ID </th>
<th> D E L E T E </th>
<th> E D I T </th>
</tr>
</table>
<div class="removeBtn"id="DeleteButtonn" >
<div onclick="DeleteDataa(this)" >
<div>
</div>
<span><i class="fas fa-trash-alt"></i></span>
</div>
</div>
<div class="editBtn"id="EditButton" >
<div onclick="EditDataa(this)" >
<div>
</div>
<span><i class="fas fa-edit"></i></span>
</div>
</div>
</body>
Step 5: Use CSS to add style to your table, like colors, font properties, text alignments, etc.
<style>
#customers {
display:none;
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 91%;
background: rgba(0, 0, 0, 0.5);
border-radius: 15px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-collapse: separate; border-spacing: 0;
}
#customers td, #customers th {
border: 1pxsolid ;
padding: 8px;
color: #ffc475;
border-radius: 15px;
text-align:center;
}
#customers tr:nth-child(even){background-color: ;
border-radius: 15px;
}
#customers tr:hover {background-color:black;
border-radius: 15px;
cursor:pointer;
}
#customers th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color:Black;
color: #ffc475;
text-align:center;
border-radius: 15px;
}
#customers td {
border: solid 1px #000;
border-style: nonesolidsolidnone;
}
#customers tr:first-child td:first-child { border-top-left-radius: 15px; }
#customers tr:first-child td:last-child { border-top-right-radius: 15px; }
#customers tr:last-child td:first-child { border-bottom-left-radius: 15px; }
#customers tr:last-child td:last-child { border-bottom-right-radius: 15px; }
#customers tr:first-child td { border-top-style: solid; }
#customers tr td:first-child { border-left-style: solid;
</style>
Step 6: Use the JavaScript below to show and refresh the table.
<script>
function showtable(){
document.getElementById("myForm").style.display = "none";
document.getElementById("customers").style.display = "block";
}
function myfunction()
{
var rowCount = customers.rows.length;
for (var i = rowCount - 1; i > 0; i--) {
customers.deleteRow(i);
}
var array1 = [];
ZOHO.CREATOR.init()
.then(function(data) {
//Code goes here
var config = {
reportName : "All_Requests",
criteria: "(ID!=0)",
page : 1,
pageSize : 10
}
ZOHO.CREATOR.API.getAllRecords(config).then(function(response){
//callback block
var a=0;
var roww = 1;
var recordArr = response.data;
for(var index in recordArr){
var rec=(recordArr[index]);
var val1=rec["Name"];
var val2=rec["Phone_Number"];
var val3=rec["Email"];
var val4=rec["Age"];
var val5=rec["ID"];
var display=document.getElementById("customers");
var newRow=display.insertRow(roww);
var cell1 =newRow.insertCell(0);
var cell2 =newRow.insertCell(1);
var cell3 =newRow.insertCell(2);
var cell4 =newRow.insertCell(3);
var cell5 =newRow.insertCell(4);
var cell6 =newRow.insertCell(5);
var cell7 =newRow.insertCell(6);
cell1.innerHTML = val1 ;
cell2.innerHTML = val2 ;
cell3.innerHTML = val3 ;
cell4.innerHTML = val4 ;
cell5.innerHTML = val5 ;
var div = document.getElementById("DeleteButtonn");
cell6.innerHTML = div.innerHTML;
var div = document.getElementById("EditButton");
cell7.innerHTML = div.innerHTML;
a=a+1;
roww=roww+1;
}
});
});
}
// Selecting button element
var btn = document.getElementById("myBtn");
btn.addEventListener("click", showtable);
btn.addEventListener("click", myfunction);
</script>
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:
- Add Record
- View All Records
- Update Record
- Delete Record
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 !
Stay Safe and Good Day :)
Topic Participants
Sriram U
Alex
Erackson Brito - The Social Element
Mikhail Zolikoff - U
Vinnie B - cloud-connect.ie
Recent Topics
Zoho Social API for generating draft posts from a third-party app ?
Hello everyone, I hope you are all well. I have a question regarding Zoho Social. I am developing an application that generates social media posts, and I would like to be able to incorporate a feature that allows saving these posts as drafts in Zoho Social.How to list WorkDrive folder contents using API
I'm trying to read folder contents using a Deluge script. The code below returns {"errors":[{"id":"F6016","title":"URL Rule is not configured"}]}". I've tried using the search API and seen similar errors. I have proved that the connection works by creatingBest practice to handle 50+ invokeurl calls in a loop without hitting the 30-second timeout?
Hi everyone, I am working on a custom Deluge function where I have a Map containing around 50+ key-value pairs. I need to iterate through this Map using a for each loop and make a GET API call (invokeurl) for each item. The Problem: Because of the 50+filter on sheets mobile (iOS, iPadOS) does not work
re-posting this as a question because reporting as a problem netted zero responses... I have this issue on every spreadsheet, whether imported or created natively in Zoho Sheets. I can use on desktop without issue: but on iOS the filter dropdowns areSolving the bug in Zoho Writer API for styling
So... the Zoho Writer APIs for programatically creating a document do not respect a template's style. The result is that any document you generate via API needs to be manually, paragraph by paragraph, reformatted. That bug alone is sufficient to renderZoho Books' 2025 Wrapped
Before we turn the page to a new year, it’s time to revisit the updates that made financial management simpler and more intuitive. This annual roundup brings together the most impactful features and enhancements we delivered in 2025, offering a clearSpeed (again!)
Same old story again: impossible to work at this "speed". Category NOTES!Need to set workflow or journey wait time (time delay) in minutes, not hours
Minimum wait time for both Campaigns workflows and Marketing Automation journeys is one hour. I need one or the other to be set to several minutes (fraction of the hour). I tried to solve this by entering a fraction but the wait time data type is an integersending email with another account
Hello there, i write there for an our costumer request. They want to send email from CRM with a different email (confirmed and added to zoho profile). For example they use account@zilium.com but with this account they want to send (not only with emailAll new Address Field in Zoho CRM: maintain structured and accurate address inputs
Availability Update: 29 September 2025: It's currently available for all new sign-ups and for existing Zoho CRM orgs which are in the Professional edition exclusively for IN DC users. 2 March 2026: Available to users in all DCs except US and EU DC. 24Comments aren't visible in shared spreadsheet
I would like to send a spreadsheet to people who can use it to help solve a problem as a one off use unique to them. They will have to enter data in the sheet. I have comments attached to some of the cells to explain the purpose of the data being collected.Custom button for list page
Why is my 'List Page - Bulk Action Menu' button in the Packages module not autopopulating the List argument with selected record IDs?Ask the Experts - Live Q&A webinar
Hello Community, We’re excited to host our very first Ask the Experts session! Join us on 7 April 2026 from 11 a.m. to 12 p.m. (IST) for this live webinar Q&A session, where you will have an opportunity to connect directly with our product experts, gainDesigning Multi-Step Workflow System in Zoho Creator + Deluge (Startup Build – Exploring Advanced Architecture + Partnerships)
Hi everyone, I’m currently building a Zoho-based system as part of an early-stage startup, and I’m looking to connect with others who have experience designing more advanced workflows in Creator + Deluge. This started as a standard application, but it’sBin Tracking with eBay integration
When trying to setup bin tracking on items that are linked to eBay listings using the built-in Zoho eBay integration, I keep getting this error: "Storage Tracking cannot be enabled for items that are manually fulfiled or for serial/batch items trackedRemoving To or CC Addresses from Desk Ticket
I was hoping i could find a way to remove unnecessary email addresses from tickets submitted via email. For example, a customer may email the support address AND others who are in the helpdesk notification group, in either the TO or CC address. This resultsUpdate to CRM Custom Buttons: Collect Users' Location
Hello everyone! Buttons in Zoho CRM allow you to extend the default CRM capabilities for your bespoke business needs. It provides the flexibility to connect to any third-party application to perform necessary actions. Wouldn't it be better, if those buttonsIs it possible to make tags "required"
We would like to be able to make the tag field a requirement for agents before they can close a ticket. This would help with monthly reporting, where a lot of tickets end up with no tag, causing manual work to go back and add the correct tag for eachPrevent Automatic Milestone Inheritance for Newly Created Task Lists
Hello Zoho Projects Team, We hope you are doing well. We would like to request an enhancement regarding how new task lists inherit Milestone association in Zoho Projects. Current Behavior: At the moment, when a new task list is created below an existingI would like to know wich person viewed the file
I have a franchise and my Operative Manual is in WorkdriveI, the user can´t download but despite I know How many views the file had, I would like to know wich person viewed the file Is it possible? thank youCan I write a check in Zoho Books with no associated bill?
This currently does not seem possible, and I have a client that desperately needs this function if I am able to convert them with Quickbooks. Thank you in advance for your reply.Cloning Module Customizations in Zoho FSM
Hello Latha, I have two Zoho FSM accounts, each in a different data center. I would like to know if it is possible to clone the module customizations I have already completed in one account to my new account in the UAE from the backend. In other words,Ordering of Teams
Hi there, Currently, we cannot order Teams in Zoho Desk. Teams are ordered as they were created. It would be really helpful if we could customise the order of Teams. For example: We have the following Teams: Shipping Customer Service Sales ComplianceEstimate Module - Contact Field.
Hello Latha and Team, Is it possible to make the Contact field optional in the Estimate module? Best regards, Chethiya.Item with name in different languate
Hello, is there a way to have an item with its name in different languages? For example: I sell an item in different markets and I'd like to have a Proposal and the Invoice with the Item Name in a specific language. Rino Bertolotto Zoho Specialist, STESA srlHow to keep track of bags, cans, drums of inventory?
We buy and sell products that are packaged in bags 🛍️, cans🥫, drums🛢️, etc. with batch numbers. When we get a shipment of one of the products, how do we track we received (say) 10 cans each of 5L of a product and maybe we received 10 cans of anotherThis version of app doesn't support this notecard type Error
So this problem is happening for any notes created within the last week, as well as any note recently edited on Android. I can open them on my phone fine, but they don't open on the website version. They DO work on the desktop app version. It's just webPDF's Give Unsupported Type Error Message
Many of the pdf files I add to Notebook work fine but in some cases when I try to open them on the Android App I get a message saying "Unsupported Type. Psst! You are using an older version of the app which does not support this note format. Please updateCliq iOS can't see shared screen
Hello, I had this morning a video call with a colleague. She is using Cliq Desktop MacOS and wanted to share her screen with me. I'm on iPad. I noticed, while she shared her screen, I could only see her video, but not the shared screen... Does Cliq iOS is able to display shared screen, or is it somewhere else to be found ? RegardsI am not able to check in and checkout in zoho people even location access allowed
This issue i am facing in mackbook air m1, I allowed location in chrome browser and i also tried in safari but getting similar issue. Please have a look ASAP.Is multiple invoice e-mailing possible?
I wonder if following is possible: When you are in the invoice view, assume you have five invoices to five different customers that are pending (you have just created them, but not sent them away yet by email.) To the left of every invoice in the overviewMultiple packages in one shipment
Guys we have been asking for this for years. we want to be able to ship multiple packages for one customer in the same shipment, so as to avoid entering shipping info repeatedly, and avoid customer getting multiple tracking emails. When does this arise?I can't add a new customer in Zoho invoice? Anyone had this issue before?
Ive been using Zoho invoice for over 6 years. Today I wanted to add a new customer to send an invoice to but it doesn't save when I try to access it from the pulldown menu when you go to send a new invoice.set up an opportunity progress bar in canva
Hi, set up an opportunity progress bar in canva I need help to set to reproduce the progress bar or equivalent of the opportunity steps in canva as in standard view (see capture ) Thank you in advance AmadouWhich Tool Is Best to Import MSG Files to HostGator?
The best tool to import MSG files to HostGator is the MacGater Mac MSG Converter. This professional utility is specifically designed to simplify the migration of Outlook MSG files into web-based email services, including HostGator. It supports directRecurring event sync via Microsoft 365 Meetings
I believe syncing Recurring through the Microsoft 365 Meetings integration is already in the works but I couldn't find a reference in the community to track the progress of this work.What's New in Zoho Invoice | April - June 2025
Hello everyone! We're excited to share the latest feature updates and enhancements we've made to Zoho Invoice from April to June 2025. In this, you will learn more about the following features: New Integrations via Zoho Marketplace Add Images to EmailClient Script | Update - Client Script Support For Custom Buttons
Hello everyone! We are excited to announce one of the most requested features - Client Script support for Custom Buttons. This enhancement lets you run custom logic on button actions, giving you greater flexibility and control over your user interactions.import customers
Is there a way to bulk import customers? I'm moving from Acuity and would rather not have to enter everyone manually.What's New in Zoho POS - February 2026
Hello everyone, Welcome to Zoho POS’s monthly updates, where we share our latest feature updates, enhancements, events, and more. Let’s take a look at how February went. Purchase and sell items on different units We have introduced a unit conversion functionalityNext Page