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
'View Invoice' button hyperlink taking to Google Business Maps listing
The green "view invoice" button in my invoice emails is sending people to my Google maps business listing rather than the invoice. Both my clients and I are experiencing this as a new issue.Migrating Zoho emails to Google Workspace
Hi Is there a tool to migrate Zoho email to Google workspace?Custom Functions - Calculate Commission - failure after migration from US to EU
Hello, i would ask for help. My Custom Function - Calculate Commission stopped working and shows a failure. Mismatch of data type expression. Expected List but found String What is the problem? Could anyone help? Here is script: void automation.ObliczProwizje(IntGoCardless Mandate Sync Question
Hello, When syncing our customer database with GoCardless, some customers aren't working despite both email addresses matching in Zoho Books and GoCardless. Also what do we do about customers where they are associated with multiple accounts as these aren'tCreate a draft in reply to an email via Emails API
Hi, I’d like to use the outgoing webhook to automatically create a draft reply to incoming mail. How can I use the Emails API to create a draft reply that is linked to an existing email thread? I couldn’t find the relevant method in the documentation.Weekly Tips: Flags for an organized mailbox
Wishing you all a Happy New Year 🎉 As we step into 2025, it's time to refocus and set our intentions for the year straight. Whether you're already back at work or just returning from the holidays, you probably have emails that need your immediate attention,Edit line item amount
It would be sooooo much better to be able to edit the line item amount in all of the modules, if there is any variation in agreed prices it's extremely painful to calculate the rate to match ;-( The rate could be auto calculated on editing this field making life so much easier !Chanel Partner
Any Zoho channel partner or dubai based company who will help us for getting zoho services including the training for our staffRefer a Friend Campaign
I am looking to run a referral campaign that sees an initial email going to existing clients, asking them to refer a friend. For each new client referred, the existing client will get a ticket in a prize draw - the more new clients they refer, the more tickets they get in the draw. I am wanting to figure out how this could be done via Zoho, and how these referrals can be tracked and linked to the existing client who referred them.Emails cannot be received
Hey, There is an issue in my Zoho account, E-mails can be send from my side but cannot be received on my account MX, DCIM and other are added but still cant receive them. Please help me to solve this problem at your earliest convenience and this is happeningNewsletter in multiple languages
Hi We are planning on starting to use Zoho Campaigns for our newsletters. Since we send our newsletters in three languages, I would need the "unsubscribe page" and other pages related to the NL (Thank you page and so on) to be available in different languagesi couldn't recall message as one of the receptionists didn't received the message and i want to recall it urgent
i couldn't recall message as one of the receptionists didn't received the message and i want to recall it urgent as recall button doesn't appearServidores caidos?
Buenas, Hoy 30/12/2024, mi empresa esta sufriendo bastante problemas para acceder a las aplicaciones de Zoho. No sabemos si es solo nuestra compañia o esta afectado a todos. Cuando intentamos acceder a las aplicaciones nos salta el siguiente error: ATip #1- Remote support vs. unattended access: Contrasting two key concepts in tech assistance- 'Insider Insights'
Hello everyone! We, at Zoho Community, are excited to introduce Insider Insights, a new series where we will look into various aspects of remote support technology and how they might help you. We'll be sharing tips, methods, and insights acquired fromIntroducing Fair Evaluation for Interviews
Collaboration is key in recruitment, but it’s important to ensure individual interviewers’ assessments are not influenced by others. With Fair Evaluation, you can choose how and when interviewers can see reviews of a candidate for the same job opening.I have been looking for CVID to get segmate list where & how can fnd it?
I am trying to get segment details from the Zoho API. The API documentation says that the CVID is a mandatory parameter, but I cannot find the CVID in the "getmailinglists" API. Can you tell me where to find the CVID?"The data you have entered already exists" when trying to create contac@mydomain.com
Hi all, Our domain is ananasjuicebar.com. Working as admin in the control panel: When I try to add the email account "contact@ananasjuicebar.com" I get the error: "The data you have entered already exists" I've tried creating a new user or creating a new group with this address associated. To my knowledge this address has never been added and I can also not find any reference to it. (Shopify used this address to send customer notifications BEFORE setting up Zohomail.) Any ideas? are there any restrictionsTip of the week 03 - Sending emails in batches
Today's marketers not only want their email marketing to be efficient, but also smart. For an email campaign, you may think you have all the essential elements for lead conversion—a big mailing list, an attractive template design, and the most-engaging message content, but after hitting the ‘send’ button, you may not get the expected conversions. Wondering why? Here’s one of the major reasons. Many marketers miss out on sending the email campaign the right way. Did you know that you should not beZoho Books Bank Feed
Good afternoon, Is it possible to change the bank feed provider on a bank account. I'm using Plaid but think that Yodlee would be better in terms of pulling transactions in a timely manner. Thank you.Create Bill from Purchase Order via API
I know you can create a invoice from a Sales Order by using https://books.zoho.com/api/v3/invoices/fromsalesorder Is there a similar url for creating a bill from a purchase order?Log incoming calls on Android CRM?
I keep reading that I'm able to log incoming calls on the CRM app for Android, but when I answer a call and hang up, I never get the option to log. Is there a special admin I need to do for that? Or permissions? ThanksHow do i send an automated email 10 days after closing a ticket
I am trying to set up an automated email to the customer a set period after the ticket is closed. I have created the email template, but i cannot work out how to set the trigger to send this out. Can someone point me in the right direction please? IfDomain Verification
Hey, How do I know that my account is verified by Zoho? Do I need some zd code/number for it? Need help asap!Sender not verified message showing on mails sent using zoho mail
Hello, I am using Zoho mail to send and receive emails. Whenever i send emails to zoho mail id, it showing a message "Warning! Unverified sender.We could not verify that the email was actually from sending email. Be cautious when opening any links/ attachments,Mail Outgoing blocked. Reason :Mail rate exceeded limit
Hello, Please unblock my mail account: ser1@innspo.com ThanksWhy is Zoho Mail support so lousy?
This is not the first time I voiced out about this, the first time was 2 months ago https://help.zoho.com/portal/en/community/topic/what-the-actual-fk-is-wrong-with-zoho-mail-support where I had to follow 7 times in the span of 2 months to get a (unhelpful)This domain is not allowed to add. Please contact support-as@zohocorp.com for further details
I am trying to setup the free version of Zoho Mail. When I tried to add my domain, theselfreunion.com I got the error message that is the subject of this Topic. I've read your other community forum topics, and this is NOT a free domain. So what is theAdd Google Workspace Module to Zoho Flow
Dear Zoho Flow Team, I hope this message finds you well. We’d like to request the addition of a dedicated Google Workspace module in Zoho Flow. Currently, there are no triggers or actions for Google Workspace, which limits our ability to integrate andSeparate Triggers and Enhanced Information for Zoho One Departments and Groups in Zoho Flow
Dear Zoho Flow Team, I hope this message finds you well. Currently, there seems to be a mix-up between zoho one departments and groups in Zoho Flow, which causes some challenges in handling triggers effectively. For instance, when using the "User addedCreator Subform to CRM Subform
Hello all, Has anyone successfully written data from a Creator Subform into CRM subform? I have a Creator form that once submitted creates a new Location in the CRM. Inside a Location there is a subform for hours of operation. I collect those hours innot able to accept the Invitation
not able to accept the InvitationInventory Management for Manufacturer
Hello, We are a manufacturing company in the FnB industry. We want to use the inventory management system to manage our raw material stocks and at the same time once we produce items, we need to increase our final product inventory while decreasing theAnother nightmare experience with a "Zoho Partner": Cloud Z Technologies
I found "CloudZTech" on fiverr and I hired them to do a simple $300-$500 task. They did not deliver on time and I was forced to fire them. You guys must watch out for these fake ZOHO PARTNERS, 99% of them don't have the expertise necessary to help. IProduce application url to be common for all the Creator application Stages
I am trying to develop an application using the 3 environments steps like development, stage, production. I am trying to pass in a variable url like which redirects to a Report inside the application URL = "https://creatorapp.zoho.eu/insurancemarket/environment/development/all/#Report:Sign_Up_Form_Report"ZOHO BOOKS - RECEIVING MORE ITEMS THAN ORDERED
Hello, When trying to enter a vendor's bill that contains items with bigger quantity than ordered in the PO (it happens quite often) - The system would not let us save the bill and show this error: "Quantity recorded cannot be more than quantity ordered."Bill quantity received / PO quantity
PO's are raised & often the quantity received is greater than the PO quantity, so when we receive the bill & adjust the quantity on the bill we get.... Quantity recorded cannot be more than quantity ordered. This necessitates the adjustment of the POInventory API - How do I add a payment to a bill using the API?
I can update the "notes" field but I don't know how to add a payment to an existing bill. Is this possible? Does someone have a working example?Why Doesn't TrueSync Desktop App Have an Auto-Update Feature?
I have to manually update the app myself. I think it's a big shortcoming.Link Zoho Inventory to Clover POS
Is it possible to link zoho Inventory to Clover POS?How can I start trial version without any example data?
I am lazy to manually delete each data in every section. Is there any button to fresh start my account from zero?Next Page