線上書籍

Home

鐵人賽-Google Apps Script整合運用

想法
  1. 當按下「新增」、「編輯」時，會自動將畫面轉至「表單頁面」等待輸入資料
  2. 流程指標為 op=form_custom
  3. 「新增」sn=''、「編輯」sn=xxx：用流水號來判斷要做新增或編輯
  4. 這裡先用固定畫面處理，待日後將之用樣版語法，屆時可以套用到任何管理系統
程式
  1. 路由： // 客戶管理 表單 Route.path("form_custom", form_custom);

    記得函式 form_custom 要先建立，不然會報錯

  2. form_custom(e) /*======================================== 客戶資料 表單 =========================================*/ function form_custom(e){ }

     

  3. 判斷是否接收到 sn
     

    /*======================================== 客戶資料 表單 =========================================*/ function form_custom(e){ let content = ''; // 判斷是否接收到 sn let sn = e.parameter.sn ? e.parameter.sn : ''; let title = sn ? '客戶 編輯表單' : '客戶 新增表單'; content = `<h2 class='mt-3'>${title}</h2>`; 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

    <!-- 隱藏 --> <input type="hidden" name="sn" id="sn" value=""> <!-- 簡答 --> <div class="col-md-4 mb-3"> <label> 簡答 <span class="text-danger"> *</span> <span class="text-danger"> (表單說明)</span> </label> <input type="text" class="form-control" name="f2" id="f2" value="表單預設值" placeholder="表單暫留字"> </div> <!-- 段落 --> <div class="col-md-12 mb-3"> <label> 段落 <span class="text-danger"> *</span> <span class="text-danger"> (表單說明)</span> </label> <textarea class="form-control" name="f3" id="f3" rows="3" placeholder="表單暫留字">表單預設值</textarea> </div> <!-- 下拉選單 --> <div class="col-md-12 mb-3"> <label class="control-label"> 下拉選單 <span class="text-danger"> (表單說明)</span> </label> <select name="f4" id="f4" class="form-select"> <option>選單1</option> <option>選單2</option> <option>選單3</option> <option selected>選單4</option> </select> </div> <!-- 單選 --> <div class="col-md-12 mb-3"> <label class="control-label w-100"> 單選 <span class="text-danger"> (表單說明)</span> </label> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" id="f50" value="單選1" name="f5"> <label class="form-check-label" for="f50">單選1</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" id="f51" value="單選2" name="f5"> <label class="form-check-label" for="f51">單選2</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" id="f52" value="單選3" name="f5" checked> <label class="form-check-label" for="f52">單選3</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" id="f53" value="單選4" name="f5"> <label class="form-check-label" for="f53">單選4</label> </div> </div>

     

  6. 本單元先將有用到的類型輸入，待看出規則後，再來套用樣版語法，讓後面要做的其他管理系統也可以套用該樣版。
    在 form_custom.html 把結構先註解以利處理
     

    <!-- let stru = [ { title: '流水號', type: '' },//sn { title: '客戶名稱', type: '文字' },//title { title: '客戶電話', type: '文字' },//tel { title: '客戶地址', type: '文字' },//addr { title: '備註', type: '文字' },//ps ]; -->

     

  7. 表單主架構

    <form action="<?!= global['url'] ?>" id="myForm" class="mb-5" method="POST"> <div class="row"> <div class="col-md-12 d-grid"> <button id="submit" type="submit" class="btn btn-primary btn-block">送出</button> </div> </div> </form>
  8. 畫面

  9. 每個表單欄位，視為元件，按類型套入即可, 客戶管理用到 隱藏、簡答、段落三種類別，另 下拉選單、單選、複選，待這裡處理好後，再來擴充。

  10. form_custom.html
    把元件放入後，將 label、name、id置換掉，其他如 value、placeholder、是否必填、表單說明再依需求設定在「表單結構」中，
    最終我們希望達到，設定「表單結構」，然後表單畫面自動完成。

    <!-- let stru = [ { title: '流水號', type: '' },//sn { title: '客戶名稱', type: '文字' },//title { title: '客戶電話', type: '文字' },//tel { title: '客戶地址', type: '文字' },//addr { title: '備註', type: '文字' },//ps ]; --> <form action="<?!= global['url'] ?>" id="myForm" class="mb-5" method="POST"> <div class="row"> <!-- 隱藏 流水號 --> <input type="hidden" name="sn" id="sn" value=""> <!-- 簡答 --> <div class="col-md-4 mb-3"> <label> 客戶名稱 <span class="text-danger"> *</span> <span class="text-danger"> (表單說明)</span> </label> <input type="text" class="form-control" name="title" id="title" value="表單預設值" placeholder="表單暫留字"> </div> <!-- 簡答 --> <div class="col-md-4 mb-3"> <label> 客戶電話 <span class="text-danger"> *</span> <span class="text-danger"> (表單說明)</span> </label> <input type="text" class="form-control" name="tel" id="tel" value="表單預設值" placeholder="表單暫留字"> </div> <!-- 簡答 --> <div class="col-md-4 mb-3"> <label> 客戶地址 <span class="text-danger"> *</span> <span class="text-danger"> (表單說明)</span> </label> <input type="text" class="form-control" name="addr" id="addr" value="表單預設值" placeholder="表單暫留字"> </div> <!-- 段落 --> <div class="col-md-12 mb-3"> <label> 備註 <span class="text-danger"> *</span> <span class="text-danger"> (表單說明)</span> </label> <textarea class="form-control" name="ps" id="ps" rows="3" placeholder="表單暫留字">表單預設值</textarea> </div> <div class="col-md-12 d-grid"> <button id="submit" type="submit" class="btn btn-primary btn-block">送出</button> </div> </div> </form>
  11. 畫面