kintone側実装

vue-project/my-kintone-plugin/src/js/KintoneIndexEventHandler.ts

@@ -0,0 +1,49 @@
+import type { SavedData } from "@/types/model";
+import type { Button } from "kintone-ui-component";
+
+export class KintoneIndexEventHandler {
+    private config: SavedData;
+  
+    constructor(config: SavedData) {
+      this.config = config;
+    }
+    
+    public init(): void {
+         this.addButtonToView();
+    }
+  
+    // ボタン追加
+    private addButtonToView(): void {
+      const headerSpace = kintone.app.getHeaderMenuSpaceElement();
+      if (!headerSpace){
+        throw new Error('このページではヘッダー要素が利用できません。');
+      };
+  
+      // ボタン追加
+      if (document.getElementById('btn-data-fetch')) return;
+      const kuc = Kucs['1.18.0'];
+      const button = new kuc.Button({
+        text: this.config.buttonName,
+        type:"submit",
+        id:'btn-data-fetch',
+      });
+  
+      // const button = document.createElement('button');
+      // button.id = 'btn-data-fetch';
+      // button.textContent = this.config.buttonName;
+      // button.style.margin = '0 8px';
+      button.addEventListener('click', () => this.handleButtonClick());
+  
+      headerSpace.appendChild(button);
+    }
+  
+    // ボタンクリック
+    private async handleButtonClick(): Promise<void> {
+      try {
+        console.log('Button clicked! Starting data processing...');
+        alert('データ取得開始');
+      } catch (error) {
+        console.error('Error during data processing:', error);
+      }
+    }
+  }