キントーンの一括承認

katty · 2024 年 7 月 2 日午後 12:12

5年ほど前からキントーンを導入していたのですが、導入だけして有効活用しておらず、SEを雇う予算も無いので、素人が勤怠システムなどを作っております。
大量に届く申請に対して、一括承認ボタンを設けたいと思っており、ネットで検索していると正にピッタリの検索がヒットしました。
ワンクリックで一括承認をしてみよう - cybozu developer network

こちらに掲載されているjsとcssのソースコードを丸々コピーしたのですが、検索ページの様に一覧画面に「一括承認」というボタンが出てきません。

上記のコードを処理する以前にキントーンで行う設定等あるのでしょうか？

今回、処理したコードを載せさせていただきます。
【js】

/*
 * ワンクリックで一括承認するプログラム
 * Copyright (c) 2016 Cybozu
 *
 * Licensed under the MIT License
*/
(() => {
  'use strict';
  kintone.events.on('app.record.index.show', (event) => {
    const appId = kintone.app.getId();
    if (event.viewId !== 199) {
      return event;
    }
    const el = kintone.app.getHeaderSpaceElement();
    if (el.querySelector('.header-contents')) {
      return event;
    }
    const headerDiv = document.createElement('div');
    headerDiv.className = 'header-contents';
    // make a button for approval.
    const balusButton = document.createElement('button');
    balusButton.className = 'approval-button';
    balusButton.textContent = '一括承認！';
    balusButton.addEventListener('click', () => {
      if (event.records.length > 0) {
        window.swal({
          title: '本当に全て承認して大丈夫ですか？',
          text: '表示されているレコードを全て承認します',
          type: 'warning',
          showCancelButton: true,
          confirmButtonColor: '#DD6B55',
          confirmButtonText: '承認！',
          cancelButtonText: 'やっぱりやめる',
          closeOnConfirm: false
        },
        () => {
          const records = event.records.map(record => ({
            id: record.$id.value,
            action: '承認'
          }));
          const requestObj = {
            app: appId,
            records: records
          };
          kintone.api(kintone.api.url('/k/v1/records/status', true), 'PUT', requestObj, () => {
            window.swal({
              title: '承認に成功しました！',
              text: 'お疲れ様でした。',
              // eslint-disable-next-line max-nested-callbacks
              type: 'success'}, () => {
              location.reload();
            });
          });
        });
      } else {
        window.swal({
          title: '申請中のレコードがありません',
          type: 'warning'
        });
      }
    });
    headerDiv.appendChild(balusButton);
    headerDiv.appendChild(document.createElement('br'));
    el.appendChild(headerDiv);

    return event;
  });
})();

【css】

.header-contents{
border: 1px dashed #D8D8D8;
text-align: center;
}

完全に素人なのですが、ご教示いただければと思います。

TaroTanaka · 2024 年 7 月 2 日午後 10:15

kattyさん、こんにちは！

回答ではなく申し訳ないのですが、
現状のご質問の記載だと、コードがすごく読みづらくなってしまっています。

質問内容の編集ボタンを押していただくと、編集画面の上に

このようなボタンがあると思います。
そのボタンを押していただきますと、

のように表示されますので、
この「コードをここに入力または貼り付け」のところに該当コードをコピーし直してもらえると、
回答者が読みやすくなり、回答がもらえるかもしれません。

mura · 2024 年 7 月 2 日午後 11:12

フィールドコードがあげてもらっているコードとずれていたり必要なファイル（sweetalert）があげられてなかったりする可能性もあるかと思います

まずはエラーがなにかでてないかみてみてください
https://cybozu.dev/ja/id/42b1d7ce01fd5d9b53dbf4df/#reference-guide-2

katty · 2024 年 7 月 3 日午前 12:09

ご指摘有難うございます。
ご指摘の通りにやってみると少し変わりました。

akika · 2024 年 7 月 3 日午前 12:51

参考していた記事のサンプルコードを試してみたら、動きました。
muraさんのおっしゃる通り、プロセスのアクション「承認」や一覧IDがご自身の環境とずれているかもしれません。

katty · 2024 年 7 月 3 日午前 1:04

URL添付ありがとうございます。
少し読み込んでみたいと思います。

katty · 2024 年 7 月 3 日午前 1:06

