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
Building a custom site
do we have an option in Zoho to build custom sites like adding custom functionalities? want to make a site like https://trackscourier.com/jnt-tracking-ph/. Is it doable? Please assist.Selecting ZOHO Help Desk Plan for Startup
Hello everyone, We at unisouk are setting up a Product support team for our platform. and probably we will be team of 3-5 people. Which plan would cater my needs to address customer technical queries and maintain the inflow of various channel queriesWhere do we manage tags?
Where is the page where we can view all tags and manage them (like change a tag name to something else or merge tickets under a particular tag with another)?Possibilité de créer des boutons de raccourci dans les tickets Zoho Desk
Bonjour, J'ai développé plusieurs automatisations avec Zoho Deluge pour optimiser la gestion des tickets. Je souhaiterais savoir s’il est possible de créer des boutons de raccourci directement accessibles dans l’interface des tickets afin de déclencherUpdate to the Merge Tickets Functionality
This is to inform you about a significant update to the Merge Tickets functionality in Zoho Desk. Until now, while merging tickets, a user could set one ticket as the master ticket and choose the final value for any field from any of the secondary tickets too. As a result of this provision, many a time, crucial details related to the master ticket faced the risk of being excluded in the final, merged ticket. To overcome this challenge, we have decided to make the value of some critical fields unchangeable,Setting up CRM for RFP workflow management
This will be the first time our organization uses an off-the-shelf CRM, transitioning from our homegrown custom solution, and I would appreciate general thoughts on how to get started in general with our workflow using Zoho CRM. The main question: ifIntegrating Calendly with Zoho Calendar in Zoho Mail
I moved my office into a business incubator space that uses Calendly for meeting management and events. Calendly doesn't have a integration with Zoho Calendar and vice versa. I was directed to Zapier for integration but it doesn't have an integrationUnable to access Zoho Desk at all - has an extreme slow load and then just remains blank
This is all I see:Demande : Épingler automatiquement un commentaire via Deluge
Bonjour, Je suis utilisateur de Zoho Desk et j'ai développé une fonction avec Zoho Deluge permettant d'ajouter automatiquement un type de commentaire à chaque création de ticket. Cependant, j'aimerais pouvoir épingler ces commentaires directement depuisUsing Creator API access tokens in deluge script
I am working on generating download urls for files that are uploaded via a creator form. I want to include these urls in record templates so they can be easily accessed. The goal is to make downloading multiple attachments in a record as quick and easyOption to Re-order from past orders
Customers would like to place a repeat order with the business entity. Currently there is no option to support this and everytime the customer has to check out following the same process. Can a option be given to reorder from the past orders?Display your zoho contact name when they call your mobile number
As per the title If a contact calls the office number, the contacts name shows on mobile as long as I have their contact details registered in my crm. Is there a way that if the contact calls my mobile, their name can be displayed? Currently just their number shows when they call.US to EU Data Migration done / Workflows and Custom Functions stopped working
Hello, I need help to restore my workflow rules and custom functions to work. My data was transferred from the US to the EU (Data center migration). Now all Workflow Rules and Custom Functions not working. I have no idea how to restore them to work again.Custom view for Milestones
Hi, Just an idea for the future... would it be possible to create custom views for the Milestones view under Work Overview ? I usually need to look at this view filtered by project group but the filter doesn't remain when navigating away. A custom viewEmail an Invoice from API
When calling the API to email an invoice, it seems it does not actually send it. Below is a screen shot where I used an API call for the bottom record, and it updated its' status to "Due Today", but no email was actually sent. The top record, I hit theHow to delete Email Sent From CRM from Contact Records
I can't figure out how to delete email sent form CRM from contact records. Can you please advise?CRM Deluge how can link attach file with workdrive file.
Hi, We have create file at workdrive and would like to link to attachment at crm module by deluge. Right now can only upload it to attachment but can not link the file from workdrive. Thank youTropicalize Books
Books is an incredibly powerful tool that works well in many countries. But I feel that it is a product that is not yet "tropicalized" for Brazil as we speak (this would be like adapting the local reality). We have many strong competitors who do moreRefund of a check distribution fee...
I use cashiers checks, from my local credit union, to pay some bills very occasionally. They charge me a 5.00 fee for this service, but then refund me that same amount at the end of the month on my statement. How would I record this transaction in ZohoUsuários do Zoho Recruit no Brasil
Gostaríamos de interagir com outros usuários do Zoho Recruit. Acabamos de completar um ano de utilização. Quem mais usa? se usa outra qual é?Zoho Creator Upcoming Updates - December 2024
Hi all, We're excited to be back with the latest updates and developments on the Creator platform. Here's what we're going over this month: Deluge AI assistance Rapid error messages in Deluge editor QR code & barcode generator Expandable RTF and multiQuestions about To Do
1. I created a To Do note on Android and there is a line sorting option in the options drop down menu. But I didn’t find such an option in the PC client. I really need this option. 2. Why is there no search in To Do on the PC client? 3. Why is there noIntroducing Offer Details Sync to Zoho People
We've introduced a new option for the Zoho People integration that allows you to push offer details when a candidate is converted to an employee. This simplifies your recruitment-to-onboarding process by seamlessly syncing critical offer information,Conversion of functions from Google Spreadsheets
Hello! I use this formula "=QUERY(ResumoOrdemVencimento!A3:O38;"SELECT A,B,C,D,E,F,G,H,I,J,K,L,M,N,O WHERE C != '' ORDER BY C,G")" in Google Sheets but when importing my spreadsheet into Zoho Sheets the formula was not converted. The QUERY function brings data from another spreadsheet, and then I sort and apply conditional formatting. The order of data will change automatically as I update the source spreadsheet. What Zoho Sheets function is equivalent to QUERY? I have some other spreadsheets toCopy, Duplicate, or Clone a Custom View?
I searched the forums and didn't see anything on the subject. Is there a way to copy, duplicate or clone a custom view? I want a custom view similar to one I've already created. I just want the columns in different order.Import from OneNote
Is there a way to import notes from OneNote?In Zoho Forms - adding a Zoho CRM field for Contact barely shows any fields.
I'm making a Zoho Form and I want to add a CRM field for Contact. I was expecting to be able to match the contact on the email address provided in the form. My standard layout has lots of fields but for some reason on the dropdown list in Zoho Forms,Is Bigin Really Free - Confused by notifications?
I started to look at Bigin as I was under the impression it was free, but as I started using it I kept getting messages that my trial period was X number of days and to upgrade. When I see something like this I assume I am not on a free version of anythingTracking a loan from an investor - a new Bank or Credit Card
I have an investor providing money from a HELOC (Home Equity Line Of Credit). I have also turned around and loaned this money to another company. But I want to track my outstanding balance of the debt that I owe to the HELOC. Would I / should I trackThe Zoho Meeting Video Quality Crisis
I'm evaluating Zoho One for my business in Switzerland, and I must address a critical concern that threatens our potential adoption of the platform—the persistently poor performance of Zoho Meeting's video conferencing capabilities. In today's digital-firstPay run Error
Trying to run the last payroll of the year. The payment doesn't get to the employee Due to Technical Glitch in Tool, kindly Help us and resolve IT's showing Technical Glitch from Bank Website But bank People saying contact Zoho team for further soluHow to make the default currency type in a certain module different from the base currency>
We have US dollar as the base currency. Also we have two more other currency types. In a custom module, we would like to make another currency as the default one rather than USD. Is it possible to do? How? Thank you very much!Track Contact's Employment/Account History
Thank you in advance for all of your help! Is there a way, within Zoho, to keep track of a contact's employment history? For example, if John Doe is my contact at Account 1, but leaves the company and is hired by Account 2, can I... ...maintain John DoeCRM became very slow
Plz check asap. image failed to upload , workflow doesn't runZohoCRM Workflows Not Triggering After Tool Recovery
I noticed that ZohoCRM experienced an issue earlier, and according to the status webpage (https://status.zoho.com/), all tools were reported to be fully restored as of 03:00 (PST) on December 30, 2024. However, ZohoCRM workflows are still not triggeringAPI to post drafts for social media
I we want to post draft posts to our zoho social account and then approve and schedule them within Zoho social. is this possible with for example: https://apis.zoho.com/social/v2/post TIA JonWhat do the color presents represent on the parts of the website?
I would like to customize my color palette, but I have no idea how each color relates to the parts of the website. It is labeled as uno, duo, trio, etc... Could somehow tell me how they're related or name them more intuitively? ThanksSwitch to enable or disable sent notification when close a ticket
Some time you need to turn off the notification email on closing a ticket. But the only way is in the Settings of Zoho Desk. It would be great to have a switch in the ticket just to disbale for once the notification mail when close the ticket.Deluge upload to upload file field
Trying to upload a file to a field type Upload File. I believe I have most correct. I have a merge and download from writer. I have this same script in many other functions and it works fine. I then upload the file to ZFS and get a success response However,Alternatives to using multi-select lookup field for a 1-many module relationship?
I have 2 modules where I only need multi-select lookup option on one of them and the other always has a 1-1 relationship. Do I have to use a multi-select lookup field in this case? Is there another way to solve this? Am asking because I've hit the limitNext Page