KINTONEのカスタマイズビューの作成について

kintone カスタマイズ
1

背景・実現したいこと

初めまして。

こちらの記事（https://developer.cybozu.io/hc/ja/articles/202905604-%E7%AC%AC7%E5%9B%9E-%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA%E3%83%93%E3%83%A5%E3%83%BC%E3%82%92%E5%88%A9%E7%94%A8%E3%81%97%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86）を参考にカスタマイズビューを作成しようと考え、以下のコードを記述いたしました。

しかし、以下の画像のように一番上の項目を表示されるのですが、中身のデータは表示されない状態です。

ソースコード（本文下部の「利用したソースコード」参照）も「フィールドコード」を変更したくらいでですが、何が原因か調べても全く分かりません。

何卒ご助力のほどよろしくお願いいたします。

利用したソースコード

 

(function() {
    ‘use strict’;
    /* global tippy */
    kintone.events.on([‘app.record.index.show’], function(event) {
  
   if (event.viewId === 6465098) { // 一覧名判断
      window.alert(‘テスト’);
      return event;
   }
 
     const records = event.records;
 
  const recUrl = location.protocol + ‘//’ + location.hostname + ‘/k/204’ + ‘/show#record=’;
      const myRecordSpace = document.getElementById(‘my-tbody’);
      myRecordSpace.innerText = ‘’;
 
  for (let i = 0; i < records.length; i++) {
      const record = records[i];
      const row = myRecordSpace.insertRow(myRecordSpace.rows.length);
      const cell1 = row.insertCell(0);
      const cell2 = row.insertCell(1);
      const cell3 = row.insertCell(2);

      const tmpA = document.createElement(‘a’);
      tmpA.href = recUrl + record.日付.value;
      tmpA.innerText = record.日付.value;
      cell1.appendChild(tmpA);

      cell2.innerText = record.buy1.value;
      
      const createdAt = record.理由.value;
cell3.innerText = createdAt.toLocaleString();

  }
    
   
 });

2

完全に同じ状態を再現できていないのですがおそらく近しい状態にしてみると

Uncaught SyntaxError: Unexpected end of input

というエラーがコンソールに表示されていました。  

カスタマイズしたファイルの終わり部分の

});

についていましたので、括弧の対応が合っているか確認してみてください。

3

ありがとうございます。

確かに最後の括弧がおかしかったので、「})});」に正しく直しました。

ただ、データの中身は表示されないままです…

4 
   if (event.viewId === 6465098) { // 一覧名判断
      window.alert('テスト');
      return event;
   }

意図したものですか？もし、event.viewId === 6465098だったらテストと表示して、その後を実行しません。

もし、それでもだめならブレイクポイントを入れながら試しましょう。

動かない？そんな時はデバッグをしてみよう！入門編 – cybozu developer network
https://developer.cybozu.io/hc/ja/articles/207613916

5

ありがとうございます。

if (event.viewId === 6465098)の部分は、どんな機能があるの知りたいので意図して作成しました。

以下のように直し、デバッグも行ってみたのですが未だ分からずじまいです。。。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

(function() {
    ‘use strict’;
    /* global tippy */
    kintone.events.on([‘app.record.index.show’], function(event) {
  
   if (event.viewId === 6465098) { // 一覧名判断のため意図しました
      window.alert(‘テスト’);
     
 
     const records = event.records;
 
  const recUrl = location.protocol + ‘//’ + location.hostname + ‘/k/204’ + ‘/show#record=’;
      const myRecordSpace = document.getElementById(‘my-tbody’);
      myRecordSpace.innerText = ‘’;
 
  for (let i = 0; i < records.length; i++) {
      const record = records[i];
      const row = myRecordSpace.insertRow(myRecordSpace.rows.length);
      const cell1 = row.insertCell(0);
      const cell2 = row.insertCell(1);
      const cell3 = row.insertCell(2);

      const tmpA = document.createElement(‘a’);
      tmpA.href = recUrl + record.日付.value;
      tmpA.innerText = record.日付.value;
      cell1.appendChild(tmpA);

      cell2.innerText = record.buy1.value;
      
      const createdAt = record.理由.value;
cell3.innerText = createdAt.toLocaleString();

  }
     
   }
    })});
   ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

6

問題を切り分けましょう。

エラーはどんなエラーがでますか？どの部分で意図しない動作になっていますか？

よくわからないことにわからないことを重ねても難しいです。

(() => {
  'use strict';

  // レコード一覧画面
  kintone.events.on('app.record.index.show', (event) => {
    // ここに処理を記述
  });
})();

と同じ形、括弧の対応、数などは一致していますでしょうか？

いったん、カスタマイズビューのことは忘れて、
console.log()でレコードデータが出力できるかどうか確認しましょう。一番確実なところまでもどって、わかる部分を積み重ねておかしいところを特定します。

動かない？そんな時はデバッグをしてみよう！入門編 – cybozu developer network
https://developer.cybozu.io/hc/ja/articles/207613916

7

いくらコードを見直してもおかしな箇所が見つからないので、上記のコードより下に記述してある別のカスタマイズのコードを確認したところ、「）」が一つ余分に記述してありました。

それを削除したところ、カスタマイズビューがちゃんと表示されました！

全く関係ないコード同士でも、少しの間違いが他のシステムに影響を及ぼすことがあるんですね・・・・。勉強になりました。

お手数をおかけしました。本当ありがとうございます。

8

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