Hi guys,

Let me share a tip to develop original business form and document such as invoice or receipt in Zoho creator.

Problem:

When you have to write a template of invoice with HTML in Zoho creator / Deluge script, what you would do is to write a function to return HTML strings so that the invoice would be generated dynamically with client name, product and whatever.

Here is an example of codes from generateInvoice function of Order Management app provided by Zoho officially.

This function will be called inside a Page.

1. string Invoice.generateInvoice(string recId) {
2. output = output + "<div class='invDiv'>";
3. output = output + "<div class='invHead'>Invoice</div>";
4. //Customer Details
5. output = output + "<div style='width: 80%;margin: 30px auto;margin-bottom: 0px;text-align:right;'><span class='keyCol'>Date: </span><span class='valCol'>" + zoho.currentdate + "</span></div>";
6. output = output + "<table class='tableSize' align='center'><tr><td style='width:50%;vertical-align: top;'>";
7. output = output + "<table border='1' align='left' cellspacing='0' style='border-color:#EEE;width:95%;margin:12px 0px 0px 0px' id='billingAdd'>";
8. output = output + "<tr align='left'><td class='rowHead' style='width:40%'>Name</td><td class='rowVal' style='width:60%'>&nbsp;" + customerRow.First_Name + " " + customerRow.Last_Name + "</td></tr>";
9.              ......
10.         return output;
11. }

Honestly, this way of developing a template doesn't seem the best way to me.

Solution and its benefits:

Build a lightweight and simple API to return HTML / CSS string and call it from the script instead of building HTML there.

Here is bundled sets of codes to build the API in a minute in my github repository.

You can write template of business documents with Pug (formerly known as "Jade") which is a template engine for Javascript.

The syntax is simple and modern.

Also bizform-generator can be hosted on AWS (Labmda and API Gateway) in a minute thanks to "Serverless framework".

https://serverless.com/

Sample codes in Zoho Creator:

1. Build a function in Zoho creator to call the bizform-generator you have built

1. string Docs.generateWithAPI(int recID, string templateName)
2. {
3.       output = "";
4.       params = Map();
5.       // build your own templateParams as per templateName with your app's actual forms and fields. The codes below is just a sample.
6.       if(templateName == "example") {
7.             order = Orders[ID == recID];
8.             clientName = order.clientName;
9.             note = order.note;
10.             items = List();
11.             for each item in order.Items {
12.                   itemMap = Map();
13.                   itemMap.put("name", item.name);
14.                   itemMap.put("amount", item.amount);
15.                   itemMap.put("price", item.price);
16.                   items.add(itemMap);
17.             }
18.             templateParams = {"clientName":clientName, "items":items, "note", note};
19.       } else if (templateNmae == "otherTemplate") {
20.             // build templateParams for "otherTemplate"
21.        }
22.       params.put("templateParams",templateParams);
23.       params.put("templateName",templateName);
24.       response = postUrl("https://subdomain.amazonaws.com/dev/bizform",params.toString());
25.       htmlStr = response.getJSON("html");
26.       output = htmlStr;
27.       return output;
28. }

2. Prepare a generalized Page for any document

1. htmlpage APIDoc(id, template_name)
2. displayname = "Document"
3. print = true
4. content
5. <%{
6. %>
7. <%=thisapp.Docs.generateWithAPI(id.toLong(),template_name)%>
8. <%
9. }%>

3. Prepare a function to show the specific document "Invoice"

1. void Docs.viewInvoice(int recID)
2. {
3.       templateName = "example";
4.       openUrl("#Page:APIDoc?id=" + recID + "&template_name=" + templateName + "&zc_Header=false","Popup Window");
5. }

In this way, you could have as many kinds of templates as you need easily by adding your templates in the API and building corresponding templateParams in Docs.generateWithAPI.

Example of pug template are here.

See README to see how to deploy and host the API etc...

Please let me know if you have any questions or feedbacks. Thanks.