テーブル内の添付ファイルの有無判定について

複数の添付ファイルの有無判定を参考にテーブル内項目に添付ファイルフィールドを配置して、行毎の添付ファイルの有無判定をしたいと考えております。

参考にした内容でlet inputFiles = document.querySelectorAll(‘.input-file-cybozu’);として

inputFiles[0].querySelectorAll(‘.plupload_file_name’).length;など、配列で判断することは理解できたのですが、下記のforEach((r)文中に該当行での判断をしたい場合に、inputFiles[0].querySelectorAll(‘.plupload_file_name’).length の組み込み方がわかりません。

記載方法を伝授願えませんでしょうか。

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

 

kintone.events.on(“app.record.create.submit”, function(event){

      
      let inputFiles = document.querySelectorAll(‘.input-file-cybozu’);

       event.record.Table.value.forEach((r) => {
  
–>??         if (inputFiles[0].querySelectorAll(‘.plupload_file_name’).length != 0 ){
        
            }
        })

        return event;

   });

 

参考)

https://developer.cybozu.io/hc/ja/community/posts/360054731191-%E8%A4%87%E6%95%B0%E3%81%AE%E6%B7%BB%E4%BB%98%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E6%9C%89%E7%84%A1%E5%88%A4%E5%AE%9A

マル 様

こんにちは。

 

forEach は難しいですよね。

いちよう使い方は以下の記事の通りです。

Array.prototype.forEach() - JavaScript | MDN (mozilla.org)

この forEach((r) …) の部分ですが、例えばリンクの記事を修正した場合はこうなります。

const array1 = ['a', 'b', 'c'];

array1.forEach((r) => console.log(r));

// expected output: "a"
// expected output: "b"
// expected output: "c"

 

現状ですと、たぶんこれでも難しいですよね。

だとした場合、もっと直感的な for文を利用した方が良いかと思います。

for (let i = 0; i < inputFiles.length; i++) {
  if (inputFiles[i].querySelectorAll(".plupload_file_name").length !== 0) {
    console.log("あり");
  } else {
    console.log("なし");
  }
}

こんな感じでの利用ですね。

 

参考になるかもしれないので、いちようおまけで forEach((r) => …) だとどうなるかものせときますね。

inputFiles.forEach((r) => {
if (r.querySelectorAll(".plupload_file_name").length !== 0) {
    console.log("あり");
  } else {
    console.log("なし");
  }
});

その後の処理もあると思いますので、参考になれば幸いです。

新屋 育男様

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

event.record.Table.value.forEachでテーブルを行処理しながら、同行のinputFiles[]の配列を指定したいのです。

ご指摘頂いた、forEachの使い方等いろいろ調べていたところ、下記の記述を見つけました。

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

コールバック関数は引数として3つの値を受け取ることができます。

  1. array.forEach( function( value, index, array ) {
  2.  
  3. // 繰り返し処理を書く
  4.  
  5. });

上記のとおり、value、index、arrayの3つの引数を取得できます。

それぞれの意味は次のとおりです。

  • value:配列データの値
  • index:配列のインデックス番号
  • array:現在処理している配列

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

配列のインデックス番号をforEachの引数で求められるそうなので、以下にて確認したところ、とりあえず意図した結果になったのですが、使い方として間違っているでしょうか?

ご指摘頂ければ助かります、よろしくお願いいたします。

event.record.Table.value.forEach((r, index ) => {
 
         if (inputFiles[index].querySelectorAll(‘.plupload_file_name’).length != 0 ){
        
            }
        })

 

マル 様

結論からお伝えしますね。

処理の方法としては、あまり好ましくはないです。

 

理由は、現状処理したサブテーブルの中に存在する添付ファイル(一行に一つのみの場合)の他にフォームに添付ファイルが存在しないのであれば結果はイコールなのですが、フォームに新たに添付ファイルのフォームを追加(追加する位置による)したときに挙動がおかしくなります。

まぁ、個人で使うだけで後に上記のような懸念点などを気にする必要がなければ、とりあえず動くのであればそれで良いかとも思います。

新屋 育男様

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

確かに、添付するファイルを複数もしくは、別の添付ファイルの項目を追加した場合など、配列の数がテーブルの行数と違っており意図する結果にはならないようです。

おっしゃる通り、とりあえず動くではダメなので、何か良い方法はないでしょうか?

マル 様

こんにちは。

要所要所で、この時はこうだ、あの時はああだ。

みたいに複雑になりますので、何か良い方法とのことですが、これらの結果すべてに対応することが方法の一つとなります。

また、DOM操作ですので kintoneの仕様が変更されたときに再度メンテナンスが必要であったりします。

 

また、event.record.Table.value.forEach((r, index ) => { このように記述されたいとのことですが、それが何故その必要があるのかが要件がわかりかねますので、私にはお答えするのが難しいのが現状です。

まずは、もう少し実現されたい内容を細かく認識されることから始められてはいかがでしょうか?

※添付ファイルは、必ず一つなのか? 行単位でDOMを取得していく必要があるのか? など

 

最後に、私が考えられる対応方法としては、有無の判定をされたい対象となるDOMの取得を細かく絞り、それを取得し処理をする方法で対応をしてみて下さい。

例えば、対象となるサブテーブルの添付ファイルフィールド を全て、又は対象となるサブテーブルの添付ファイルフィールドのみ、みたいな感じで一つ一つ丁寧にしていけば実現できると思います。

また、この内容(対象のDOMの取得方法)ですと最初のご質問内容と変わってしまっていますので、もう少しご質問されたい内容の資料をまとめられて別でスレッドを立てられると良いかと思います。