はじめに
フォームブリッジ
は、申込フォームなどの外部公開フォームを簡単に作成できるサービスです。
申込フォームに上限人数を設定し、フォームを締切りたいこともあるかと思います。
そんなときに便利なのが、
kViewer
の外部公開APIです。
外部公開APIを利用すると、kintone外部から、kintone内部のデータを参照できます。
フォームブリッジに適用すると、次の記事のようにルックアップ機能の実装などが可能です。
参考:
【2018/9/25以降の手順】フォームブリッジからkintone内のマスタを参照・引用したい
また、JavaScriptカスタマイズに組み込めば、kintone内部のデータを利用した高度な外部公開フォームを作成できます。
今回は、kViewerの外部公開APIを用いた、フォームブリッジのJavaScriptカスタマイズの例を紹介します。
サンプル
イベントマスターアプリとイベント申込者リストアプリを参照して、申込者数が定員を超えていないかチェックします。
イベントIDを選択後、選択したイベントの申込者が上限に達していた場合はアラートを表示して、選択を解除します。
サンプルシナリオについての補足
- シナリオをシンプルにするため、イベントIDのルックアップ時にアラートを出します。
- 上限に達したイベントを選択不可とするカスタマイズも可能です。
ただし、イベントごとにAPIを呼ぶ必要があり、イベント数が多い場合にはREST APIの制限値に注意が必要です。
参考: 制限値一覧
また、DOM操作が必要となり、kintoneのアップデートの影響で動作しなくなる可能性があります。
kintone設定
2つのアプリ、「イベントマスターアプリ」と「イベント申込者リストアプリ」を作成します。
kViewerやフォームブリッジと連携するために、APIトークンを作成しておきます。
イベントマスターアプリ
フィールド名 | フィールドタイプ | フィールドコード |
---|---|---|
レコード番号 | レコード番号 | レコード番号 |
イベント名 | 文字列 (1行) | イベント名 |
定員 | 数値 | 定員 |
レコード閲覧権限を持ったAPIトークンを作成します。
アプリ内に何件かレコードを登録しておきましょう。
イベント申込者リストアプリ
フィールド名 | フィールドタイプ | フィールドコード |
---|---|---|
申込者名 | 文字列 (1行) | 申込者名 |
イベントID | 数値 | イベントID |
レコード閲覧権限とレコード追加権限を持ったAPIトークンを作成します。
kViewer設定
各アプリに対して、外部公開APIを作成します。
説明の便宜上、「イベントマスターアプリ」のAPIの名前を「イベントマスターアプリAPI」、「イベント参加者リストアプリ」のAPIの名前を「イベント参加者リストアプリAPI」とします。
「イベントマスターアプリAPI」から先に作成します。
ビューの作成(ホーム右上の+ボタン)から、外部公開APIを選択します。
ダイアログにしたがって、「名前」、「kintoneアプリのURL」、「APIトークン」を設定します。
ビューの一般設定を編集します。
「イベントマスターアプリAPI」については、kViewerルックアップで表示したいフィールドを「kintoneフィールド」に設定します。
また、kViewerルックアップで一度に表示したいレコード数を「1リクエストでの取得数」に設定します。
設定後、「保存」>「編集完了」>「公開」を順にクリックします。
公開後、「ビューの説明」の「外部公開APIのURL」をメモしておきます。
「イベント参加者リストアプリAPI」も同様に作成します。
一般設定では、「kintoneフィールド」を選択なし、「1リクエストでの取得数」を1に設定します。
フォームブリッジ設定
フォーム作成
「イベント申込者リストアプリ」にレコード登録するフォームを作成します。
フォームブリッジのはじめ方
を参考にフォームを作成します。
手順に従うと、次のようなフォームが作成されます。
kViewerとの連携
kViewerルックアップおよびkViewerを利用したJavaScriptカスタマイズをするために、kViewerと連携します。
「kViewer」タブから、「kViewerと連携する」ボタンをクリックして、「保存」します。
「kViewerと連携する」ボタンが「kViewerとの連携情報を更新する」に変わったらOKです。
(下に「kViewerとの連携設定が完了していません」の表示が出ますが問題ありません)
フィールド設定
「フィールド」タブから、フィールドを編集します。
「kViewerルックアップ」フィールドと「文字列(1行)」フィールドを追加します。
「文字列(1行)」フィールドの歯車マークを押して、フィールドの設定を変更します。
「フィールド名」と「フィールドコード」を「イベント名」に設定し、「必須項目にする」および「編集不可にする」をチェックします。
「kViewerルックアップ」フィールドの歯車マークを押して、フィールドの設定を変更します。
「選択肢となるレコードのAPIビュー」を「イベントマスターアプリAPI」に設定し、その他の「kViewerルックアップの設定」を下図のように設定します。
その後、自動生成されていた「イベントID」フィールドを削除します。
そして、「kViewerルックアップ」フィールドの「フィールド名」と「フィールドコード」を「イベントID」に設定します。
設定後、ページ下部の「保存」ボタンを押します。
JavaScriptカスタマイズ
「カスタマイズ」タブから、「フォームのカスタマイズ」>「JavaScript」を利用するにチェックを入れます。
次の「generateUrl.js」と「sample.js」を順に読み込みます。
generateUrl.js
sample.js内のkViewerの外部公開API実行部分のURLを生成するプログラムです。
|
|
sample.js
kViewerの外部公開APIを実行してkintoneのデータを取得するプログラムです。
12行目のmasterApp
と13行目のapplicantListApp
には、
kViewer設定
でメモしたURLをそれぞれ指定します。
19行目、29行目のAPI実行部分のadditionalFilters
でリクエストパラメーターを追加し、絞り込みをしています。
リクエストパラメーターの詳細については、
kViewerのJavaScriptカスタマイズ
を参照してください。
|
|
設定後、ページ下部の「保存」ボタンを押します。
カスタマイズ設定の保存後、ページ上部の編集完了ボタンを押します。
「公開フォーム」ボタンから、冒頭の サンプル と同じ動作の確認ができたら、フォームの完成です。
終わりに
今回は、申込フォームに上限人数を実装するという簡単なカスタマイズ例を紹介しました。
外部公開APIを利用することで、フォームブリッジのカスタマイズの幅は大きく広がるかと思います。
ぜひお試しいただければと思います。
関連リンク
このTipsは、2019年9月版kintoneで動作を確認しています。