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
Introducing Record Summary: smarter insights at your fingertips
Hello everyone, Building on the recent launch of Zoho's in-house Zia Large Language Model (Zia LLM)—a major milestone in Zoho CRM’s AI capabilities—we’re excited to introduce the Record Summary feature. This powerful addition makes use of Zia LLM to simplifyNo longer get Cliq notifications on phone if app not started
On Android, I used to get notifications on my phone whether I was in the app, or it was started. Then about a month ago, I stopped seeing notifications on my phone UNLESS I had already started the app. So if I reboot my phone, and never start the app,Error AS101 when adding new email alias
Hi, I am trying to add apple@(mydomain).com The error AS101 is shown while I try to add the alias.Deluge script to add Mail Task
Has anyone out there created a custom function to create a Zoho Mail task? I'd be interested in hearing how you accomplished it. Sample code is appreciated!Tags with Zapier
Maybe I'm missing something....I hope so... Using tags for triggers is a key need. This prevents us from having a ton of different lists. I am trying to find out how to add a tag using zapier when someone makes a purchase....but it doesn't seem to beSend Supervisor Rule Emails Within Ticket Context in Zoho Desk
Dear Zoho Desk Team, I hope this message finds you well. Currently, emails sent via Supervisor Rules in Zoho Desk are sent outside of the ticket context. As a result, if a client replies to such emails, their response creates a new ticket instead of appendingHow to apply blueprint on tickets that created from IM module
Hello, I have an issue applying blueprint on tickets that created from WhatsApp conversation, the tickets matches with the blueprint criteria but still we are not able to put these tickets into the blueprint. I've tried with deferent type of tickets andFunction #4: Schedule Customer Statements
Regularly sending statements to customers is an imperative part of many business processes as it helps foster strong customer relationships and provides timely guidance on payments. While you can generate the statement of accounts and have it sent overZoho Mail POP & IMAP Server Details
Hello all! We have been receiving a number of requests regarding the errors while configuring or using Zoho Mail account in POP/ IMAP clients. The server details vary based on your account type and the Datacenter in which your account is setup. EnsureRemove 30-Day Client Reply Restriction on Supervisor Rules in Zoho Desk
Dear Zoho Desk Team, I hope you're doing well. Currently, Supervisor Rules in Zoho Desk run once every hour but only apply to tickets that have received a customer response within the past 30 days. This restriction creates challenges for us, as we havePaid Support Plans with Automated Billing
We (like many others, I'm sure) are designing or have paid support plans. Our design involves a given number of support hours in each plan. Here are my questions: 1) Are there any plans to add time-based plans in the Zoho Desk Support Plans feature? TheContacts Don't Always Populate
I've noticed that some contacts can easily be added to an email when I type their name. Other times, a contact doesn't appear even though I KNOW it is in my contact list. It is possible the ones I loaded from a spreadsheet are not an issue and the onesHow to get NSE/BSE Stock Prices in Zoho sheets?
I've been looking for a function that provides me with the NSE/BSE listed stocks price in Zoho Sheets like GOOGLEFINANCE in Google sheets, but I found none. Please help if there is any way to het stock prices?Tip #5: Setting access rights at the subfolder level
Hello everyone, We hope you're finding our WorkDrive Tips and Tricks series useful. For today's tip, we'll teach you how to assign higher subfolder permissions to Team Folder members. Team Folders helps you avoid the drawbacks of traditional file sharing.Cannot edit email text in Zoho Form rules
I have a number of rules set up on a form depending on a user's submission. For some reason, I am no longer able to edit the content of the emails sent out based on those rules. I am invited to "use the advanced editor", but the original text of the emailCan multiple agents be assigned to one ticket on purpose?
Is it possible to assign one ticket to two or more agents at a time? I would like the option to have multiple people working on one ticket so that the same ticket is viewable for those agents on their list of pending tickets. Is something like this currentlyFor security reasons your account has been blocked as you have exceeded the maximum number of requests per minute that can originate from one account.
Hello Zoho Even if we open 10-15 windows in still we are getting our accounts locked with error " For security reasons your account has been blocked as you have exceeded the maximum number of requests per minute that can originate from one account. "how can I hide this Module?
Hi everyone, newbie question. how can I hide the "Sales Order" column? when I try I get this message: https://imghostr.com/86395c_p7jDomain verification is in progress... (How long do I need to wait?)
Trying to setup my first email domain by connecting with GoDaddy. Have been here for quite some time and the screen is not changing. How long should this take?Send DataSend DataHow to display profile picture for distribution list?
I am Admin of a Zoho Mail server and we have distribution lists along with user accounts. I am able to set Profile picture for the users and it shows when the email is sent to another companies. The members of the groups can also send email from thoseMail Search Not Working
Hello, Mail search is not working at all. I've tried Chrome and Mozilla. I can try and search for an exact term, or even an email that is 1st in my email list. All search does is sit and spin, or it comes up with no results. I've also tried it on my androidPassword should not contain sequential characters
How can I avoid this? How do I even disable it. On my password policy page, it's all blank, so I don't know why I'm even getting this error now.Same phone number for more than one account.
Hi there, I am a webdeveloper specialising in providing websites, webhosting and email solutions for my customers. I have signed up a number of my customers to Zoho Mail in the past, and a couple of these have grown into a paid package for Zoho CRM. AsIs there a live chat for Zoho mail?
I am having a problem in Zoho mail and would love to live chat with someone instead of email and wait for a response. Is there a function for this? I know there is in CRM but I can't seem to find it in mail... Thank you!Integrating Zoho Desk Instances from two separate organizations
Is it possible to integrate Zoho Desk with an instance from another organization? For example, creating a ticket in one organization can cause the creation of a ticket in the second organization? Or certain tickets from one organization be viewable byWhy does incoming mail inconsistently bounce back from Zoho mail
On testing our user accounts, we are having problems where mail sent to zoho mail bounces back with errors message that 'relay access denied'. On testing from various accounts (including outlook, gmail and yahoo) mail seems to get through on some occasionsZoho email setup in office365
When i am trying to setup zoho mail setup using my domain in office365 and it is not working and it says that we couldn't log on to the incoming (IMAP) server and please check your email address and password and try again. I was able to login using myJunkMail rejected
Hello, we are facing problems sending mails. The IP has been blacklisted. Please, fix it as soon as possible. JunkMail rejected - sender4-op-o12.zoho.com [136.143.188.12]:17291 is in an RBL on rbl.websitewelcome.com, see Blocked - see http://www.spaMy emails going to spam folder for hotmail or outlook
My emails (not spam mails) are going into the spam folder for my customers using hotmail. Gmail and Yahoo users are receiving the emails in their inbox. can you please solve this problem. I read few articles but coudnt find any solution to it. I am testing it by sending a simple text email no pictures nothing at all still it is filtering my emails as spam. Please help I am really loosing time and clients due to this. ThanksCapture hotkeys inside the remote session and allow file exchange via clipboard
Hi guys, assist is a really good app, and to become great it would be nice to have some features other vendors have in place and we take them for granted. For example, ScreenConnect, TeamViewer and others allow you to send hotkeys via the remote connection,Cannot fetch url with custom extension (sigma - javascript)
Hello i try to make my first extension with API request, i have two cases 1) this a deluge code attach to a button --> this one works very well response = invokeurl [ url :"my_api_fetch_url" type :GET headers:{"api_key":"myapikey","accept":"application/json","content-type":"application/json"}how to upload the picture and document
i want to upload the picture and document,would you please told how to upload them?could you told it for each step?Forgot my email management account
Hello, I am the administrator of ihomemix.com. I can’t remember which email address I used to register the account and then opened the email service for ihomemix. I can’t see the subscription period of my email function when I log in with this account.Add customer to account based on domain name.
I generate reports based on a the account field, i.e. companyX. In GoToAssist, my last provider, there was an option to automatically assign new ticket creators to a company (or account) based on their domain name. So for example, if a new employee creates a ticket from @companyx.com, for them to be automatically added to the companyx account would be a huge advantage. As it stands right now, I have to remember to add them to the account manually. Often I forget and when generating a report forFacilitate business processes by mandating Kiosks in your Blueprint's transition settings
Hello everyone, We've made a few enhancements to Kiosk Studio. Blueprints provide a structured and systematic approach to executing business processes, and you can use Kiosks to build custom capabilities to retrieve, collect, and execute actions on CRMResponse Violation - Zoho Desk
Hi Team, I just need an information regarding the zoho desk - Response Violation and how can we avoid the tickets from getting the tickets response violated.I need help in setting up a script that works for my calling service
Please i need your guidance and expertise in how to go about a particular scripting. You see, we are a call service that assists companies to receive calls for them, i need to create a system in my Zoho CRM whereby i will receive call from my alreadyZoho CRM Customer Portal Pricing Question
Hello, I am trying to find out about the pricing for a portal that will be used for the contacts and a custom module. My client needs to use a customer portal for 15k users that will display the contact details and some informations to a linked customHow to display Motivator components in Zoho CRM home page ?
Hello, I created KPI's, games and so but I want to be able to see my KPI's and my tasks at the same time. Is this possible to display Motivator components in Zoho CRM home page ? Has someone any idea ? Thanks for your help.Zoho developer edition does not work for us
Hi Is anyone else having this problem? I'm signed in with our admin/super user account. When I click on the link on this page: https://www.zoho.com/crm/developer/docs/dev-edition.html I am asked to agree to Terms and Conditions. Clicking Agree to TermsNext Page