関連レコード一覧で参照した値をアプリの一覧画面に表示、または絞り込み条件に利用したい

JavaScript・HTML・CSS初心者です。

関連レコード一覧で参照している値を、アプリの一覧画面に表示したうえで、アプリの一覧画面の絞り込み条件に利用できる様にしたいです。

こちらのURL参照し、参照元アプリの関連レコードを取得することはできています。

こちらのURLも参照しましたが、自分の思う部分をどう切り出すべきかわかっておりません。

目的

アプリAの各レコードに登録されている"担当者"を、アプリBから関連レコード一覧機能で参照しています。

アプリBの一覧画面では、参照した"担当者"を一覧画面にも表示したうえで、一覧表示の絞り込み条件にも使用したいです。(アプリBのフィールドに、関連レコードの値がそのままペーストされるようなイメージが一番望ましいです)

実装優先度的には、一覧表示の絞り込み条件に使用することが最優先です。絞り込みにさえ利用できれば、一覧画面に表示はできなくても構いません。

アプリAとアプリBのレコードは、同一キー値を持つ、1対nの関係です。

アプリA

キー[123] 担当者[XXX]

キー[456] 担当者[YYY]

アプリB

キー[123] 関連レコード[担当者[XXX]]

キー[123] 関連レコード[担当者[XXX]]

キー[123] 関連レコード[担当者[XXX]]

キー[456] 関連レコード[担当者[YYY]]

キー[456] 関連レコード[担当者[YYY]]

キー[456] 関連レコード[担当者[YYY]]

よろしくお願いいたします。

(function () {
  "use strict";
  kintone.events.on(['app.record.detail.show', 'app.record.edit.show'], function (event) {
    // まず、アプリのフィールド設定を取得しておく
    RelatedRecordsFieldManager.prototype.getFieldProperties().then(function () {
    // 関連する一覧のレコードを取得する
      (new RelatedRecordsFieldManager('担当者')).getRecords(event.record).then(function (records) {
      //ここに処理の続きを書くと理解しています。
      });
    });
  });
  // コンストラクタ定義
  var RelatedRecordsFieldManager = (function(fieldCode){
    function RelatedRecordsFieldManager(fieldCode) {
      this.fieldCode = fieldCode;
      this.targetAppId = kintone.app.getRelatedRecordsTargetAppId(fieldCode);
      this.property = this.fieldProperties[fieldCode].referenceTable;
    }
    RelatedRecordsFieldManager.prototype = {
      selfAppId: kintone.app.getId(),
      records: [],
      limit: 500,
      offset: 0,
      getFieldProperties: function(){
        return kintone.api(kintone.api.url('/k/v1/app/form/fields', true), 'GET', {
          app: RelatedRecordsFieldManager.prototype.selfAppId,
        }).then(function(response){
          RelatedRecordsFieldManager.prototype.fieldProperties = response.properties;
        });
      },
      query: function(record){
        return (
          this.property.condition.relatedField +
          '="' +
          record[this.property.condition.field].value +
          (this.property.filterCond ? '" and ' : '"') +
          this.property.filterCond
        );
      },
      getRecords: function(record){
        var _this = this;
        return kintone.api(kintone.api.url('/k/v1/records', true), 'GET', {
          app: this.targetAppId,
          query:
            this.query(record) +
            ' order by ' + this.property.sort +
            ' limit ' + this.limit +
            ' offset ' + this.offset
        }).then(function(response){
          _this.records = _this.records.concat(response.records);
          _this.offset += response.records.length;
          if(response.records.length === _this.limit){
            return _this.getRecords(record);
          }else{
            return _this.records;
          }
        });
      }
    }
    return RelatedRecordsFieldManager;
  })();
})();

 

絞り込みに関しては、関連レコードの「表示するフィールド」にさえ含んでいれば絞り込み条件の選択肢に出現するため、kintoneの標準機能で絞り込みできると思います。一覧に追加する方法について回答します。

