回傳訊息

1. 至官網取得card元件，儲存為 tmp_message.html

<div class="card">
  <h5 class="card-header">Featured</h5>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

2. 設定變數 tmp_class、title、message

<!-- 訊息盒子 
  content += render('tmp_message', {tmp_class: 'card-header bg-primary text-white', title: '成功訊息盒子', message: '訊息'});
  content += render('tmp_message', {tmp_class: 'card-header bg-danger text-white', title: '失敗訊息盒子', message: '訊息'});
-->
<!-- tmp_class='card-header'、title、message -->
<div class="card">
  <div class="<?= tmp_class ?>">
    <?= title ?>
  </div>
  <div class="card-body">
    <p class="card-text">
      <?= message ?>
    </p>
  </div>
</div>

3. 訊息盒
   tmp_class = 成功：'card-header bg-primary text-white' 、失敗：'card-header text-white bg-danger'

  content += render('tmp_message', {tmp_class: 'card-header bg-primary text-white', title: '成功訊息盒子', message: '訊息'});

4. 至 prog_index.gs 測試

/*=====================================
  首頁
=====================================*/
function index(e) {
  let title = '首頁';
  let content = '';
  content = `<h2 class='mt-3'>${title}</h2>`;

  content += render('tmp_message', {tmp_class: 'card-header bg-primary text-white', title: '訊息盒子', message: '訊息'});

  content += render('tmp_message', {tmp_class: 'card-header bg-danger text-white', title: '訊息盒子', message: '訊息'});
  
  return render('tmp', {content: content}, title);  
}

5. 結果畫面
   

6. 至官網取得button元件，儲存為 tmp_button.html

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

6. tmp_button.html
   設定變數 tmp_class、url、target、title

<!-- tmp_button.html 按鈕  -->
<a class='<?= tmp_class ?>' href='<?!= url ?>' target='<?= target ?>'><?= title ?></a>

5. 按鈕

<!-- 按鈕
  btn-secondary
  btn-warning
  btn-info
  btn-light
  btn-dark
  btn-link
  
  content += render('tmp_button', {tmp_class: 'btn btn-xs btn-primary', title: '新增', url: global.url+'?op=xxx', target: "_blank"});
  content += render('tmp_button', {tmp_class: 'btn btn-xs btn-success', title: '編輯', url: global.url+'?op=xxx&sn=', target: "_blank"});
  content += render('tmp_button', {tmp_class: 'btn btn-xs btn-danger', title: '刪除', url: global.url+'?op=xxx&sn=', target: "_blank"});
 -->
 <a href="<?= url ?>" class="<?= tmp_class ?>" target="<?= target ?>"><?= title ?></a>

6. 測試
   prog.index.gs

/*=====================================
  首頁
=====================================*/
function index(e) {
  let title = '首頁';
  let content = '';
  content = `<h2 class='mt-3'>${title}</h2>`;

  // ---------------------------------訊息盒子
  content += render('tmp_message', {tmp_class: 'card-header bg-primary text-white', title: '成功訊息盒子', message: '訊息'});
  content += render('tmp_message', {tmp_class: 'card-header bg-danger text-white', title: '失敗訊息盒子', message: '訊息'});

  // ---------------------------------按鈕
  content += '<div class="mt-5">';  
  content += render('tmp_button', {tmp_class: 'btn btn-xs btn-primary', title: '新增', url: global.url+'?op=xxx', target: "_blank"});
  content += render('tmp_button', {tmp_class: 'btn btn-xs btn-success', title: '編輯', url: global.url+'?op=xxx&sn=', target: "_blank"});
  content += render('tmp_button', {tmp_class: 'btn btn-xs btn-danger', title: '刪除', url: global.url+'?op=xxx&sn=', target: "_blank"}); 
  content += '</div>';

  return render('tmp', {content: content}, title);  
}

結果畫面

客戶資料寫入後回傳訊息

prog_custom.gs

  // ---------------------------------回傳訊息
  let content = '';  
  content += render('tmp_button', {tmp_class: 'btn btn-xs btn-primary', title: '新增', url: global.url+'?op=form_custom', target: ""});
  content += render('tmp_button', {tmp_class: 'btn btn-xs btn-success', title: '編輯', url: global.url+'?op=form_custom&sn='+formData.sn, target: ""});
  content += render('tmp_button', {tmp_class: 'btn btn-xs btn-secondary', title: '回首頁', url: global.url, target: ""});
  return content;