コラボフローの申請書に画像を付けよう

はじめに

コラボフロー Advent Calendar 2023 7日目です。

申請書ってどうしても硬い見た目になりますし、申請って気が重いです。

そこで、申請書にアイコンや画像を入れることで、申請書を明るくしましょう。
（申請率の向上にもつながるかもしれません。）

コラボフローの申請書に、JavaScriptApiのカスタマイズを使ってアイコン画像を追加していきます。

この方法では、画像をコラボフロー内で完結して表示することが出来るので、社外に出せない画像を申請書に付けることが出来ます。

アイコン画像をお借りする

会社で使うので、無料で商用利用可能なアイコン画像を探します。

おすすめのサイト

https://soco-st.com/

https://loosedrawing.com/

申請書を作成する

通常フォームにて作成します。
今回は休暇申請のフォームを作成してみます。
日時と備考を入力できるようにします。

画像を張り付けるラベルパーツを作成する

画像を付けたい箇所にラベルパーツを追加します。

ラベルパーツにイメージタグを追加する

ラベルパーツはタイトルが表示されないようにしておきます。
「ラベルの内容」にimgタグを追加します。
idに一意な値、srcには空文字、heightには画像のサイズ、altに画像の説明を追加します。
その他、画像に設定したい属性を追加します。

<img id="formImg" src="" height=250 alt="ヤシの木のアイコン画像。休暇をイメージしています。"></img>

画像のデータをBase64に変換する

画像をブラウザにドラッグアンドドロップします。

F12ボタンを押し、開発者モードを起動します。
アプリケーションタブを開き、フレームタブの画像を選択します。

開発者モードで表示された画像を右クリックして、「画像データURIとしてコピー」をクリックします。
以下のような形式のBase64に変換された画像（文字列）を入手できます。
data:image/png;base64,iVBORw0KGgoAA...

JavaScriptでのカスタマイズを設定する

コラボフローのJavaScriptカスタマイズを使用します。

Base64に変換した画像データを変数IMG_SRCに設定します。
ラベルパーツのimgタグに設定したidをimgTagIdに設定します。

img.js

const IMG_SRC = "data:image/png;base64,iVBORw0KGgoAA...";

(function() {
  "use strict";
  collaboflow.events.on('request.input.show', function (data) {
    const imgTagId = "formImg";
    const imageElement = document.getElementById(imgTagId);
    imageElement.src = IMG_SRC;
  });
})();

あとは作成したJavaScriptをフォームに設定することで適応完了です!

フォームに画像を追加できました😊