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
Fixed assets recording
Hello there, I recorded a bill for a vendor contain (Computer) so the PC is a fixed assets, do I need to do a manual journal to include this PC under the fixed assets category (furniture & equipment)? If yes, please take me through the manual journal[New Release 2024] Create and embed custom capabilities across CRM with Kiosk Studio, our latest no-code tool
[Update | New series] We've started publishing a series of posts on Kiosk Studio. It's called Kiosk Studio Sessions and you can check out the first one here! [Update | 15 Oct} Session #2 is live! This one will look at how to create a kiosk for your callMulti-Select lookup field has reached its maximum??
Hi there, I want to create a multi-select lookup field in a module but I can't select the model I want the relationship to be with from the list. From the help page on this I see that you can only create a max of 2 relationships per module? Is that true?Kaizen #168 - Incremental Authorization
Welcome to this week's post in the Kaizen series. In this post, we will discuss Incremental Authorization. What is Incremental Authorization? Incremental Authorization is an OAuth strategy that allows a client to request specific authorization scopesZoho Analytics Pivot Table - How to compare month vs last year same month
Hi, I had created a pivot table with setup as below: Column: - Delivery Date Row: - Customer Group Data as column - Total amount (sum > normal) (show data of the month) - Total amount (sum > % difference from previous value) (compare between this monthConfigure Notes Title for Blueprint Transition
It'd be very helpful to be able to configure note titles on blueprint transitions when requiring notes. This would help tie back the history of notes to the blueprint actions. We have some approval processes in our blueprint and require notes for theAn update to improve email delivery | Email Authentication & Relay
Dear Zoho Recruit Community, We hope this message finds you well. This post is to inform you about an important update regarding the authentication of all email domains in your Zoho Recruit account. Effective 31st December, 2024, emails sent using emailStop adding Default ID column to xls exports
When anything is exported to xls, Zoho adds a column with an ID. WE DO NOT WANT THIS COLUMN. We use an automated report to a team. We have our own tracking number. 1. This makes the report messy, it just pushes OUR data off to the right. 2. We haveAutomation#25: Move Tickets to Unassigned When the Owner Is Offline
Hello Everyone, Welcome to this week's Community Series! 'Tis the holiday season—a time when work often takes a brief pause. The holiday spirit is in full swing at Zylker Techfix too, with employees taking some well-deserved time off. During this period,Zoho cases and remote work api
How to use zoho cases listing api? When i try to hit the endpoint specified in the docs , i get the error : the page you are looking for does not exist with a 401.Calendly does not show scheduled Meetings
I use Calendly as my standard booking tool, but no matter what I am doing, Calendly shows any appointment as free (when in fact there already is an appointment in CRM Calendar or Zoho Calendar). Drives me nuts - cannot go away from Calendly due to variousDelete Field that is used in a Zoho Flow connection
I'm trying to delete a Field used in a Webhook created by Zoho Flow with CRM Connection and i get the following alert: When going to the alert i get to the following issue, can't edit it since its been deployed by a pluggin But yes i have here the promptedI want the currency in my account to be Mexican pesos.
Hello, I am a Mexican citizen and live in Ukraine. When I registered to your system, it was seen that I was from Ukraine, so the default currency is Euro. This is causing me a problem. Please change the standard currency in my account to Mexican PesDirectly Edit, Filter, and Sort Subforms on the Details Page
Hello everyone, As you know, subforms allow you to associate multiple line items with a single record, greatly enhancing your data organization. For example, a sales order subform neatly lists all products, their quantities, amounts, and other relevantYear-End Wrap: Don't rewrite - Switch to Email Templates
As we're half-way through December, now is the perfect time to start sending out festive greetings. Whether it is to your clients or your team, it is important that every mail is tailored to the recipient and feels genuine, which allows you to make betterElevating Email Security on Zoho Desk: DKIM Now Mandatory
Hello Zoho Desk Users! It has been a wonderful journey with you on Zoho Desk. As we prepare to welcome 2025, we are strengthening our efforts to ensure a secure and seamless experience for you. To enhance email security, DKIM configuration will be mandatoryHow to view shared mailbox in Outlook
How to view shared mailbox in Outlook or in another softwareClear String field based on the value of other field
Hello everyone, We would like to be able to clear a string field (delete whatever has been written and make it empty) when another field (picklist) is changed to a specific value. While I can empty other types of fields, I noticed that I can't do thisNecesito el código ZB para mi cuenta
Hice cambio de servidor y no encuentro el codigo unico de cname.Privacy error
Privacy error on Chrome for all embedded forms and reports, this is a huge issue: "Your connection is not private Attackers might be trying to steal your information from creator.zohopublic.com (for example, passwords, messages, or credit cards). NET::ERR_CERT_COMMON_NAME_INVALID"Email with attachments saving attachments into Zoho CRM from Zoho Mail
Hi, I get a lot of emails from prospective clients asking if we would bid their project. Those projects usually have many documents associated with them that I link to. I would like to have those documents be saved as an attachment in my Potential or Contact or Account. I don't see a way to do that that isn't multi-step. As of now I do the following: 1.) Open email 2.) If email sender isn't in my Zoho CRM database I enter them creating a Potential 3.) I download the attachment and save it to a differentBug - OTP (email) and No Duplicates
Scenario: Form with an email field, Validation: "No Duplicates" (because I want to ensure 1 entry per email). Embedded form into website (JS option). Enabled email based OTP. 1st test (via my website) - entered my email address - sent OTP - entered pin,Customise Search Bar in CRM
Is there a way to customise this search bar in the CRM to add fields?Counting downloads of a file
Hello Could anyone help me, I would like to use a custom script to count how many times a file contained in a record has been downloaded. Is that something that is possible in Creator? Thanks EstelleIs there any way to prevent emails from being sent from zoho crm without pressing email opt out?
When I left my desk yesterday I excitedly thought I had fixed my problem, by making use of the "Inactive" field ... However after contacting the support chat, they have advised to stop emails being sent I need to update the "Email Opt Out" field - whichNew Search Function
Hey Team, The search function updated in our CRM about a week ago, so I assume it was an automated update across Zoho. It no longer displays leads/deals etc in Chronological order so that the most recently created or updated is the first to display whichNew permissions for accessing emails sent via Zoho CRM
Last modified on Nov 4, 2024: Permissions for accessing emails sent via Zoho CRM have now been extended to the IN DC. With this rollout, the feature is now available to all users across all DCs. Resources: Data sharing for emails, Configuring email composeMind Mapping
Will Zoho consider a mind mapping application? I have seen some discussions that are some 10 years old. What is the status now?is it possible to add more than one Whatsapp Phone Number to be integrated to Zoho CRM?
so I have successfully added one Whatsapp number like this from this User Interface it seems I can't add a new Whatsapp Number. I need to add a new Whatsapp Number so I can control the lead assignment if a chat sent to Whatsapp Phone Number 1 then assignUnable to send emails
I have this email parth@mrcolumbus.in, but I couldnt send outgoing email. Can you please help?Request for Alerts on Workflow and Function Changes.
I want to get an alert whenever a new workflow or function is added or an existing workflow or function is edited. Is there any way to do that? I need to log all changes whenever updates are made or new ones are added.Overwrite Option for custom modules
Hi Team, I noticed that the overwrite option is unavailable in Zoho Books when importing data for custom modules. This limitation makes it challenging to bulk update old data, as the only option is the 'bulk update' feature, which is restricted to 25Transfer Amount from One Vendor to Another Vendor
One of the vendors, who has a balance with us, has closed the business and has started a new business; Now he wants me to transfer the outstanding from the old account to the new Vendor Account. I am trying to do this using Payment Settlement a/c, ButBeen getting this error, every now and then "Get count limit exceeded, please try again after 3 mins"
it is really annoying.How to make Branch compulsory in Zoho Books invoice?
How I make Branches compulsory in Zoho Books invoice?Regarding GST Report Issue in Zoho Books
Hi, Right now, the very important point from my end is this Zoho Books issue. Here, you can see that we have created the invoice with the items of account sales and expenses. The journal is also correct. The profit and Loss statement is also correct.Function #57: Automatically group items in invoices based on categories
Hello everyone, and welcome back to our series! As a business expands and new product lines are launched, it becomes important to organize the items for better inventory management. The Category field in Zoho Books helps here by allowing you to add andFixed asset management
I want to know if there is any individual module for fixed assets managementSuppress "spreadsheet will not be saved" message on published sheet
I have published a sheet and have one column on that sheet that the user can edit (a dropdown picklist where the user can select the status for each line). Is there a way to suppress the Zoho Sheet message "Any changes made to this published spreadsheetZoho Forms Unable to Save Account Numbers with a Leading Zero
We are using Zoho Forms to for rental applications. It is working well, except for one thing: when a user enters their bank account information, and that account number actually starts with a ZERO (like 00123456) the Zoho form will return the value withoutNext Page