Help us understand the problem. What is going on with this article?

kintoneで別アプリの情報を取得してalertのポップアップに表示する

kintoneアプリに任意のボタンを配置して、
別アプリの情報を取得してポップアップで表示する備忘です。

目的

この記事では別アプリのデータを取得としていますが、
実際の目的としては、同じアプリ内に一意で採番されている特定のフィールドの値について、
新規レコード作成時に、一意となる値を設定させるために、最近採番された値を取得したい。
当初は、一覧の先頭に一意に採番されている特定フィールドを表示(かつ降順で並び替え)させて対応していました。

完成系

アプリ画像1.PNG

「採番済発注番号(降順)」をクリックすると、

アプリ画像2.PNG

alertでポップアップに別アプリの情報を取得した結果を表示させる。

やったこと

レイアウトについて

ボタンを追加した場所には、アプリ内でスペースを設定しています。
また、ボタンの装飾は、kintoneの「保存」ボタンと同じcssをjsで設定しています。

アプリ画像4.PNG

アプリ画像5.PNG

JavaScriptについて

以下のように用意されているライブラリと自前で作成した「test.js」を配置しています。
ライブラリは、
https://kintone.github.io/kintoneUtility/kintoneUtility.min.js」をURLで設定するか、
kintone Utility for JavaScriptのGitHub」からライブラリをダウンロードして読み込ませる。
下記の例では後者で対応しています。

アプリ画像3.PNG

自前作成プログラムでは、
別アプリの「発注依頼書番号」と「案件名」を「発注依頼書番号」の降順にして、
14件取得しています。

(function() {
   'use strict';

   // トリガーイベントの記載
   let events = ["app.record.edit.show","app.record.create.show"];

   kintone.events.on(events, function(e) {
        let button = document.createElement('button');
        let alertMessage = "";
        button.innerHTML = '採番済発注番号(降順)';
        button.className = "gaia-ui-actionmenu-save";

        // クエリの作成
        let param = {
            app: 227,
            query: 'order by 発注依頼書番号 desc limit 14',
            fields: ['発注依頼書番号','案件名'],
            totalCount: true,
            isGuest: false
        };

        // kintoneUtilityレコード(複数取得):最大500件
        kintoneUtility.rest.getRecords(param).then((response) => {
            // JSON形式で取得する場合
            //console.log(JSON.stringify(response,null,' '));

            response.records.forEach((record) => {
                alertMessage += record.発注依頼書番号.value + ":" +  record.案件名
.value + "\n"; 
            });

        }).catch((error) => {
            console.log(error.mesage);
        });

        // 追加したボタンがクリックされたときのイベントを設定
        button.addEventListener('click',() => window.alert(alertMessage));

        // 追加したボタンを画面上に追加
        kintone.app.record.getSpaceElement('test').appendChild(button);

   });
})();

参考にした物

kintoneUtility.restは以下の記事を参考にさせていただきました。
大変助かりました。ありがとうございました。

1.「ねばまい」さんのブログ
2.kintone Utility for JavaScriptのGitHub
3.「しゅフリーすたいる」さんのブログ
4.「@kiku38」さんの「kintone Utility for JavaScript を使ってみたよ」

AnoneKihel
2020年は何かしらアドバンドカレンダーかけるようになりたい
https://nenenesochie.hateblo.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away