In the previous chapter, you learned to create interactive web pages using ContentService, HtmlService, doGet, and doPost functions. You also built RSS feed and timesheet applications.
In this chapter, you will learn:
To create a workflow application
The workflow involved in an order processing system
A Google Sheet holds all data, needed to create a workflow application, on various steps. It acts as the backbone of the order processing system.
The following are the steps involved in the order processing workflow:
The user opens an online form and sends an order by mentioning the item, quantity, delivery address, and mode of payment.
The Google Sheet sends a confirmation e-mail to both the User and Accounts section.
The Accounts section verifies the payment and forwards it to the Order Processing section.
The Order Processing section dispatches the order to the delivery address and updates shipment details.
The user confirms the delivery.
You can also refer to the pictorial representation of these steps in the following image:
Various forms, e-mails, and their components are explained here:
User form:
Item
Unit price
Quantity
Total price (calculated)
Delivery address
Phone
Payment details
Confirmation e-mail to the user:
Order number
Item
Unit price
Quantity
Total price
Delivery address
Phone number
Payment details
E-mail to the Accounts section:
It is same as the user confirmation e-mail; however, an additional link to the dispatch form is included.
The dispatch form:
Order number
Item
Quantity
Delivery address
Shipment details
In the Code.gs file, define the following global variables:
// Replace with your spreadsheet's ID.
var ss = SpreadsheetApp
.openById("spreadsheet's id");
var SheetOrders = ss.getSheetByName("Orders");
var SheetStock = ss.getSheetByName("Stock");Create the doGet function:
function doGet(){
var template = HtmlService.createTemplateFromFile("Order");
var html = template.evaluate();
return HtmlService.createHtmlOutput(html);
}The preceding function returns the Order form from the Order.html template. Create a new HTML file named Order and enter the following code in it:
<!-- Order.html -->
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<form>
<table>
<tr>
<td><label>Select Item:</label></td>
<td>
<select>
<option value="Item 1">Item 1</option>
<option...To enhance the Order form, update the doGet function as follows:
function doGet(){
var template = HtmlService.createTemplateFromFile("Order");
template.pricelist = getPrice();
var html = template.evaluate();
return HtmlService.createHtmlOutput(html);
}The price list is assigned to the template as a 2-dimensional array and is returned by the function shown here:
function getPrice(){
var data = SheetStock.getDataRange().getValues();
// remove header row.
data.shift();
return data;
}In the Order.html file, update the select tag markup as shown in this code snippet:
<td>
<select id="item" name="item">
<? for(var i in pricelist){ ?>
<option value="<?= pricelist[i][0] ?>" > <?= pricelist[i][0] ?></option>
<? } ?>
</select>
</td>The drop-down items will reflect whatever is included or updated in the Stock Sheet. The default item will be the top-most or the first item in the list...
As mentioned earlier, we will create the dispatch form now. Create a new HTML file named as Dispatch and enter the following code in it:
<!-- Dispatch.html -->
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="//ssl.gstatic.com/docs/script/css/add-ons1.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/ 1.10.2/jquery.min.js"></script>
<script>
// On document load, assign submit function to the submit
// button's click event
$(function(){
$("#btnSubmit").click(submit);
});
function submit(){
// Remove already displayed messages, if any.
$("#success,#error").remove();
this.disabled = true;
google.script.run
.withSuccessHandler(function(msg,elem){
elem.disabled = false;
showSuccess(msg,elem);
})
.withFailureHandler(function...As soon as the dispatch person enters the shipment details in the dispatch form and submits it, the script should update the shipment details in the spreadsheet and should send a notification e-mail to the user. So, we will add the dispatchOrder server function to handle these tasks:
function dispatchOrder(form){
// Shipment details column number minus 1.
const SHIPMENT_DETAILS = 9;
var orderNumber = form.order_number;
var deliveryAddress = form.delivery_address;
var userEmail = form.email;
var shipmentDetails = form.shipment_details;
var data = SheetOrders.getDataRange().getValues();
for(var i = 0; i < data.length; i++){
if(data[i][0] == orderNumber){
SheetOrders.getRange(i+1, SHIPMENT_DETAILS+1)
.setValue(shipmentDetails);
var htmlBody = "<p>Order number: "
+ orderNumber + " has been dispatched to </p>"
+ "<p>" + deliveryAddress + "</p>"
+ "<p>By...If the user receives the items, then he/she clicks on the link to acknowledge. The same published URL is used this time too with an additional delivered query string.
For example:
https://script.google.com/macros/s/AKfycbwaqlj_kBAn9LLav0qv6GmXlWk-hwIosHA- 1_1YoMutiiuGy84/exec?order_number=1451875765851&delivered=true
To handle this query, the doGet function should be updated again as follows:
function doGet(e){
var delivered = e.parameter.delivered;
if(delivered){
// If order delivered then just update delivery date.
updateDelivery(e);
// Returning text content is enough, HtmlService not needed.
return ContentService.createTextOutput("Thank you!");
}
var orderNumber = e.parameter.order_number;
if(orderNumber){
/*
* If order number present in query string
* then serve dispatch form to order processing unit.
*
*/
var template = HtmlService.createTemplateFromFile(...In this chapter, you learned and created a useful real-world order processing application. In the next chapter, you will learn to overcome script in maximum execution time and learn to use script code from other script files or libraries including OAuth library. You will also learn to create add-ons.
© 2016 Packt Publishing Limited All Rights Reserved
