オープンソースのローコード開発ツールのプリザンター(pleasanter)ブログ

オープンソースのローコード開発ツールのプリザンター(pleasanter)のブログとサービス情報サイトです

カテゴリ : お知らせプリザンターとは?使い方スクリプト・スタイル環境構築事例動画

親テーブルの項目を子テーブルに表示するには?

こんにちは。
リーデックス小川です。

先日、会社のPCが立ち上がらなくなってしまったため、修理にだしたところ、ハードディスクがきれいさっぱり初期化されて戻ってきました。とてもへこみましたが、新規一転がんばれ!ということなのかもしれません。

さて、少しプログラム的な内容となります。公式サイトFAQに掲載されていましたので、検証してみたいと思います。

テーブルを作る

それでは、さっそく始めていきましょう。今回は、親テーブルの項目の値を子テーブルに表示するには?という内容です(https://pleasanter.net/fs/publishes/326120)。これをマスターすると、よりプリザンターを効果的に使えるのではないかと思います。まずは、サンプルテーブルを作ってみましょう。

 

親テーブル(マスタ)

今回は、プリザンターで用意されているテンプレートを利用します。任意のフォルダより新規作成を選択し、タブ「営業」→「顧客情報」を選択し、テーブル名を変えずにそのまま作成します。

f:id:h-ogawa-reedex-co-jp:20190520182414p:plain

 

子テーブル

同様にこちらもテンプレートを利用します。タブ「営業」→「商談管理」を選択し、テーブル名を変えずにそのまま作成します。

f:id:h-ogawa-reedex-co-jp:20190520182612p:plain


作成後、商談管理(子テーブル)から顧客情報(親テーブル)へのリンクを設定します。商談管理の分類Aが「顧客名」ですので、これに設定してください。

f:id:h-ogawa-reedex-co-jp:20190520182714p:plain

 

リンクの設定方法の詳細は下記をご覧ください。

pleasanter.hatenablog.jp

pleasanter.hatenablog.jp

pleasanter.hatenablog.jp

 

上記設定後に、顧客情報と商談情報に適当にサンプルデータを登録します。詳細は割愛しますので、適度に登録してみてください。顧客情報のメールアドレスは利用しますので、値は適当に入れておいてください。

 

プログラミングしてみる。

それでは、実際にプログラミングを行ってみます。今回は、商談情報のスクリプトに設定しますので、管理画面の商談情報のスクリプトまで遷移してください。

スクリプトについてよくわからない方、復習したい方は下記をご覧ください。 pleasanter.hatenablog.jp

 

さて、ここで公式FAQを除くと、下記のように記載があります。

1.スクリプトを設定したいテーブルを選択してレコード一覧画面を表示する
2.画面右上の[管理]-[テーブルの管理]を選択し、テーブルの管理画面を表示する
3.[スクリプト]タブを選択後「新規作成」ボタンを押下し、スクリプトの設定を行う
4.「タイトル」「スクリプト」を記述したら、「出力先」で"新規作成","編集"にチェックを付ける
 ※[ダイアログで編集]の設定をしている場合、"一覧"にもチェックが必要です

今回は、タイトルに「顧客情報のメールアドレスを表示」、出力先は「新規作成」「編集」にチェックを入れます。

スクリプトについては、サンプルを少し修正しました。今回は「商談情報の顧客名を変更すると、顧客情報に設定されたメールアドレスが商談情報の内容に表示される」というプログラムにしてみます。上記に仕様に従って、公式FAQのサンプルコードを修正したものは下記となります。

//編集画面読込時のイベント
$p.events.on_editor_load = function () {
  getParentData();
}

//商談管理の「分類A(顧客名)」の値が変更されるたびに呼び出されるイベント
$(document).on('change', '#Issues_ClassA', function () {
  getParentData();
});

function getParentData() {
  //商談管理の「顧客名」に値がセットされている場合のみ、顧客情報のメールアドレスを受け取る
  if ($('#Issues_ClassA').val()) {
    $p.apiGet({
      //商談管理の「分類A」の値(レコードID)を指定
      'id': $('#Issues_ClassA').val(),
      'done': function (data) {
        //商談管理の「内容」に顧客情報から取得した「メールアドレス」の値をセット
        $p.set($('#Issues_Body'), data.Response.Data[0].ClassG);
      },
      'fail': function (data) {
        console.log(data);
      }
    });
  } else {
    //商談管理の「顧客名」に値がセットされていない場合、商談管理の「内容」に空文字をセット
    $p.set($('#Issues_Body'), '');
  }
}

 

サンプルは記録テーブルですが、商談情報が期限付きテーブルなので、「Result_」は「Issues_」に変更されます。また、項目は違いますので、プログラムを見比べてみてください。確認いただけたら、上記を先ほどのスクリプトに貼り付け、変更してください。「$p.events.on_editor_load」や$p.set」については、それぞれ下記の公式FAQをご参照ください。
https://pleasanter.net/fs/publishes/270552
https://pleasanter.net/fs/publishes/266431

 

確認してみる。

それでは変更してみましょう。商談情報のメニュー「新規作成」をクリックすると、新規画面が表示されます。

f:id:h-ogawa-reedex-co-jp:20190520190623p:plain

 

顧客名を選択すると、内容に顧客情報で設定されているメールアドレスが表示されます。

f:id:h-ogawa-reedex-co-jp:20190520190705p:plain

 

登録済みのデータでも同じように動作するので確認してみてください。

 

まとめ

今回は、親テーブルの項目を子テーブルに表示してみました。これができるようになると、マスタのデータをいろいろなテーブルに表示できるようになるため、使い勝手が非常に上がると思います。ぜひ使いこなしてください。

それでは、今回はこの辺で。
最後までご覧いただき、ありがとうございました。