【連載】kintoneで勤怠データ記録アプリを作ってみよう vol.4

FormBridgeで勤怠データを報告するフォームをつくるよ

kintoneで「勤怠記録」を自動的に行う仕組みを作るシリーズ、FormBridgeプラグインで勤怠データを報告するフォームを作成します。

フォーム作成手順

フォームそのものを作成しよう

FormBridge環境の構築は既に終わっているものとして話を始めます。

FormBridge管理画面のホームから「フォームの作成」を選択します。
vol.1で作成したkintoneアプリのURLとAPIトークンを入力して「保存」を選択します。
フォーム管理名はvol.1で作成したkintoneアプリとの関係性が分かるような名前を入力し、「保存」を選択します。
「kintoneアプリ」のメニューから保存先フィールドを設定できますが、今回は自動で設定されている状態でそのまま手順を続行できますので、「こういうフィールドの関係性になっているんだな」くらいの気持ちで見るだけでかまいません。

kViewerと連携しよう

メニュー下部へスクロールし、「kViewerと連携する」を選択します。
「kViewerと連携する」を選択します。
未保存のデータは失われるというアラートが出ます。もし編集途中の部分があるならいったんキャンセルして「保存」してから再度「kViewerと連携する」を選択します。
編集中のデータがなければ「OK」を選択します。
「kViewerとの連携設定が完了していません」と表示されますが大丈夫です。そのまま「保存」を選択します。

フィールドの設定（基本編）

メニューから「フィールド設定」を選択します。
kintoneアプリから自動的にフィールドが設定されています。まずは職員番号フィールドを確認してみましょう。
職員番号フィールドの上にマウスをホバーすると歯車マークが現れるので、それをクリックして「設定」を選択します。
後で解説しますが、このフィールドは「編集不可」にチェックを入れておきます。
「フィールドコード」と、画像には反映されていませんが「フィールド名」をそれぞれ「職員番号」に変更して「閉じる」を選択します。
次に氏名フィールドを確認してみましょう。
氏名フィールドの上にマウスをホバーすると歯車マークが現れるので、それをクリックして「設定」を選択します。
こちらも後で解説しますが、このフィールドも「編集不可」にチェックを入れておきます。
「フィールド名」と、画像には反映されていませんが「フィールドコード」をそれぞれ「氏名」に変更して「閉じる」を選択します。
次に日付フィールドを確認してみましょう。
日付フィールドの上にマウスをホバーすると歯車マークが現れるので、それをクリックして「設定」を選択します。
このフィールドは「必須項目にする」にチェックを入れ、また初期値の「回答時の日付を初期値にする」にもチェックを入れておきます。
「フィールド名」と「フィールドコード」をそれぞれ「日付」に変更して「閉じる」を選択します。
次に出勤時刻フィールドを確認してみましょう。
出勤時刻フィールドの上にマウスをホバーすると歯車マークが現れるので、それをクリックして「設定」を選択します。
このフィールドは「必須項目にする」にチェックを入れ、また初期値の「回答時の時刻を初期値にする」にもチェックを入れておきます。
「フィールド名」と「フィールドコード」をそれぞれ「出勤時刻」に変更して「閉じる」を選択します。

フィールドの設定（kViewerルックアップ編）

ここからちょっと応用的な部分に入ります。kintoneアプリから自動設定されたフィールドに「kViewerルックアップ」フィールドを追加します。
フィールドタイプのリストから右側にドラッグしましょう。
配置したkViewerルックアップフィールドの上にマウスをホバーすると歯車マークが現れるので、それをクリックして「設定」を選択します。
「フィールド名」は、このフィールドが検索をしてもらうものであることがわかりやすい名前にします。
「選択肢となるレコードのAPIビュー」は、vol.2で作成したマスターデータアプリを設定し、「表示するkViewerのフィールド」は、検索した後に表示する項目のフィールド名を設定します。
最後に、「検索対象となるフィールド」は、検索するキーとなるフィールド名を設定します。

例えば、「二宮」という名字の方を検索する場合に、kViewerルックアップの検索フィールドに「二宮」と入力して検索すると、「二宮勝次」さんが表示されるという結果となります。
ただ検索してもらうだけではありません。「選択時にAPIビューのレコードからフィールドの値を変更」の部分でFormBridgeのフィールドに値を反映させて、検索結果からそのまま値を自動入力させるようにします。そのため、先ほどの「職員番号」と「氏名」のフィールドは編集不可にしていたのです。

ここまで設定したら「閉じる」を選択します。
各フィールドの設定が終わったら、順番を並べ替えましょう。今回は検索を最初に行ってもらいたいので、kViewerルックアップフィールドを一番上に配置しました。
並べ替えを終えたら、「保存」を選択します。
「編集完了して更新」を選択します。必ず「保存」を先に行ってください。
フィールドの数が多くなると「保存」はスクロールしないと見えなくなるのに対して、このボタンは常に表示されているため、うっかり「保存」する前に「編集完了して更新」してしまうと編集内容が失われます。
「反映する」を選択します。もし、「保存」をまだ行っていない場合はいったんキャンセルして、「保存」からやり直してください。
「公開する」を選択します。
確認画面となりますので、もう一度「公開する」を選択します。

フォームを確認してみよう

実際に作られたフォームを確認してみましょう。「公開中のフォームを見る」を選択します。
「職員の氏名から検索」（kViewerルックアップフィールド）の虫眼鏡マークを選択します。
今回は「二宮勝次」さんを選択します。もし、この前のステップで「二宮」と入力して虫眼鏡マークを選択していれば、「二宮」という名字の職員が絞り込まれます（1名しか該当しない場合は、自動で選択されます）。
「職員番号」「氏名」に、二宮勝次さんの職員番号「96」と氏名「二宮勝次」が自動で入力されました。