商品マスターとそれを参照する別アプリ、例えば見積書アプリなどと連携して活用する場合、 kintone ではルックアップを利用するかと思います。

kintone 標準のルックアップが少し使いづらいのは、1行1行明細を追加しないといけないところです。そこで今回は、この使いづらさを Customine で解消するカスタマイズを作成してみたいと思います。


Customineの基本的な事柄は、こちらの「はじめてのカスタマイズ」をご参照ください。


利用想定シーン

ここでは例として、商品リストアプリを参照して見積書アプリの明細テーブルに項目を追加するというカスタマイズを作成してみたいと思います。カスタマイズするアプリは、ここではアプリストアにある「商品見積書パック」を利用してみます。お手元にある商品マスターアプリ＋それをルックアップするアプリでお試しいただいても構いません。


Customineの設定

それでは、この見積書アプリに対してカスタマイズをしていきます。Customine のアプリ選択画面から、見積書アプリを選択してカスタマイズの作成を始めます。


このカスタマイズは、おおよそ以下のような4ステップで実現することが可能です。

  1. まずボタンを配置する
  2. そのボタンが押されたら、商品マスターのレコードを取得する
  3. そのレコードをポップアップで一覧表示して
  4. 選択されたレコードをテーブルに書き出す

こう見ると簡単そうですね。それでは設定してみましょう。


まずはボタンからです。

  • 「やること」にカテゴリー：ボタンから「ボタンをメニュー位置に配置する」を選択します。もし他のスペースに配置したい場合には、「ボタンをスペースに配置する」を利用しても構いません
  • 「場所」には「レコード詳細メニューの上側」を選択します
  • 「ラベル」には「商品選択」などと入力しておきましょう

以上でやることの設定は完了です。


このボタンは明細を追加する画面で表示したいので、条件には以下のように設定します。

  • 「条件」には「追加画面・編集画面を表示した時」を選択します
  • 「一覧画面の鉛筆を押した時」はデフォルトの「一覧画面の鉛筆を押した時は含めない」を選択します

以上でボタンの配置は完了です。


レコードの取得

続いて、このボタンを押したときの動きを設定します。

以上でやることの設定は完了です。もし、商品リストのレコード数が膨大な場合、条件を指定してレコードを取得しないと選択するのがほぼ不可能になる可能性もありますので、ご注意ください。


右側の条件にはもちろん「ボタンを押した時」を選択します。

「ボタン」は上記のボタン、つまりアクション番号「1」を選択します。これでステップ2が完成です。


レコード一覧をポップアップで表示

続いて、取得したレコードをポップアップで表示する部分を設定してみます。


Customine には色々便利なUIコンポーネントがあるのですが、今回はその中の「レコードの一覧をポップアップで表示する」を利用します。

  • 「やること」にカテゴリー：その他のUIから「レコードの一覧をポップアップで表示する」を選択します
  • 「レコード」には上記で取得したレコード、つまりここではアクション番号「2」を選択します
  • 「表示するフィールド」には、ポップアップで表示したいフィールドを選択してください
  • 「選択方法」には「複数選択（チェックボックス）」を選択してください。今回のカスタマイズではここがポイントの一つです
  • 「メッセージ入力」には、特に何も入力しなくても構いません
  • 「OKボタンの名前」は何でも構いません。ここではデフォルトの「OK」をそのまま利用しました
  • 「キャンセルボタンの名前」も、任意で構いません

やることの設定は以上になります。


このポップアップはレコードの取得が終わってから表示したいので、「条件」には「他のアクションの実行が完了した時」を選択します。

「アクション」には先程のレコード取得のアクション、ここではアクション番号「2」を選択します。


このアクションが一番設定項目が多いアクションになります。最終的には以下のようになりました。


選択されたレコードをテーブルに書き出す

最後のステップとして、ポップアップで選択されたレコードを、テーブルに書き出します。

  • 「やること」にカテゴリー：テーブルから「レコードをテーブルに書き出す」を選択します
  • 「レコード」には上記のポップアップで選択されたレコード、つまりここではアクション番号「3」を選択します
  • 「マッピング」ではフィールドマッピング（fのボタンです）を利用して、必要なフィールドを全て対応付けてください。
    ここでは「型番」には「型番」、「商品名」には「商品名」、「単価」には「価格」をそれぞれ選択しました
  • 「既存の行」には、「既存のテーブル行を残して追記する」を選択します。常にクリアして新規に追加する動作が欲しい場合には「既存のテーブル行はクリアする」を選択してください


「条件」には、ここでは「確認・入力ダイアログで「OK」を押した時」を選択します。

「確認・入力ダイアログアクション」には、上記のアクション番号「3」を選択することになります。

この条件を利用することで、ポップアップ表示→チェックボックスで選択→OKボタンをクリックしたあとに、このアクションを実行させることが出来るようになります。

キャンセルボタンがクリックされたときは、何も実行されません。これもポイントの一つになります。


以上で設定は完成です。「kintoneアプリへ登録」をクリックして、動作を確認してみてください。

動作確認

この状態で動作させると、以下のような感じになるかと思います。

まずはボタンを押してポップアップ表示、商品を選択します。

OKをクリックすると、選択された商品がテーブルに入ります。この状態から、もともとあった空行を削除して、数量を入力して保存しようとすると…

このテーブルはルックアップを利用しているので、以下のようなエラーが出てしまいます。これでは全く使い勝手が良くなっていないので、もう少しだけカスタマイズを追加します。

（もし明細テーブルでルックアップを使っていなければ、このようなエラーは出ないので問題はありません。）


ルックアップの更新

ということで、最後に1つやることを追加します。画面最下部の「＋」ボタンを押して、アクションを追加してください。

  • 「やること」にカテゴリー：フィールドから「ルックアップを取得しなおす」を選択します
  • 「ルックアップフィールド」には更新したいルックアップフィールドを選択してください。ここでは「型番」を選択します
  • 「条件」には「他のアクションの実行が完了した時」を選択します
  • 「アクション」にはレコード書き出しのアクション、つまりここではアクション番号「4」を選択します

これでテーブルへの書き出しが成功した後、ルックアップの更新が実行されます。

再度「kintoneアプリへ登録」をクリックして動きを確認してみてください。


まとめ

マスターから複数選択してテーブルに追加するカスタマイズは以上になります。商品マスタを使って簡単に見積書などのレコードが作成できるようになります。


せっかく作ったkintoneアプリですから、ちょっとした不便なところに手を入れて、より便利なアプリとして利用者の皆様に活用していただけるようになれば幸いです。ぜひご活用ください！