書き込みありがとうございます。
動いたんですか・・・。
一覧IDは自分が使うキントーンのURLの一番後ろの番号ですよね？
であれば間違いないとは思っています。

承認のアクションが間違っているという事ですね。
こちらも確認してみます。
ありがとうございます。

akika · 2024 年 7 月 3 日午前 1:37

記事にも書いている通り、一覧IDは「一括承認」ボタンを配置したいアプリの一覧を開いている時の、URL末尾の数値です。
view=数値という形で表示されます。

次の例だと、申請中（承認待ち）のレコードを絞り込んだ一覧「ワンクリック承認」に「ボタン」を配置します。
この場合、一覧IDは、「ワンクリック承認」一覧を選択した状態でのURLの最後の数値になります。

承認のアクションはどのように設定しているかは、「アプリ設定」→「プロセス管理」から確認できます。

次の例では、レコード登録者が「申請」アクションを実行後、上長者が「承認/却下」のアクションを実行するので、コードでは action: '承認' を設定します。

katty · 2024 年 7 月 3 日午前 6:15

詳しくご説明ありがとうございます。
お陰でボタンが表示されました。
ですが、試しに一括承認をした所、一括承認が出来ませんでした。
ご指摘のアクションはアクション名と一致させているのですが、これ以外に間違いがあるのでしょうか？

katty · 2024 年 7 月 3 日午前 6:36

ちなみに現在のプロセス管理は下記の図の通りです。

/*
 * ワンクリックで一括承認するプログラム
 * Copyright (c) 2016 Cybozu
 *
 * Licensed under the MIT License
*/
(() => {
  'use strict';
  kintone.events.on('app.record.index.show', (event) => {
    const appId = kintone.app.getId();
    if (event.viewId !== 5528405) {
      return event;
    }
    const el = kintone.app.getHeaderSpaceElement();
    if (el.querySelector('.header-contents')) {
      return event;
    }
    const headerDiv = document.createElement('div');
    headerDiv.className = 'header-contents';
    // make a button for approval.
    const balusButton = document.createElement('button');
    balusButton.className = 'approval-button';
    balusButton.textContent = '一括承認！';
    balusButton.addEventListener('click', () => {
      if (event.records.length > 0) {
        window.swal({
          title: '本当に全て承認して大丈夫ですか？',
          text: '表示されているレコードを全て承認します',
          type: 'warning',
          showCancelButton: true,
          confirmButtonColor: '#DD6B55',
          confirmButtonText: '承認！',
          cancelButtonText: 'やっぱりやめる',
          closeOnConfirm: false
        },
        () => {
          const records = event.records.map(record => ({
            id: record.$id.value,
            action: '最終承認へ'
          }));
          const requestObj = {
            app: appId,
            records: records
          };
          kintone.api(kintone.api.url('/k/v1/records/status', true), 'PUT', requestObj, () => {
            window.swal({
              title: '承認に成功しました！',
              text: 'お疲れ様でした。',
              // eslint-disable-next-line max-nested-callbacks
              type: 'success'}, () => {
              location.reload();
            });
          });
        });
      } else {
        window.swal({
          title: '申請中のレコードがありません',
          type: 'warning'
        });
      }
    });
    headerDiv.appendChild(balusButton);
    headerDiv.appendChild(document.createElement('br'));
    el.appendChild(headerDiv);

    return event;
  });
})();コードをここに入力または貼り付け

akika · 2024 年 7 月 4 日午前 12:19

mura さんに貼っていただいたページを参考に、どんなエラーが出ているか、ご確認いただけますでしょうか？

サンプルコード自体は記事通りに設定すれば正常に動きます。

katty · 2024 年 7 月 4 日午前 12:26

ありがとうございます。
確認させていただきます。

katty · 2024 年 7 月 4 日午後 1:00

デバックの検査をしてみた所、下記の様なコードが表示されました。
素人故、意味が全く分からないのですが、何をどう処理すれば良いかご教示いただければと思います。


    "code": "CB_JH01",
    "id": "HFpGw7dvZVNJOmYwGr2J",
    "message": "認証に失敗しました。セッション認証には、「X-Requested-With」ヘッダーが必要です。"
}

akika · 2024 年 7 月 5 日午前 12:30

コードの最後にある[コードをここに入力または貼り付け]を削除したらどうなりますか？

