Version 3 - History - Form List - Customers - AKA Guides - AKA Hub

Form List - Customers » History » Version 3

Lê Sĩ Quý, 08/29/2025 06:39 PM

-Lê Sĩ Quý
+# Form List - Customers
 {{TOC}}
 ## JSON Schema
 Form List không dùng FormIO vì không có input data, đơn thuần hiển thị danh sách dữ liệu từ spreadsheet. **Nếu dữ liệu chỉ giới hạn truy cập bởi ít người hoặc không cần public thì có thể quản lý data trực tiếp bằng spreadsheet.**
 ## HTML Template
 ``` html
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta name="viewport"
         content="user-scalable=no, initial-scale=1.0001, maximum-scale=1.0001, width=device-width, minimal-ui shrink-to-fit=no">
     <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Northwind</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/awesome-notifications/3.1.0/style.min.css">
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/w2ui@2.0.0/w2ui-2.0.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/awesome-notifications/3.1.0/modern.var.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/localstorage-slim"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
 </head>
 <body>
     <div id="toolbar"></div>
     <div style="position: relative; height: 800px;">
         <div id="master" style="display: inline-block; width: 100%; height: 100%;"></div>
     </div>
     <style>
         .category-img {
             object-fit: cover;
             width: 100%;
             max-height: 100%;
+        }
     </style>
     <script type="module">
         import { w2toolbar, w2grid } from "https://cdn.jsdelivr.net/npm/w2ui@2.0.0/w2ui-2.0.es6.min.js";
         var notifier = new AWN({ option: "top-right" });
         var sid = ls.get("sid");
         var email = ls.get("email");
         var $ds = {};
         var master;
         $(function () {
             new w2toolbar({
                 box: "#toolbar",
                 name: "toolbar",
                 items: [
+                    {
                         type: "menu", id: "sales", icon: "w2ui-icon-info", text: "Sales",
                         items: [
                             { id: "customers", text: "Customers", icon: "fa fa-user" },
                             { id: "orders", text: "Orders", icon: "fa fa-file-text" },
+                        ]
                     },
                     { type: 'break' },
+                    {
                         type: "menu", id: "operations", icon: "w2ui-icon-settings", text: "Operations",
                         items: [
                             { id: "employees", text: "Employees", icon: "fa fa-address-card" },
                             { id: "products", text: "Products", icon: "fa fa-archive" },
                             { id: "categories", text: "Product Categories", icon: "fa fa-sitemap" },
                             { id: "suppliers", text: "Suppliers", icon: "fa fa-user" },
                             { id: "shippers", text: "Shippers", icon: "fa fa-shopping-cart" }
+                        ]
                     },
                     { type: "spacer" },
+                    {
                         type: "menu", id: "auth", text: email,
                         items: [
                             { text: "Logout", id: "logout", icon: "fa fa-sign-out" }
+                        ]
+                    }
                 ],
                 onClick(event) {
                     switch (event.target) {
                         case "sales:customers": {
                             window.open("<?= base ?>?url=/form/customers", "_top");
                             break;
+                        }
                         case "sales:orders": {
                             window.open("<?= base ?>?url=/form/orders", "_top");
                             break;
+                        }
                         case "operations:employees": {
                             window.open("<?= base ?>?url=/form/employees", "_top");
                             break;
+                        }
                         case "operations:products": {
                             window.open("<?= base ?>?url=/form/products", "_top");
                             break;
+                        }
                         case "operations:categories": {
                             window.open("<?= base ?>?url=/form/categories", "_top");
                             break;
+                        }
                         case "operations:suppliers": {
                             window.open("<?= base ?>?url=/form/suppliers", "_top");
                             break;
+                        }
                         case "operations:shippers": {
                             window.open("<?= base ?>?url=/form/shippers", "_top");
                             break;
+                        }
                         case "auth:logout": {
                             ls.remove("sid");
                             ls.remove("email");
                             window.open("<?= base ?>?url=/form/login&callback=<?!= url ?>", "_top");
                             break;
+                        }
+                    }
+                }
             });
             master = new w2grid({
                 name: "master",
                 box: "#master",
                 header: "Customers",
                 show: {
                     header: true,
                     footer: true,
                     toolbar: true,
                     toolbarAdd: true,
                     toolbarEdit: true
                 },
                 columns: [
                     { field: "recid", hidden: true },
                     { field: "CompanyName", text: "Company Name", size: "20%", sortable: true },
                     { field: "CustomerID", text: "Customer ID", size: "10%", sortable: true },
                     { field: "Contact Name", text: "ContactName", size: "20%", sortable: true },
                     { field: "Address", text: "Address", size: "20%", sortable: true },
                     { field: "City", text: "City", size: "10%", sortable: true },
                     { field: "Region", text: "Region", size: "10%", sortable: true },
                     { field: "Country", text: "Country", size: "10%", sortable: true }
                 ],
                 searches: [
                     { type: "text", field: "CompanyName", label: "Company Name" },
                     { type: "text", field: "CustomerID", label: "Customer ID" },
                     { type: "text", field: "ContactName", label: "Contact Name" },
                     { type: "text", field: "Address", label: "Address" },
                     { type: "text", field: "City", label: "City" },
                     { type: "text", field: "Region", label: "Region" },
                     { type: "text", field: "Country", label: "Country" }
                 ],
                 onClick(event) {
                     let record = this.get(event.detail.recid);
                     if (record) {
                         // Do nothing
+                    }
                 },
                 onAdd: function (event) {
                     window.open('<?= base ?>?url=/form/crud-customer', '_blank');
                 },
                 onEdit: function (event) {
                     let recid = event.detail.recid;
                     recid && window.open('<?= base ?>?url=/form/crud-customer/' + recid, '_blank');
                 },
             });
             if (sid) {
                 google.script.run
                     .withSuccessHandler(onCheckSidSuccess)
                     .withFailureHandler(onInvalidSid)
                     .checkSid(sid);
+            }
             else {
                 onInvalidSid();
+            }
         });
         function onInvalidSid(err) {
             if (err) {
                 notifier.warning(err.message);
+            }
             else {
                 let url = "<?!= base ?>?url=/form/login&callback=<?!= url ?>";
                 notifier.modal(`<b>You need to login to access this page.</b><br><a href="${url}">👉 <b>Login</b></a>`)
+            }
+        }
         function onCheckSidSuccess(valid) {
             if (valid) {
                 google.script.run.withSuccessHandler((ds) => {
                     $ds = ds;
                     google.script.run.withSuccessHandler((parents => {
                         master.clear();
                         let recs = [];
                         parents.forEach((parent) => {
                             let obj = JSON.parse(parent.Document);
                             obj.recid = parent.Id;
                             recs.push(obj);
                         });
                         master.add(recs);
                     }))
-Lê Sĩ Quý
+                        .runSql("Default", "where G = 0 and H = 'Customers' options no_format");
-Lê Sĩ Quý
+                })
                     .loadDatasources("<?!= datasource ?>");
             } else {
                 onInvalidSid();
+            }
+        }
     </script>
 </body>
 </html>
 ```
 ## Giải thích Code
 Form List Customers sử dụng cácthư viện sau:
 - [jQuery](https://jquery.com/) để khởi tạo grid sau khi page load xong.
 - [localstorage-slim](https://github.com/digitalfortress-tech/localstorage-slim) để đọc sid & email để bỏ qua bước login nếu trước đó đã login thành công. Trường hợp login không thành công thì sẽ thông báo và điều hướng đến trang login.
 - [Notyf](https://carlosroso.com/notyf/) hiển thị thông báo.
 - [w2ui](https://w2ui.com/web/home) cung cấp các thành phần UI cơ bản và nâng cao, ví dụ: toolbar và grid, dialog...
 - Các thư viện đều được load từ CDN để tối ưu tốc độ, đơn giản hóa HTML Templated. Các bạn cần có kiến thức trong phần yêu cầu để hiểu logic của code JS + templated nhúng trong page.
 - Trong page này gọi đến
   - Hàm backend **checkSid** sid lưu trữ có khớp với giá trị trên server, nếu đúng thì sẽ sử dụng email trả về, còn sai sẽ điều hướng đến trang login
   - Hàm backend **loadDatasources** để tải các dữ liệu tham chiếu phía client, ví dụ danh sách Products
   - Hàm backend **runSql** thực hiện query nâng cao trên Datasource chỉ định, ví dụ chỉ hiển thị ra danh sách Orders được tạo bởi Saler đang login
 *Vì Customers được lưu trong dạng document với cơ chế NoSQL with Google Forms nên chúng ta phải có bước tách các thuộc tính của Employee rồi mới thực hiện việc binding thay vì binding trực tiếp như Categories, Shippers*
 ``` javascript
 let obj = JSON.parse(parent.Document);
 ```
 ## Demo
-Lê Sĩ Quý
+- Link: https://script.google.com/macros/s/AKfycbwIjB-hULVZdfCtsXFPg4Af_8WoKx2AFf85KMVwnsO_WkeAXW3zarT6vZNFVfwccz1_sA/exec?url=/form/orders
-Lê Sĩ Quý
+- Account: user@northwind.com
 - Password: user

Project

General

Profile

AKA Guides

Form List - Customers » History » Version 3