kintoneプラグイン開発②~ルックアップ自動取得~

アプリアクションでルックアップフィールドをコピーしたい！！っていうシーンがあります。
アクション設定しただけだと、「取得」ボタンを押さないといけないため手間だと言われるので自動で取得するカスタマイズすることがたくさんあります。

app.record.create.showイベントで

record['ルックアップ'].lookup = true; 

としたら良いだけですが、複数のアプリで同じカスタマイズをしていることと、難易度低いことからプラグインにした方がとっつきやすいかなと思い、まずはこのカスタマイズをプラグインにしてみることにしました。

では設定画面から。

config.html

<div id="body">
       <div id="header">
              <h2>レコード新規作成時に自動的にルックアップを取得したいフィールドを選んでください。</h2>
       </div>
       <div class="kintoneplugin-label">自動取得したいルックアップフィールド</div>
       
       
       <div class="kintoneplugin-select-outer">
              <div class="kintoneplugin-select">
                     <select id="select_date_field">
                     </select>
              </div>
      </div>
      
     
       <div class="block">
              <button type="button" id="check-plugin-submit" class="kintoneplugin-button-dialog-ok">　保存する　</button>
              <button type="button" id="check-plugin-cancel" class="kintoneplugin-button-dialog-cancel">　キャンセル　</button>
       </div>
</div>

スタイルシートは51-modern-default.cssにお世話になります。

ドロップダウンにしてルックアップフィールドだけ候補に出力して、そこから選択するようにします。
候補が出力されるだけなので、ごく一般的な感じですね。
その処理が下記です。

config.js

jQuery.noConflict();
(function($, PLUGIN_ID) {
  'use strict';

  // プラグインIDの設定
  var config = kintone.plugin.app.getConfig(PLUGIN_ID);

  // 既に値が設定されている場合はフィールドに値を設定する
  if (config.lookup) { 
    $("#selected").val(config.lookup);
  }

  async function setDropDownForDate() {
    try {
      const resp = await kintone.api('/k/v1/app/form/fields.json','GET',{'app': kintone.app.getId()});
      let $dateDropDown = $('#select_date_field');
      for(var key in resp.properties){
        if(!resp.properties[key].lookup){
            continue;
        }   
          var $option = $('<option></option>');
          $option.attr('value', resp.properties[key].code);
          $option.text(resp.properties[key].label);
          $dateDropDown.append($option);
        }
        if (config.lookup) {
          $dateDropDown.val(config.lookup);
        }
    } catch(error) {
        console.log(error);
        alert("フィールド情報の取得中にエラーが発生しました。");
      }
    }
  
  setDropDownForDate();

  // 「保存する」ボタン押下時に入力情報を設定する
  $('#check-plugin-submit').click(function() {
    kintone.plugin.app.setConfig({lookup:$("#select_date_field").val()});
  });

  // 「キャンセル」ボタン押下時の処理
  $('#check-plugin-cancel').click(function() {
    history.back();
  });

})(jQuery, kintone.$PLUGIN_ID);

フォーム設定の取得APIを使用しました。

レスポンスのパラメータのうち、ルックアップフィールドの設定を表すオブジェクトがあったので、それでルックアップかどうかを判断することにしました。
ルックアップフィールドのフィールド形式は「文字列１行」、あるいは「数値」のどちらかになるので、フィールドタイプでルックアップフィールドかどうかの判断は出来ません。。。

参照先のフィールドタイプで表示されると書かれてます

フォーム設定の取得APIのレスポンスの一部

結構どこで判断したらいいんだ～と探しました。
フォーム設定の取得APIを使うのは初めてだったので、どんなパラメータが返ってくるのか読みこむきっかけとなり勉強になりました。

続いて、メインのPC用JavaScriptファイルがこちら。

customize.js

(function(PLUGIN_ID) {
    "use strict";
    kintone.events.on("app.record.create.show", function(event) {
        const config = kintone.plugin.app.getConfig(PLUGIN_ID);
        const lookup = config.lookup;
        event['record'][lookup].lookup = true;
        return event;
    });
 })(kintone.$PLUGIN_ID);

簡単なカスタマイズですが、プラグインの設定画面で設定した値を取得する処理が加わります。
フィールドコードを保持しているので、取得した値をフィールドコードのところに記述するだけです。
設定画面のconfig.jsの方が難易度高く感じましたが、一度作れば次からのハードルが低くなると思いました！！