星期三, 9月 02, 2026

[GAS] 自訂側欄

用 agy 寫網頁應用程式時，AI 自行在 Google Sheet 內設計 sidebar 來呈現網頁應用程式，那就來筆記 sidebar 效果囉

code.gs
/**
 * 當試算表開啟時，自動新增自訂功能表
 */
function onOpen() {
  SpreadsheetApp.getUi()
    .createMenu('🛠️ 自訂功能')
    .addItem('開啟側邊欄', 'showSidebar')
    .addToUi();
}

/**
 * 載入 Sidebar.html 並在右側開啟側邊欄
 */
function showSidebar() {
  const htmlOutput = HtmlService.createHtmlOutputFromFile('Sidebar')
    .setTitle('側邊欄說明')
    .setWidth(300); // 側邊欄預設寬度通常為 300px
  
  SpreadsheetApp.getUi().showSidebar(htmlOutput);
}
sidebar.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <!-- 引入 Google Material/標準風格樣式簡潔化介面 -->
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
    <style>
      body {
        padding: 12px;
        font-family: Arial, sans-serif;
        color: #333;
        line-height: 1.5;
      }
      .card {
        background-color: #f8f9fa;
        border: 1px solid #dadce0;
        border-radius: 8px;
        padding: 12px;
        margin-bottom: 12px;
      }
      h2 {
        margin-top: 0;
        color: #1a73e8;
        font-size: 18px;
      }
      ul {
        padding-left: 20px;
        margin: 8px 0;
      }
      li {
        margin-bottom: 6px;
      }
      .footer {
        font-size: 12px;
        color: #70757a;
        margin-top: 20px;
        border-top: 1px solid #eee;
        padding-top: 8px;
      }
    </style>
  </head>
  <body>
    <h2>📌 側邊欄功能說明</h2>
    
    <div class="card">
      <p>歡迎使用自訂側邊欄！這是一個透過 <code>HtmlService</code> 建立的客製化介面。</p>
    </div>

    <h3>主要特色</h3>
    <ul>
      <li><strong>即時操作：</strong> 不影響目前試算表的編輯流程。</li>
      <li><strong>雙向溝通：</strong> 可透過 <code>google.script.run</code> 與後端 Apps Script 進行資料交換。</li>
      <li><strong>豐富介面：</strong> 支援 HTML5、CSS3 及 JavaScript 各種前端框架。</li>
    </ul>

    <div class="footer">
      💡 提示：點擊右上角「✕」即可隨時關閉此側邊欄。
    </div>
  </body>
</html>

gs code 內的 OnOpen() 在 Google Sheet 開啟時會有自訂功能

透過 sidebar 開啟 sitebar.html 網頁

張貼者： TerryTsai 標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)