【Kintone JavaScript / CSSカスタマイズ】kintone UI Componentでボタンを設置

Posted at 2024 年 02 月 23 日

前回の以下の記事では、kintoneアプリにボタンを追加しましたが、特にデザインもしていないので見栄えがよくありませんでした。

https://devpediacode.com/information/WEB/f03bf530-2d96-5031-ac06-db8da77d7e17

そこで今回は、Kintone風のユーザーインターフェースを簡単に作成できるライブラリ「Kintone UI Component」を利用して、ボタンを設置したいと思います。

Kintoneとは?

業務データのバラバラを解決するkintoneとは?

Kintone UI Componentとは?

Kintone UI Componentは、Kintoneのカスタマイズやプラグインの開発に役立つUIコンポーネントライブラリです。
このライブラリを使用すると、Kintone風のUIコンポーネントを簡単に作成できます。
主に、デスクトップ版とモバイル版の両方に対応したUIパーツが提供されており、様々なカスタマイズが可能になっています。

https://github.com/kintone-labs/kintone-ui-component

Kintone UI Componentのボタンを設置

アプリ

今回のアプリには文字列(1行)と透明で見えにくいですが、スペースの2つのレコードを設定したアプリを作成しました。

ちなみにテキストの方は今回使いません。

スペースの要素IDは「button_ui」と設定しています。

コード

// Kintoneのレコード詳細画面が表示された時に実行されるイベントを登録
kintone.events.on('app.record.detail.show', function(event) {
  // 'button_ui'というIDを持つスペース要素を取得
  const spaceElement = kintone.app.record.getSpaceElement('button_ui');

  // 新しいボタンを作成
  const button = new Kuc.Button({
    text: 'sample', // ボタンのテキスト
    type: 'submit', // ボタンのタイプ
    className: 'options-class', // ボタンに適用するCSSクラス
    id: 'options-id', // ボタンのID
    visible: true, // ボタンを表示状態に設定
    disabled: false // ボタンを有効状態に設定
  });

  // 作成したボタンをスペース要素に追加
  spaceElement.appendChild(button);

  // ボタンのクリックイベントハンドラを設定
  button.addEventListener('click', function() {
    alert('ボタンがクリックされました!'); // クリックイベントが発生した時にアラートを表示
  });

  // イベントオブジェクトを返す
  return event;
});

実行結果

KintoneのUIっぽい見た目のボタンが配置されました。