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.

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 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 class="editBtn"id="EditButton" >

<div onclick="EditDataa(this)" >

<div>

</div>

<span><i class="fas fa-edit"></i></span>

</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 :)