Tip 33: How to create custom forms and reports using widgets

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&nbsp;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&nbsp;Data</b>
            </div>
            <span><i class="fab fa-wpforms"></i></span>
         </div>
<table id="customers">
       <tr>
         <th>&nbsp;&nbsp;P E R S O N&nbsp;&nbsp;N A M E&nbsp;&nbsp;</th>
         <th>&nbsp;&nbsp;P H O N E&nbsp;&nbsp;N U M B E R&nbsp;&nbsp;</th>
         <th>&nbsp;&nbsp;E M A I L&nbsp;&nbsp;A D D R E S S&nbsp;&nbsp;</th>
         <th>&nbsp;&nbsp;A G E&nbsp;&nbsp;</th>
         <th>&nbsp;&nbsp;ID&nbsp;&nbsp;</th>
         <th>&nbsp;&nbsp;D E L E T E&nbsp;&nbsp;</th>
         <th>&nbsp;&nbsp;E D I T&nbsp;&nbsp;</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 :)

    • Recent Topics

    • 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 email

    • Can 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 currently

    • 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.

      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_p7j

    • UI Arabic

      can i change the member portal UI to arabic in zoho community?

    • Domain 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 Data

    • How 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 those

    • Mail 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 android

    • Password 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. As

    • Is 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 by

    • Why 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 occasions

    • Zoho 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 my

    • JunkMail 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.spa

    • My 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. Thanks

    • Capture 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 for

    • Facilitate 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 CRM

    • Response 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 already

    • Zoho 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 custom

    • How 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 Terms

    • is zoho CRM down today ?

      Is zoho CRM down today ?

    • Export email adresses to email service provider (mailchimp or other)

      Hello, Is there a way to export a list of email adresses from a search in my Zoho Creator forms to an external email service (gmail, yahoo...) and initiate at the same time an email message that I will fill and send myself ? And what about Mailchimp,

    • 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 assign

    • Problem viewing document imported from google drive.

      Hello, When I add a document via my google drive, it is impossible to preview it. I get the error “Files without extensions cannot be previewed. Download to view this file”. Could you please help me? Also, and this is more of a question: is there a way

    • Launch Blueprint or Workflow Automation via Zoho Dataprep Import

      Greetings All, I'm curious - Is it possible to trigger a Blueprint or Workflow via Data Prep import? Thanks in Advance

    • Cross module filtering is now supported in CRM

      Editions: All DCs: All Release plan: This enhancement is being released in phases. It is now available in AU, JP, and CN DCs. Help resource: Advanced filters While the feature is being released in phases, you can also request for Early Access. Early Access

    • Posibility to add Emoticons on the Email Subject of Templates

      Hi I´ve tried to add Emoticons on the Subject line of Email templates, the emoticon image does show up before saving the template or if I add the Emoticon while sending an Individual email and placing it manually on the subject line. Emoticons also show

    • 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 genuine

    • Option 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?

    • Next Page