Invoice Calculator — Zoho Creator
Hi friends, as told you in my previous blog I hear by would like to share how to design an invoice calculator using Zoho Creator. Again, dont forget that I am not a coder. I am learning and sharing what I learnt. I find a huge scope here for non-coders like me to get into app designing and achieve your dream applications to increase your work efficiency.
Note: Always happy to receive your suggestion / comment / critic which would help me to expertise in my work.
Invoice Calculator
When you are into a service firm and have to raise invoice every time to get the money for your services you have to do the following 3 steps
· Prepare Invoice in Word
· Update the details in a separate tracker (excel)
· Print & Courier the prepared invoice.
In this blog we will learn how to design an invoice calculator. A one time effort. Once you prepare this, next time you just have to enter the necessary details and the system will take care of updating your tracker and helping you with a pdf or word document which you can just print and courier. This sounds cool right. Lets start.
· Go to creator.zoho.com
· Sign Up
· Click on “Create Application”
· A dash board of all the applications are available
Click on “Create from scratch” as shown in this screen shot
· Enter the name of the application (Here I have entered Invoice Calculator) and click on “Create” button
· Create App opens with lot of options to Drag and Drop the required fields as show in the below image
· Invoice calculator means it will have lot of number columns, numbers of decimal type, percentage type, formulas to calculate the amount, etc. So choose the fields which are appropriate accordingly. I will teach you what I did and how I did shortly
· Invoice Date — I chose date field
· Invoice Number — Number field (Note I have checked the “No Duplicate” option which is under field properties on the right side. This way we can stop duplicate entries at the beginning itself.)
· Candidate Name — Single Line
· Date of joining — Date field
· Description — This is for invoice details we use in recruitment (You can put whatever convenient name you want to use)
· CTC per annum — Number field
· Manpower Recruitment Charges(MRC) — Decimal (as my service charges can be 8.33% or 10% or more)
· Invoice Amount — Formula (Here I want the system to auto calculate the amount based on MRC I chose. Formula I chose here is ((MRC/100)*CTC per annum). See the below images to know the pictorial steps
· When you drag and drop the “Formula” field, a pop up comes up as shown in the below image
· Here type the brackets, plus or minus and select the respective fields which are under “Refer Fields” column inside the “Calculate Expression” popup. See below the example fyr.
· Once you are done with typing the formula, click on “Done” button.
· You need to click on “Check” box in the fields property of formula field type to tell Creator to display the calculation. I wanted the calculation to be displayed so I chose this option. If your business doesn’t want the percentage to be shown you can un-check the same. As show in the below image.
· I just learnt the formula. However it took time for me to crack one challenge.
I used the formula field and put the calculation for Billing Amount, Central GST, State GST.
My formulas are as follows
Billing Amount = (MRC / 100 )* CTC_Per_Annum
CGST = (9 / 100) * ((MRC / 100) * CTC_Per_Annum)
(Above means, 9 percent of Billing Amount whose formula is (MRC/100)*CTC_Per_Annum)
SGST = (9 / 100) * ((MRC / 100) * CTC_Per_Annum)
(Same as above)
Now I need to Total Amount. So logically I chose formula field and tried to add the Billing Amount + CGST + SGST. However, formula doesn’t give another formula under “Refer Fields”. This is a challenge in Zoho Creator. So we have to put the whole formula again with plus between each value. Mentioned below the same fyr
Grand Total = (input.MRC / 100 * input.CTC_Per_Annum) + (9 / 100 * input.MRC / 100 * input.CTC_Per_Annum)+(9 / 100 * input.MRC / 100 * input.CTC_Per_Annum)
Creator Hack:- When once I created formula for Billing Amount or CGST or SGST, I started to copy the Deluge generated formula and paste in a separate sheet. Then for Grand Total formula field I just copied each of the copied formula and put a plus between them. This way it did not confuse me to miss or misplace any fields and the formula worked well. Below image will show you where you get the deluge created formula (Expression).
· I have added few more fields as I wanted to store data for my future references.
· Now I have created the Invoice, Report is anyways auto generated by good boy / girl whatever Zoho Creator ;)
· I changed the Button Name of “Submit” to “Print”. Hahaha how will it work. Its just the name I changed and not the function.
· I was told that I can active Print Option thru header of HTML page.
· Help for the same is available in Zoho Creator Forum.
· However this did not solve my problem. As I am yet to step into HTML part of Zoho.
Don’t worry, I figured out an alternate way (of course with the guidance of my Homepreneur friend Deepa Govind). And the procedure for the same as follows fyr.
· Go to edit mode → Reports → Click on the report with which you would be creating the printable format
· Click open that report. Here I clicked on “Invoice Sheet Report”
· You will get “Report Settings” page as shown in the below image
· In the above screen shot, you would see “Record Summary” as pointed out. In your edit mode, click on that tab.
· Then click on “Create Record Summary”
· When you click on “Create Record Summary” it opens with great options to design your report with existing fields which you have created for your invoice. Pick and chose which one you want and where. Please note that once you insert these fields and design your Report; and when you enter the details, it automatically gets filled which you just have to print.
· Idea is that you enter one form here Invoice Report form. The data gets saved in the system which you can extract to excel any time. Then it also gives you option to save the invoice and take print out of the same which you can courier to your customers later. Follow my instructions for the same.
· When you click Create, you will see below page. Here Creator gives you great option on Layouts. Chose whichever you feel is suitable for your application. I chose the first one i.e. One Column. Click “Create”
· When you click “Create” below pages comes. If you observe to the left of you on the screen under Invoice Sheet, you will see all the fields which you chose to be part of your initial data entry. Now either drag and drop to the center page or first chose if you want a table in place or you want to add the logo first, then a Paragraph (where you can type the page header, I typed Invoice in mine as shown in the next image).
· If you observe my Invoice Design, I have inserted my company logo, then chose a Paragraph option and inserted “To Address”, Invoice Date, Invoice Number & GST No in that paragraph and arranged as above. Then I chose a Table with 7 columns and two rows and inserted the required fields accordingly. Do some permutation and combinations till you achieve your desired look. I did lots. It’s a great learning.
· PLEASE DON’T FORGET TO SAVE EACH TIME BEFORE LEAVING THE PAGE ELSE YOU HAVE TO REDO IT. Save button is on top right corner as show in the above image.
· Now select the record which you want to be printed or saved to a pdf format by checking it as show with the marker in the above image.
· Now click on the button which is next to the search and Plus sign on top right corner. I don’t know what is it called ;).
· Select “Print as Record Summary” as shown in the below image. (Note in the below image the record is in the detailed format. In the above image it is in the List format. Just the display format is different otherwise its all same).
· When you click on that, you will get the print option with below image which you can give for print.
Creator Hack: After doing all these when I saw the print out, the header and footer which are default created by Zoho Creator were present. i.e. “Zoho Creator” and “https://app.zohocretor………….” . I don’t want this to go to my clients when I courier the invoice. To remove that click on “More Settings” which is under Print commant box as shown in the below image. Under this you just have to UnCheck to remove the Header and Footer as shown in the below image.
Yuppiee here goes your own app created without any coding knowledge
The Invoice Calculator
Isn’t it super easy? Try Zoho Creator and get your technical requirement done without much dependency on techies.
