kintone のルックアップを利用していると必ずと言っていいくらい出るのか、「マスタ側にデータがない場合どうするか?」という問題ではないでしょうか?
ルックアップ元のマスターのデータをどのようにメンテナンスするかは、権限問題も含めてそれぞれの組織により色々なルールがあると思います。今回はお手軽さを優先して、簡単にルックアップ元にデータを追加できるカスタマイズをしてみたいと思います。


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


利用想定シーン

見積書アプリで見積書を作成する際、製品をルックアップで入力する、というようなシーンを想定しています。

見積書を作成する際に、製品がマスタ側にない場合、マスタ側のアプリを開いてレコードを追加しなければなりませんが、このカスタマイズでは見積書アプリから直接製品マスターにレコードを登録できるようにします。


kintoneアプリの準備

今回利用するアプリは、アプリストアにある「商品見積書パック」を利用したいと思います。kintone アプリストアから「商品見積書パック」を追加して下さい。

このパックでは「見積書」アプリと「商品リスト」アプリが追加されます。

まず、見積書アプリの、明細テーブルの下辺りに、商品追加に利用するフォームを追加します。

このアプリの設定 → フォームで、グループを追加して商品追加枠を以下のように作成しておきます。


ここでは「型番」と「商品名」を「文字列(1行)」のフィールドで、「価格」を「数値」フィールドで追加しました。フィールドコードは後で分かりやすいように、それぞれ「商品追加_型番」などとしておきます。

また、ボタンを配置するためのスペースを「addProduct」という要素IDでそれぞれ追加しました。後でこのスペースにボタンを配置します。

(実際の商品リストアプリでは、もう1つ「サービス種別」という必須項目があるのですが、ここでは説明簡素化のため、サービス種別は "kintone" 固定でレコードを作ることにします。勿論必要であればドロップダウンなどでサービス種別を入力するようにしていただいても構いません)


Customineの設定

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


まずボタンをスペースに配置しましょう。

  • 「やること」にカテゴリー:ボタンの中から、「ボタンをスペースに配置する」を選択します
  • 「場所」は先程追加したスペースを選択します
  • 「ラベル」には「商品追加」などと入れて下さい

やることの設定はこれで完了です。条件にはデフォルトの「追加画面・編集画面を表示した時」で「一覧画面の鉛筆を押した時は含めない」を選択しておきます。

ボタンの設置は以上です。

確認ダイアログの表示

次に、このボタンを押したときに内容を確認するダイアログを表示します。以下のように設定します。

  • 「やること」にカテゴリー:その他のUIの中から、「確認ダイアログを表示する」を選択します
  • 「メッセージ」には、以下のように入力内容を確認できるように設定します。入力エリアの下部にある「フィールド選択ボタン」を使い、フィールドコードに間違いがないように入力しましょう

  • 「条件」には「ボタンを押した時」を設定し、「ボタン」には先程設定したボタンを選択しておきます

最終的には、このような設定になります。


商品リストアプリにレコード追加

最後に、確認ダイアログでOKがクリックされたら、商品リストアプリにレコードを追加する設定をします。

以下のような手順で設定します。

  • 「やること」にカテゴリー:レコードの中から、「レコードを追加する」を選択します
  • 「追加先アプリ」には「商品リスト」アプリを選択します
  • 「マッピング」には、初めに追加した商品追加グループの各フィールドを指定します

ラジオボタンには固定で「kintone」、それ以外の型番、商品名、価格にはそれぞれ対応するフィールドを選択し、最終的にはこのようなマッピングになります。

「条件」には、「確認・入力ダイアログで「OK」を押した時」を利用します。「アクション」には、先程追加したダイアログを選択しておいて下さい。

このアクションは、このような設定になります。


レコード追加のユーザーへのフィードバック

このままでも動作はするのですが、レコード追加のアクションは見かけ上、ユーザーの見えないところで動作しますので、GUIによるユーザーへのフィードバックが何もありません。ですので、これが成功したらダイアログを表示するように、もう一つアクションを追加しておきましょう。

  • すでに3つのアクションを設定しているので、まず「+」でアクションを追加します
  • 「やること」のカテゴリー:その他のUIにある「情報ダイアログを表示する」が便利に利用できると思います。勿論、他のダイアログや、スペースにメッセージを表示するなどの方法でも構いません。
  • 「条件」として「他のアクションの実行が完了した時」を選択し、アクションには先程の「レコードを追加する」を選択しておきます。

最終的には、このような設定になります。

一旦動作確認

さて、ここまでで一旦動作を確認してみましょう。画面上部の黄色のアイコン「kintoneアプリへ登録」をクリックしてkintoneに登録したあと、見積アプリを開いて商品を追加してみて下さい。


いかがでしょうか?商品リストアプリ側に、レコードが追加されたでしょうか?

もし思ったように動かない場合、カスタマイズを入れたアプリでJavaScriptコンソールを開いてログを確認してみて下さい。


テストとしてこのような商品を追加してみます

テストとしてこのような商品を追加してみます

確認ダイアログで内容を確認し...


OKを押すとレコード追加が実行されます

商品リストアプリ側で、レコードが入ったことを確認して下さい。


もう少し改良してみましょう

ここまでで最低限の動作は確認できましたので、これからもう少し改良してみましょう。

実際に動かしてみると、色々気になる点が出てくるかと思います。

  • 商品名などが空でも追加できてしまう
  • ユニークな型番を自分で決めるのは難しい
  • 商品追加が終わったあと、別の商品を追加する際に先程の値が残ってるのは気になる

少し複雑になってきましたので、今回はこのうち最後の「先程の値が残ってるのは気になる」について改良してみましょう。

(「空でも追加できてしまう」に対応するのは、商品リストアプリ側でそれぞれのフィールドを必須入力にするのが簡単です)


「+」ボタンでアクションを追加し、やること「フィールド値をクリアする」を追加することで実現します。

  • 「やること」のカテゴリー:フィールドから「フィールド値をクリアする」を選択します
  • 「フィールド」は複数選択できますので、商品追加に利用したフィールドをすべて選択します

  • 条件には「他のアクションの実行が完了した時」を選択し、アクションには最後に表示したダイアログを選択しておきます。これで、このダイアログがいずれかの方法で閉じられたあとに、このアクションが実行されます。

以上でカスタマイズは完成です。

「kintoneアプリへ登録」して、動作を確認してみて下さい。


まとめ

ルックアップ元にレコードを追加するカスタマイズは以上になります。このカスタマイズは、ルックアップを使っている場合には非常に出番の多いカスタマイズだと思われますので、是非お試し下さい。


最後に残しました、「型番」をどうするかという問題ですが、これは組織により色々な方法、例えば型番を管理するアプリが別途あり、そこから取得する、など様々考えられます。


単にユニークになればよい、ということであれば例えばCustomineがもつ機能である自動採番を利用する、という手も考えられます。これを利用したカスタマイズは、またの機会にご紹介したいと思います。


もし分からないことがありましたら、フォーラムの方でご質問ください。