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
Bulk Delete Customer Contacts.
Due to a config issue on my end (my fault), I have ALL contacts from CRM imported as contacts in Books. Some clients have 30+ contacts. Is there a funky way to bulk delete? Each contact has three clicks and a scroll to delete them.Multiple domains for same username and password
I've come across this situation the vault is currently suggessting the passwords autofill option by the domain. wondering whether is there any option to save one password for multiple domains since the microsoft login has two domains https://login.microsoftonline.com/Introducing Bot Filtering for Accurate Email Campaign Analytics
Dear Marketers, We're excited to announce a new feature designed to enhance the accuracy of your email campaign analytics: bot filtering. This feature helps you filter out bot-generated opens and clicks, ensuring your campaign reports reflect genuineOption to specify or disable "Idle" times in preferences
It seems strange to me that my Cliq shows me as "Idle" when I'm using the PC and available just because I haven't interacted with Cliq in a while. I'm far from "Idle" so we're just treating "Idle" and "Available" to mean the same thing. I'd like to suggest a setting to change the timeout or even disable the automatic "Idle" mode.Lockable Due Dates
Hello, is there a way to FIX due date of task or task list, so that they cannot be moved by linked task that are late? Like having a sort of "limit date" that would create an alert if not reached?in zoho books while categorizing need to add new name in category by replacing expanses how to edit or make changes need assistance
Function #61: Automatically add free item to the invoice based on item quantity
Hello everyone, and welcome back to another Custom Function Friday! During holiday seasons or special promotions, businesses offer deals like BOGO (Buy One, Get One), Buy 3 Get 1 Free, Buy 2 at 50% off, and much more to attract customers. These promotionsRegarding 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.Multiple Salesperson against an invoice
Hello, Against a particular invoice, we have multiple sales people working. The reason we combine the invoice is becuase we are an exporter and often consolidate cargo for our customer to save them freight costs. How do I capture the contribution of eachProjectwise budget ---
Can we have a Project wise subject in addition to the Monthly, and quarterly ACCOUNT LEVEL budget?Looking back at Zoho Social's 2024: Highlights and memories
Hey everyone, We hope you had a relaxing and joyous holiday season. Whether you're planning for the new year or still soaking in the magic of the season, we're here to share some exciting highlights from 2024 – a year that was fully packed with updatesBuilding a Zoho Extension for Webex CC - Handling URL Changes
Hi everyone, I’m building a Zoho extension for Webex Contact Center (Webex CC) and facing an issue with handling URL changes. In telephony, I’ve set the URL of Webex CC to: https://desktop.wxcc-us1.cisco.com/ When this URL remains the same, everythingRemove County field from Customer Address input screen (or allow input to be deleted)
We are in the USA and have just noticed that there is now a County field in the Customer Address input screen (and maybe other areas of Zoho Books, but this is the one affecting us at the moment). County is not important to our business, and in fact weZoho still running very slow
I have a lead log for my company and creator seems to be running extremely slow still.Bigin API Token Request ("invalid_client")
Hi people, I tried to connect to the API without success, I've read all of the documentation multiple time and tried just about everything. I tried to do it with Python Request module and with Postman, passing the information through both the URL parameterShared Dashboard / Report Permissions : Read not Write
hi all, We are missing a huge fonctionnalite in setting up Dashboards (and reports) on corporate level. Currently, we can not set Read Permissions on share Dashboards (and reports) without giving write access as well When we create a corporate dashboardProfile stitching with Zoho Marketing Automation
When it comes to marketing, knowing who your audience is and tracking their interactions is vital. That's why Zoho Marketing Automation has taken a significant leap forward with its enhanced profile stitching feature. With this update, you can track yourGDPR
Hi , I'm checking out the HIPPA capabilities and at the moment I can see only three modules that can be selected to enable HIPPA Any idea how I can add additional modules such as customers? TNX Daviddefault task list for new project
Is there any way to have a default task list already created in a project, when the project is created in Zoho Books?Record less quantity than ordered in ZOHO inventory
Lets say I ordered 100 widgets from a Vendor. I have paid the Vendor month ago and just waiting for the product to ship. I have finally received the products but have only received 80 widgets. I see no way in ZOHO to only receive 80 widgets. ZOHO is forcingStripe payments via Books invoice link missing email - affects fraud detection
Hi, All our payments done via Books invoice link have a warning: Integration improvement available This transaction is missing customer email address, which affects fraud detection. Why doesn't Books pass this info to zohosecurepay.eu/books/... for morePower of Automation: Automatically sync custom field data between two tasks.
Hello Everyone, A Custom Function is a user-written set of code to achieve a specific requirement. Set the required conditions needed as to when to trigger using the Workflow rules (be it Tasks / Project) and associate the custom function to it. Requirement:-'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 beNext Page