以下のような形で追加できます。4~6行目を必要に応じて変更し(一覧画面上では6行目に設定したフィールドに5行目のフィールドの値を追加で表示します。空のフィールドを作れば他のフィールドと同じように見えるかと思います)、50行目または53行目のどちらかを使って下さい(ユーザー選択フィールドであれば53行目にし、1つ目の「join(‘’)」を好きな区切り文字に変えることができます)。

(() => {
  'use strict';

let relatedField = ''; // 関連レコードのフィールドコード
let managerField = ''; // 一覧に追加で表示するフィールド
let managerDisplayField = ''; // 「一覧に追加で表示するフィールド」を追加するフィールド

  let fetchRecords = (query, offset, limit, records) => {
  let getRecords = records || [];
  let body = {
    app: kintone.app.getRelatedRecordsTargetAppId(relatedField),
    query: `${query} order by $id asc limit ${limit} offset ${offset}`
  };

    return kintone.api(kintone.api.url('/k/v1/records', true), 'GET', body).then((resp) => {
    getRecords = getRecords.concat(resp.records);

    if (resp.records.length === limit) return fetchRecords(query, (offset + limit), limit, getRecords);

    return getRecords;
  });
  };

  kintone.events.on('app.record.index.show', (event) => {
  let records = event.records;
  let recordElements = kintone.app.getFieldElements(managerDisplayField);
  let body = {
    app: event.appId
  };

    kintone.api(kintone.api.url('/k/v1/app/form/fields', true), 'GET', body).then((resp) => {
    let relatedFieldProperty = resp.properties[relatedField].referenceTable;
    let selfField = relatedFieldProperty.condition.field;
    let targetField = relatedFieldProperty.condition.relatedField;
    let filterCond = relatedFieldProperty.filterCond;

      for (let i = 0; i < records.length; i++) {
      if (document.getElementById(`add-field-${records[i]['$id'].value}`)) continue;

      let query = `${targetField} = "${records[i][selfField].value}"`;

      if (filterCond) query += ` and ${filterCond}`;

        fetchRecords(query, 0, 100, []).then((getRecords) => {
        let div = document.createElement('div');

          div.id = `add-field-${records[i]['$id'].value}`;

        // 対象のフィールドが文字列フィールドの場合
        div.innerText = getRecords.map((getRecord) => getRecord[managerField].value).join('');
        // 対象のフィールドがユーザー選択フィールドの場合
        // div.innerText = getRecords.map((getRecord) => getRecord[managerField].value.map((user) => user.name).join('')).join('');

          recordElements[i].appendChild(div);
      });
    };
  }).catch((error) => {
    console.error(error);
  });

    return event;
});
})();

mls-hashimoto 様

ご回答いただき、ありがとうございます。

自身の投稿に回答がついた旨の通知様なものをキャッチできず、確認と御礼が遅くなったことをお詫び申し上げます。

ご教示いただいたコードで、試してみます。

取り急ぎ、御礼のご連絡とさせていただきます。

よろしくお願いいたします。

 

mls-hashimotoさま

1個の場合は出来ました。一覧にフィールドを10個ほど追加したいのですが、どの様にすれば出来ますでしょうか?

よろしくお願いします。

「いいね!」 1

別アカウントのように見えますが同一人物です(コミュニティのリニューアルに伴いアカウントの再作成が必要になりました)。

10個あるなら10個分コピペして作るか(それだけAPIリクエストを繰り返すのであまり良くないです)、一覧に描画する部分の処理をループ化させれば良いと思います。どちらの方法でもdiv要素のidが重複してしまうのでユニーク値になるような処理の追加が必要です。
投稿を見直して改めて思うと、このコードを無償で教えているのはかなり頭おかしいと思うので、これ以上の回答はできかねます。

「いいね!」 2

ご返事ありがとうございます。

10個分コピペして作成を試してみたのですが、APIの消費が恐ろしいことになりました。もう少し勉強して一覧に描画する部分の処理をループ化することにチャレンジしてみます。

ありがとうございました。

「いいね!」 1

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。