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);
+      }
+    }
+  }

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

@@ -1,22 +1,28 @@
+import { KintoneIndexEventHandler } from "./KintoneIndexEventHandler";
+
 (function (PLUGIN_ID) {
-  kintone.events.on('app.record.index.show', () => {
-    const spaceEl = kintone.app.getHeaderSpaceElement();
-    if (spaceEl === null) {
-      throw new Error('The header element is unavailable on this page.');
-    }
-
-    const fragment = document.createDocumentFragment();
-    const headingEl = document.createElement('h3');
-    const messageEl = document.createElement('p');
-
+  kintone.events.on('app.record.index.show', (event) => {
     const config = kintone.plugin.app.getConfig(PLUGIN_ID);
-    messageEl.textContent = config.message;
-    messageEl.classList.add('plugin-space-message');
-    headingEl.textContent = 'Hello kintone plugin!';
-    headingEl.classList.add('plugin-space-heading');
+    const handler = new KintoneIndexEventHandler(config);
+    handler.init();
+    // const spaceEl = kintone.app.getHeaderSpaceElement();
+    // if (spaceEl === null) {
+    //   throw new Error('The header element is unavailable on this page.');
+    // }
 
-    fragment.appendChild(headingEl);
-    fragment.appendChild(messageEl);
-    spaceEl.appendChild(fragment);
+    // const fragment = document.createDocumentFragment();
+    // const headingEl = document.createElement('h3');
+    // const messageEl = document.createElement('p');
+
+    // const config = kintone.plugin.app.getConfig(PLUGIN_ID);
+    // messageEl.textContent = config.message;
+    // messageEl.classList.add('plugin-space-message');
+    // headingEl.textContent = 'Hello kintone plugin!';
+    // headingEl.classList.add('plugin-space-heading');
+
+    // fragment.appendChild(headingEl);
+    // fragment.appendChild(messageEl);
+    // spaceEl.appendChild(fragment);
+    return event;
   });
 })(kintone.$PLUGIN_ID);