Title1
Title2
Title3
Login
Link
Search
教學頻道
中信金融管理學院
點二下資訊社
新化社區大學
GAS+購物車開發
GAS專案
GAS+購物車開發
Google表單實戰電商購物車
GAS+LineBot開發
外帶內用管理
購物車管理
線上打卡系統管理
萬用表單5
LineBot 線上書籍
PHP專案
網站程式設計-PHP(10502)
網站程式設計-PHP
PHP SMARTY 樣板引擎
SMARTY樣板
課程教材
雲端工具入門
行動應用企劃人員養成班
萬用表單5
GAS+LineBot開發
研習
萬用表單5
鐵人賽-Google Apps Script整合運用
GAS+LineBot開發
樂齡3C學習不斷電
臺東專科學校
GAS 開發 LineBot 自動接單系統
德鍵
112行動應用企劃人員養成班
111網頁前端設計工程師培訓班
110網頁前端設計工程師培訓班
網頁前端設計工程師培訓班
old
網頁前端設計與開發運用培訓班
Javascript & JQUERY
免費釋出專案
萬用表單
自動資料查詢
台南社大
113-01-雲端工具入門
112-02-AI自動管理
112-01-用QRCODE打造自動化環境
110-01-用雲端打造自動化環境
用雲端打造自動化環境
Google雲端智慧王
讓雲端工具提昇工作效率
Google 速學工作術
台南市總圖
教你如何使用LINE Bot機器人增加工作效率
Google雲端工具基礎應用
Google雲端工具進階應用
工作自動化與行銷(台南社大)
全部教材
台南市人力發展中心
Google工具應用實務班
企業課程
鐳達實業有限公司
GAS研習-20200726
中正大學-GAS研習
將軍圖書館
Google雲端工具基礎應用
Google雲端工具進階應用
南方創客
GitHub 衍伸應用
Google 應用工作術
永康社大
用雲端打造自動化環境(110-春季班)
用雲端打造自動化環境
南關社大
電腦、手機生活應用
遠端桌面
公司業務
傳送檔案
adwcleaner
W10 更新
客戶網站
最近完工
深雋設計有限公司
新化社大校務系統
靚品科技有限公司
5C Precision Co., Ltd.
BALANCE 1
RWD網站
東北關廟麵
曼馱有限公司
永宸昕有限公司
昌美實業社
形象網站
勇信機械有限公司
GAS專案
聯絡我們&案件委託
所有書籍
「鐵人賽-Google Apps Script整合運用」目錄
MarkDown
12. Bootstrap Table(二)
1. Google Apps Script介紹
2. 在試算表儲存資料(一)
3. 在試算表儲存資料(二)
4. 在試算表儲存資料(三)
5. 專案授權&在試算表撈出資料
6. Web 服務&API 服務
7. GAS樣版引擎
8. 建立共用函式
9. 建立路由與請求
10. 全域變數&權限
11. Bootstrap Table(一)
12. Bootstrap Table(二)
13. 表單頁面(一)
14. 表單頁面(二)
15. 表單結構
14. 表單頁面(二)
鐵人賽-Google Apps Script整合運用 ========================== 想法 -- 1. 當按下「新增」、「編輯」時,會自動將畫面轉至「表單頁面」等待輸入資料 2. 流程指標為 op=form\_custom 3. 「新增」sn=''、「編輯」sn=xxx:用流水號來判斷要做新增或編輯 4. 這裡先用固定畫面處理,待日後將之用樣版語法,屆時可以套用到任何管理系統 程式 -- 1. 路由: ```javascript // 客戶管理 表單 Route.path("form_custom", form_custom); ``` 記得函式 form\_custom 要先建立,不然會報錯 2. form\_custom(e) ```javascript /*======================================== 客戶資料 表單 =========================================*/ function form_custom(e){ } ``` 3. 判斷是否接收到 sn ```javascript /*======================================== 客戶資料 表單 =========================================*/ function form_custom(e){ let content = ''; // 判斷是否接收到 sn let sn = e.parameter.sn ? e.parameter.sn : ''; let title = sn ? '客戶 編輯表單' : '客戶 新增表單'; content = `
${title}
`; content += render('form_custom', {}); return render('tmp', {content: content}, title); } ``` 4. 上面有用到 form\_custom 的樣版,故也要先建一個樣版 form\_custom.html 5. 表單結構規劃 表單標題:form\_label 表單名稱:form\_name 表單預設值:form\_value 表單寬度:form\_width => 1~12 表單類別:form\_kind => 隱藏|簡答|段落|下拉選單|單選|複選 表單選項:form\_option 表單是否驗證:form\_validate 表單說明:form\_readme 表單暫留字:form\_placeholder ```javascript
簡答
*
(表單說明)
段落
*
(表單說明)
表單預設值
下拉選單
(表單說明)
選單1
選單2
選單3
選單4
單選
(表單說明)
單選1
單選2
單選3
單選4
``` 6. 本單元先將有用到的類型輸入,待看出規則後,再來套用樣版語法,讓後面要做的其他管理系統也可以套用該樣版。 在 form\_custom.html 把結構先註解以利處理 ```javascript ``` 7. 表單主架構 ```javascript
送出
``` 8. 畫面 ![](https://i.imgur.com/uQuWV2Q.png) 9. 每個表單欄位,視為元件,按類型套入即可, 客戶管理用到 隱藏、簡答、段落三種類別,另 下拉選單、單選、複選,待這裡處理好後,再來擴充。 10. form\_custom.html 把元件放入後,將 label、name、id置換掉,其他如 value、placeholder、是否必填、表單說明再依需求設定在「表單結構」中, 最終我們希望達到,設定「表單結構」,然後表單畫面自動完成。 ```javascript
客戶名稱
*
(表單說明)
客戶電話
*
(表單說明)
客戶地址
*
(表單說明)
備註
*
(表單說明)
表單預設值
送出
``` 11. 畫面 ![](https://i.imgur.com/ThZ0ufc.png)