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

        • Default Sorting on Related Lists

          Is it possible to set the default sorting options on the related lists. For example on the Contact Details view I have related lists for activities, emails, products cases, notes etc... currently: Activities 'created date' newest first Emails - 'created

        • Simplified Call Logging

          Our organization would like to start logging calls in our CRM; however, with 13 fields that can't be removed, our team is finding it extremely cumbersome. For our use case, we only need to record that a call happened theirfor would only need the following

        • Sub form doesn't as formula field

          Is it possible to get formula field in sub form in futures?

        • Signup forms behaviour : Same email & multiple submissions

          My use case is that I have a signup form (FormA) that I use in several places on my website, with a hidden field so I can see where the contact has been made from. I also have a couple of other signup forms (FormB and FormC) that slight differences. All

        • Week date range in pivot table

          Hello, I need to create a report that breakouts the data by week.  I am using the pivot table report, and breaking out the date by week, however the date is displayed as 'Week 1 2014' format.  Is there anyway to get the actual dates in there? ex. 1/6/2014-1/12/2014 Thanks,

        • How do I get Status History data of my Projects?

          I want to build a table in Zoho Analytics that Groups by Date, when Projects entered a certain status. I cannot find Status History or any such useful data available in the Setup of my Data Source sync. Please advise how I can achieve this?

        • Is it possible to hide fields in a Subform?

          Since layout rules cannot be used with Subforms, is there another way, or is it even possible, to hide fields in a subform based on a picklist fields within said subform? For example, if the Service Provided is Internet, then I do not want to see the

        • Single Task Report

          I'd like a report or a way to print to PDF the task detail page. I'd like at least the Task Information section but I'd also like to see the Activity Stream, Status Timeline and Comments. I'd like to export the record and save it as a PDF. I'd like the

        • Weekly Tips :Instantly find what you need with Attachment Viewer

          Your inbox must be packed with project emails, shared notes, and scattered attachments. You are looking for one specific file—a presentation slide or maybe a media clip from a team update—but don’t want to dig through endless email threads or switch between

        • Missing Zoho Desk integration option for form workflows

          According to the help page "Configure Zoho Desk integration in form workflows" we should be able to select Zoho Desk as an integration target but when I open the integrations list then Zoho Desk is not being listed in it. We are on the Premium plan which should already support Zoho Desk integrations.

        • Search in module lists has detiorated

          Every module has a problem with the search function :-/

        • CRM x WorkDrive: File storage for new CRM signups is now powered by WorkDrive

          Availability Editions: All DCs: All Release plan: Released for new signups in all DCs. It will be enabled for existing users in a phased manner in the upcoming months. Help documentation: Documents in Zoho CRM Manage folders in Documents tab Manage files

        • Gantt for 2 or more projects

          Hello, I'm trying the free version of your produtc. It is veryyy good!!!! I don't know if in the Standard plan, I can overview a Gantt Graph for 2 or more Projects Milestone. This would be very helpfull for managing teams and taking decisions about who I will assign a task to. In the paid plan Do I have this possibility? Thank you.

        • Integrating a Zoho Project Gantt Chart into Reports

          Is is possible to integrate a Zoho Project Gantt Chart into a Zoho Report Dashboard. I am in the process of creating Project Status Dashboards for the projects that we track in Zoho Projects and I would like to incorporate the gantt chart within Reports.  Please let me know! Thanks

        • ZOHO BOOKS - EXCESSIVELY SLOW TODAY

          Dear Zoho Books This is not the first time but it seems to be 3 times per week now that the system is extremely slow. I work on Zoho Books 95% of my day so this is very frustrating. Zoho you need to do something about this. I have had my IT guy check

        • Gantt Chart - Zoho Analytics

          Are there any plans to add Gantt Charts capabilities to Zoho Analytics?

        • Displaying related quotes in sales order and back

          Hi, My colleague liked to see to which sales orders, the quote has been converted. Quote shows Invoices, but not SO. Same, they would like to see the quotes in the sales order, as they can see invoices, packages, shipment, How can we achieve this ? Thank

        • Tip of the Week #71–Auto-move incoming messages to the right inboxes with keywords

          We all know that customer-facing teams, especially your sales and support teams, can’t afford to miss even a single customer conversation. But sometimes, sales queries or support requests can easily get lost in a crowded inbox or even end up in the wrong

        • Clearing Fields using MACROS?

          How would I go about clearing a follow-up field date from my deals? Currently I cannot set the new value as an empty box.

        • Migrating a Zoho Forms form into Zoho Creator

          Hi, How can I migrate my Zoho Forms form into Zoho Creator? Thanks. Truly, Emad

        • Is there any way to recall an email sent using Zoho CRM?

          If an email is sent using Zoho Mail, there is a recall option/functionality that is available to the sender. Is there any way to recall an email if it was sent using Zoho CRM? I can't seem to find that option. Any help would be appreciated.

        • Quick Create needs Client Script support

          As per the title. We need client scripts to apply at a Quick Create level. We enforce logic on the form to ensure data quality, automate field values, etc. However, all this is lost when a user attempts a "Quick Create". It is disappointing because, from

        • 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 with reports due to "Connected" items change - Yes this IS a problem

          Now that the change has been made to use "connected" items I can no longer run the reporting I need in CRM. I should be able to start with Deals as the parent, connect down to the Account (Account_Name) on the deal as the child, then to any child items

        • Zoho sheet desktop version

          Hi Zoho team Where can I access desktop version of zoho sheets? It is important as web version is slow and requires one to be online all the time to do even basic work. If it is available, please guide me to the same.

        • Introducing notifications in the vendor portal

          Imagine this: You're a recruiter working with multiple vendors on a high-volume hiring project. You’ve just updated a job description after a last-minute change from the hiring manager. One of your vendors, however, is still working off the older version

        • CRM limit reached: only 2 subforms can be created

          we recently stumbled upon a limit of 2 subforms per module. while we found a workaround on this occasion, only 2 subforms can be quite limiting in an enterprise setting. @Ishwarya SG I've read about imminent increase of other components (e.

        • LESS_THAN_MIN_OCCURANCE - code 2945

          Hi I'm trying to post a customer record to creator API and getting this error message. So cryptic. Can someone please help? Thanks Varun

        • How to update "Lead Status" to more than 100 records

          Hello Zoho CRM, How do I update "Lead Status" to more than 100 records at once? To give you a background, these leads were uploaded or Imported at once but the lead status record was incorrectly chosen. So since there was a way to quickly add records in the system no matter how many they are, we are also wondering if there is a quicker way to update these records to the correct "Lead Status". I hope our concern makes sense and that there will be a fix for it. All the best, Jonathan

        • mask Customer phone number and agents cant see customer phone number

          Is there any way we can integrate Zoom Phone with Zoho CRM while ensuring that customer phone numbers remain masked? We need a solution where agents can make outbound calls but cannot see customer phone numbers. Please let us know if there is any solution

        • Analytics for notes created

          Is there a way I can see how many notes were created per day? Via reporting or analytics?

        • Add Custom Reports To Dashboard or Home Tab

          Hi there, I think it would be great to be able to add our custom reports to the Home Tab or Dashboards. Thanks! Chad

        • Cannot update Recurring_Activity on Tasks – RRULE not accepted

          Hello, I am trying to update Tasks in Zoho CRM to make them recurring yearly, but I cannot find the correct recurrence pattern or way to update the Recurring_Activity field via API or Deluge. I have tried: Sending a string like "RRULE:FREQ=YEARLY;INTERVAL=1"

        • Add image to report...

          Greetings, I send a weekly color coded report via Creator email. I would like to add the legend somewhere in the report. Header, footer where ever. I have the legend saved on Google Drive and can access it via shared link. Sure someone has wanted to add

        • More controls for User Fields in CRM

          Dear All, We are here with a minor but crucial enhancement to the user fields—now set accessibility permissions to the records for user field. User field allows you to extend co-ownership of records to your peers. You can collaborate with them for certain

        • Calls to accounts rather than leads or contacts?

          So..... We have a dilemma and I'm hoping someone has encountered this before and figured out a fix. We have just migrated to Zoho. It's great.....expect for how "Calls" are handled.... We are B2B. We do not use the leads module. A "Lead/Prospect" for

        • Image Upload Field | Zoho Canvas

          I'm working on making a custom view for one of our team's modules. It's an image upload field (Placement Photo) that would allow our sales reps to upload a picture of the house their working on. However, I don't see that field as a opinion when building

        • Power of Automation :: Automated 'Delayed & Closed' Status Update Based on Due Date

          Hello Everyone, A custom function is a software code that can be used to automate a process and this allows you to automate a notification, call a webhook, or perform logic immediately after a workflow rule is triggered. This feature helps to automate

        • Lead Blueprint transition in custom list view

          Hi, Is It possible to insert the Blueprint transition label in a custom Canvas list view? I am using Lead module. I see the status, but it would be great if our users could execute the Blueprint right from the list view without having to enter the detailed

        • Range names in Zoho Sheet are BROKEN!

          Hi - you've pushed an update that has broken range names. A previously working spreadsheet now returns errors because the range names are not updating the values correctly. I've shared a video with the support desk to illustrate the problem. This spreadsheet

        • Next Page