また、失礼ながら業務で使うコードを理解せずに適用するのはかなり危険です。

偶にカスタマイズするのでSEを雇うほどではないのであれば、
サイボウズのパートナーにお願いする手もあります。

katty · 2024 年 7 月 5 日午前 12:57

ご連絡ありがとうございます。
「コードをここに入力または貼り付け」はこの本文に貼り付けする際に
表示されていたものなので、実際にはこの一文は入っていないです。
紛らわしくてすみません。

コード理解せずの部分は本当に自分も納得です。
会社はシステム関係を安易に考えすぎているんです。
私も同じような事を会社に言ったのですが、通じずで。

        try {
            Qp(this),
            0 < this.m && ((this.Ra = Hp(this.h)) ? (this.h.timeout = this.m,
            this.h.ontimeout = Ca(this.Cd, this)) : this.M = Go(this.Cd, this.m, this)),
            this.G = !0,
            this.h.send(a),
            this.G = !1
        } catch (h) {
            Kp(this)
        }

最後にここだけ分かればご教示ください
デバックの検査をした所、 this.h.send(a),の部分がおかしいと表記が出ました。
ここをどうしたら良いかお判りでしょうか？

akika · 2024 年 7 月 5 日午前 2:00

会社はシステム関係を安易に考えすぎているんです。
私も同じような事を会社に言ったのですが、通じずで

背景知らず、失礼しました。

貼っていただいたコードからすると、
おそらくこれはご自身が適用したJSではなく、kintone 標準のJSだと思います。
コードが何読化されていてあまり読めないです。
エラー原因はやはり今回適用したJSにあると思います。

コンソールで自分が適用したJSを確認するには、

ブラウザのコンソールを開く
ソースタブをクリックする。
次のスクショのように、js配下にある「download.do?..」のファイルをクリックする
表示されているコードはご自身で適用したものと一致するものを探します。

スクリーンショット 2024-07-05 10.39.211355×803 177 KB

また、貼っていただいたコードを手元のkintone環境に適用し、プロセスも同じ設定した上で、検証したところ問題なく動きました。
なので、ワンクリックで一括承認をしてみよう - cybozu developer network をよく読んで、設定が漏れていないかご確認いただけますでしょうか。

それでも解決できなかった場合、
次のページを参考に、デバッグしてみてください。
デバッグをしてみよう

katty · 2024 年 7 月 6 日午前 10:39

色々と試していただいてありがとうございます。
ちなみに今更ですが、今回の一括承認をするにあたり、私はワンクリックで一括承認をしてみよう - cybozu developer network
の旅費精算アプリを使っているのではなく、自分でオリジナルに作っている交通費精算アプリに今回の一括承認を導入しようと思っております。

上記が私の作っているアプリなのですが、このアプリだから承認が上手くいかないって事ありますかね？

akika · 2024 年 7 月 8 日午前 4:32

このサンプルコードに使っているアプリの情報は「アクション（承認）」と一覧番号だけです。
他のアプリの設定はどのように設定してもコードの実行に関係ないはずです。

推測ですが、申請中の一覧はもしかしてご自身の承認権限がないではないかと思います。
承認ボタンを押せるのは、承認者に指定される人だけです。

katty · 2024 年 7 月 8 日午後 12:44

何度もご回答いただいて本当にありがとうございます。
承認の権限ですが、個別に1つ1つ承認をしようとすると、それは普通に承認できるんです。
なので、承認権限は問題ないのかと思われます。
ちなみに書き込みにある「一覧番号」とは何のことでしょうか？

katty · 2024 年 7 月 8 日午後 2:54

投稿間違いです
投稿の削除が分からなかったので編集しております。
下記が書きたかった内容です。

トピック		返信	表示
一括承認時の未読通知について kintone カスタマイズ	2	72	2021 年 10 月 12 日
一括承認の方法 kintone カスタマイズ	17	255	2021 年 6 月 29 日
一括申請について kintone カスタマイズ	6	157	2022 年 7 月 13 日
ワンクリックで承認　カスタマイズ kintone カスタマイズ	8	99	2020 年 8 月 4 日
Kintoneモバイル版の一覧から一括承認 kintone カスタマイズ	6	78	2024 年 8 月 25 日

キントーンの一括承認

Related topics