【Garoon JavaScript API】メッセージ画面内にアラートを表示する

はじめに

クラウド版Garoon 2018年9月版に、メッセージ画面に関するGaroon JavaScript APIが追加されました。
このAPIが追加されたことにより、メッセージ画面のカスタマイズが簡単に可能になりました。

今回は2つのイベントと、要素取得するAPIを用いて、
メッセージ操作のうっかりミスを抑止するアラートを宛先パーツ内に表示する方法をご紹介します。

前提条件と注意事項

• この機能は、現時点ではクラウド版 Garoon が必要です。（2018年9月時点）
• サンプルプログラムは、その動作を保証するものではありません。
• サンプルプログラムの技術的なサポート等は行っていません。

完成イメージ

Garoonメッセージ作成画面と宛先変更画面の宛先下部に注意喚起のアラートを1行表示するシンプルなカスタマイズです。
これだけですが、送信前確認をしないユーザーには一定の効果がありそうです。

Garoonメッセージ作成画面

Garoonメッセージ宛先変更画面

JavaScript / CSSカスタマイズ設定方法

Garoonのメッセージに対してJavaScript / CSSのカスタマイズを適用するためには、
適用したい範囲（ユーザ／グループ）に合わせてカスタマイズグループを作成し、適用したいJavaScript / CSSを設定します。

詳細手順

1. 下記のサンプルコードを任意のファイル名で保存します。拡張子は「.js」にしてください。
2. Garoonライクなアラートを表示するために、Garoon html/css/image-Kit for Customize のファイルを用意します。
   以下のGitHubから「grn_kit.css」ファイルをダウンロードしてください。
   https://github.com/garoon/css-for-customize
3. [Garoonシステム管理 > 各アプリケーションの管理 > メッセージ > JavaScript / CSSによるカスタマイズ]の画面を表示し、「カスタマイズグループを追加する」をクリックします。
   
4. 「カスタマイズ」を「適用する」を選択し、「カスタマイズグループ名」は任意に設定してください。
5. 「適用対象」には、カスタマイズ対象となるユーザー、組織、グループを選択してください。
6. 「JavaScriptカスタマイズ」項目に1．で保存したjsファイルを、「CSSカスタマイズ」項目には2．でダウンロードしたCSSファイルを設定します。
7. 全ての設定が完了したら「追加する」をクリックして、設定を保存します。
   

解説

サンプルコード

イベント

サンプルコード9行目ではメッセージの作成画面が表示されたときのイベントを使用しています。

25行目ではメッセージの宛先変更画面が表示されたときのイベントを使用しています。

スペースの取得

アラートを表示するために、10,26行目でメッセージの空白要素を取得する関数を使用しています。

取得したスペースに追加する要素を作成

11~22行目、27~38行目それぞれで、Garoon html/css/image-Kit for Customizeの「メッセージ > 注意」の要素を使用しています。

スタイルシート

アラートをGaroonライクなUIにするため、Garoon html/css/image-Kit for Customizeを使用しています。
アラート以外も様々なUIが用意されているのでご活用ください。

おわりに

Garoonメッセージ画面のカスタマイズ一例をご紹介しました。
Garoon JavaScript APIが増えたことにより、カスタマイズの可能性が広がりました。

他にも、メッセージの空白要素を取得する関数と予定登録のGaroon REST APIを用いて、
メッセージ画面から予定を登録するカスタマイズもできそうですね。

ぜひこの機会にGaroon APIをお試しください。

このTipsは、2018年9月版 Garoonで確認したものになります。