カスタムビュー作成について（HTML、JavaScript）

t.sato

2021年06月01日 02:02

初心者で申し訳ないのですが、色々調べたのですが分からず
ご存じの方がいましたら教えていただけますでしょうか。

現在カスタムビューを現在作成しているのですが、最終系は下記カスタムビューの
各セルに計算された数値をセットしたいのですが、その前段として赤枠に部分に
数値をセットしたいと思っておりますが、表示されない状況です。

※2013年1月のセル計算式　⇒　各レコードの合計（期間指定含む　2013年1月）
※2013年2月のセル計算式　⇒　各レコードの合計（期間指定含む　2013年2月）
※対年1月のセル計算式　⇒　2013年1月の各レコードの合計 / 2013年の各レコードの合計（パーセント表示）
※売上の月部分(行)と売上の縦列は固定としたいです。
※デバックすると「ReferenceError: row is not defined」で行が定義できていない？

■HTML
<div id="my-customized-view">
  <table border="1">
<colgroup><col id = "data"><col id = "Place"></colgroup>
<colgroup><col id = span = "12" id ="count"></colgroup>
<tr>
  <th>売上</th>
  <th>1月</th><th>2月</th><th>3月</th><th>4月</th><th>5月</th><th>6月</th>
  <th>7月</th><th>8月</th><th>9月</th><th>10月</th><th>11月</th><th>12月</th>
</tr>
<tbody id="my-tbody2013">
<tr>
  <td>2013年</td>
  <td></td><td></td><td>3</td><td>4</td><td>5</td><td>6</td>
  <td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td>
</tr>
</tbody>
<tbody id="my-tbody2013T">
<tr>
  <td>対年</td>
  <td></td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>
  <td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td>
</tr>
</tbody>
<tr>
  <td>対前年</td>
  <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>
  <td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td>
</tr>
<tr>
  <td>2014年</td>
  <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>
  <td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td>
</tr>
<tr>
  <td>対年</td>
  <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>
  <td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td>
</tr>
<tr>
  <td>対前年</td>
  <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>
  <td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td>
</tr>
  </table>

</div>

■JavaScript

※セル１つにすら表示させることができず。。。。

(function() {

    "use strict";

    kintone.events.on('app.record.index.show', function(event) {

        if (!document.getElementById('my-customized-view')) {　//102cus HTMLとイコールにする。

            return;

        }




var records = event.records;

if (records.length === 0) {

    document.getElementById('my-customized-view').innerText = '表示するレコードがありません';

    return;

}

//※※※※※※※※※※

var myRecordSpace = document.getElementById('my-tbody2013');

myRecordSpace.innerText = '';

var cell2 = row.insertCell(1);

cell2.innerText = record.小計1.value;

    }

    );

})();

宜しくお願いいたします。

18件のコメント

江田篤史 2021年06月01日 02:27

t.satoさん

お世話になっております。

仰る通り、rowが定義されていないのかと思います。

今回のようにHTMLの記述で既に<td>要素まで作成している場合は、row.insertCell()で追加の作成はせずに、getElementsByTagName()などで取得するとよいかと思います。

myRecordSpace.getElementsByTagName('td')[1].innerText = '1';

Lorenz Ras 2021年06月01日 03:05

HTMLで<td>要素に id 属性を付き、

それを document.getElementById()でアクセスするやり方もあると思います。

Lorenz Rasにより編集されました 2021年06月01日 10:29

t.sato 2021年06月01日 06:55

江田様
お世話になっております。
早速のご返信ありがとうございます。

お教えいただきました、getElementsByTagName()を使用して　2013年行の1月、2月、3月とテストで表示させることができました。

すみません追加でご質問させていただきたいのですが、、、、
カスタムビューを表示する同じアプリ内に、見積合計のフィールドがありまして表示させようとすると
以下のように表示されない状態になってしまいます。（goukei2013で宣言）
※「Uncaught TypeError: Cannot read property '見積合計' of undefined」プロパティに問題あり？
※「見積合計」は各フィールド「小計1～20」を合計したフィールドになります（テーブル未使用）
　最終的に見積日から年度を取得し、集計したいのですが、この場合「query」などを使った方が
　集計しやすいのでしょうか（まだquery部分はわからないところもあり使ったことがありません。。）

■JavaScript　一部抜粋
//※※※※※※※※※※
var record = event.record;
var goukei2013 = Number(record['見積合計'].value);

var myRecordSpace = document.getElementById('my-tbody2013');
myRecordSpace.getElementsByTagName('td')[1].innerText = '123';
myRecordSpace.getElementsByTagName('td')[2].innerText = '456';
myRecordSpace.getElementsByTagName('td')[3].innerText = 10*10;
myRecordSpace.getElementsByTagName('td')[4].innerText = goukei2013

var myRecordSpace2013T = document.getElementById('my-tbody2013T');
myRecordSpace2013T.getElementsByTagName('td')[1].innerText = 'A123';
myRecordSpace2013T.getElementsByTagName('td')[2].innerText = 'A456';

宜しくお願いいたします。

t.sato 2021年06月01日 07:02

Lorenz Ras様

お世話になっております。
先日に引き続きありがとうございます。

勉強不足で申し訳ないのですが、document.getElementById()を使うとき、
<td id = 〇〇>みたいな形で、１ずつ割り当てていくイメージでしょうか？

Lorenz Ras 2021年06月01日 11:14

t.sato様

そうです。そのほかに .rows() と　.cells() の組み合わせもできます。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/table

「Uncaught TypeError: Cannot read property '見積合計' of undefined」プロパティに問題あり？

console.log(event);　の結果は何でしょうか。

日本語をまだ勉強中ですみません。

Lorenz Rasにより編集されました 2021年06月01日 11:14

t.sato 2021年06月02日 05:50

Lorenz Ras様

お世話になっております。
日本語お上手です、コメントいただいた内容は理解できますので安心してください。

色々と情報ありがとうございます。参考にさせていただきます。

↓ご質問いただきました件ですが、、、
>console.log(event);　の結果は何でしょうか。
こちらの件は、色々調べたところ、以下のように修正いたしましたが、

■修正前
var goukei2013 = Number(record['見積合計'].value);

■修正後
var goukei2013 = Number(record[見積合計].value);

新たにConsoleで確認したところ「Uncaught ReferenceError: 見積合計 is not defined」と表示されました。
アプリ内で、加算されているフィールドは、直接使用することはできないのでしょうか？

Lorenz Ras 2021年06月02日 06:49

t.sato様

undefined

というエラーでしたら、フィールドコードが間違っているか、呼び方がeventのJSONの構造にあっていないことだと思います。

「Uncaught ReferenceError: 見積合計 is not defined」

その文法ですと、コンパイラーが変数型として見えるので、宣言されていない変数型というエラーが出ます。以下のコードでそのエラーがなくなると思います。

const 見積合計 = '見積合計';
let goukei2013 = record[見積合計].value;

文法は以下のいずれも出来ます。結果は同じです。

record['フィールドコード']['value'];
record.フィールドコード.value;
record['フィールドコード'].value;

console.log(event)

で、イベントのJSONリスポンスのスキーマ（構造？）が分かります。

app.record.index.showというイベントなら、event.recordではなくevent.recordsがあっていると思います。

console.log(event)；　で、フィールドコードも確認しましょう。

Lorenz Rasにより編集されました 2021年06月02日 07:04

t.sato 2021年06月03日 02:23

Lorenz Ras様

お世話になっております。
すみません、console.log(event);　はどのように使えば良いですか？
エラーの内容はいつもGoogleChromeのデバックモードのConsoleから確認していました。
現状の内容は以下のような感じです。

緑色の部分は、値が表示されていますが、
赤は表示されず、その影響でオレンジも表示されない状況です。

以下内容が、GoogleChromeのデバックモードのConsoleから確認した内容です。

下記が、一覧に表示させたい「見積合計」のフィールドになります。

Lorenz Ras 2021年06月03日 05:45

t.sato様

recordは宣伝されていないようです。

var records　と違います。

そして、このコードは

record[見積合計].value

以下のコードに

records[0]['見積合計'].value

変化してみてください。

[0]　は　配列から頭のレコードを取得します。全部取得したいなら、

反復処理が必要です。https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Loops_and_iteration

そしてrecords　の　内容を確認てください。

確認するには、var records ... 宣言の下にconsole.log(records)を追加し、GoogleChromeのデバックモードのConsoleでrecordsの行を開いてください。

console.log()のメソッドは主に、渡された値をコンソールに表示するために使用します。これで、返ってきたeventのJSONの内容を確認することが出来ます。そこから、どういう風に欲しい値を取得出来るかわかります。

わかりづらい日本語で申し訳ございません。

Lorenz Rasにより編集されました 2021年06月04日 09:04

t.sato 2021年06月04日 01:50

Lorenz Ras様

お世話になっております。
返信ありがとうございます。console.log()の件、records[0]の件、意味を理解でき表示できました。

今は、レコードの「見積合計」を全部取得したいので、反復処理を作成しているのですが、
本来、9500と表示して欲しいのですが、3000と6500が文字列として？？で表示されます。

コードは以下の通りなのですが、numberやparseIntも使ってみたのですが、うまく表示されませんでした。
お手数おかけしますが教えていただけますでしょうか。

var goukei2013 = '';
for (var i = 0 ; i < records.length; i++) {
    var record = records[i];
    goukei2013 += record['見積合計'].value;
    console.log(record); 
    myRecordSpace.getElementsByTagName('td')[4].innerText = goukei2013;
}

Lorenz Ras 2021年06月04日 09:21

t.sato様

本来、9500と表示して欲しいのですが、3000と6500が文字列として？？で表示されます。

「見積合計」の内容を確認してください。undefined があるかもしれません。

対策としてこのコードは

goukei2013 += record['見積合計'].value;

このコードに変化してみてください。

goukei2013 += record['見積合計'].value || 0;

「見積合計」は数字じゃないものがあると、また違う対策が必要です。

Lorenz Rasにより編集されました 2021年06月04日 09:22

t.sato 2021年06月04日 11:15

Lorenz Ras様

いつもお世話になっております。

下記の内容に変更しましたが、変わりない状況でした。
goukei2013 += record['見積合計'].value || 0;

見積合計のフィールドは計算タイプにしており、
まだテスト段階で、2レコードのみで　3000　と　6500　のみになりまして
文字は入力されていない状況です。

他の対策が必要な形でしょうか。。

Lorenz Ras 2021年06月04日 11:37

見積合計のフィールドは計算タイプにしており、

文字列（1行）の計算タイプですか。

本当に数字だけなら、

goukei2013 += +record['見積合計'].value;

で十分だと思います。+record['見積合計'].value　の　+ は　文字列 → 数値の効果があります。

Lorenz Rasにより編集されました 2021年06月04日 11:37

t.sato 2021年06月06日 05:00

Lorenz Ras様

ご連絡ありがとうございます。

下記のいただいたコードで記載しましたが、変わりませんでした。。。。

goukei2013 += +record['見積合計'].value;

文字列（1行）タイプは使っておらず、数値か計算タイプとなります。

kintone上で設定している内容は以下の通りですが、わかりますでしょうか。

Lorenz Ras 2021年06月06日 06:14

t.sato様

内容は大丈夫そうですね。

宣言の問題でしょう。

このコードは

var goukei2013 = '';

ストリングになっていますので、このコードに

var goukei2013 = 0;

変更してみてください。

Lorenz Rasにより編集されました 2021年06月06日 06:15

t.sato 2021年06月07日 07:08

Lorenz Ras様

いつもありがとうございます。
ご指摘通り変更したところ無事集計されました。大変勉強になりました。

すみません、集計の件でアドバイスをいただきたいのですが・・・
今回のカスタムビューは、各セルに対して、kintoneの対象フィールドを全レコード取得し、
その中で日付を指定して抽出したいのですが、どのようか方法がいいのでしょうか。

現状のコードは以下の通りなのですが、for文を2回繰り返す形でしょうか？
使ったことはないのですが、「query」を使用？？

var goukei2013 = 0;
for (var i = 0 ; i < records.length; i++) {
var record = records[i];
goukei2013 += +record['見積合計'].value;
//console.log(record);　//実装にログは不要なのでカット 
myRecordSpace.getElementsByTagName('td')[4].innerText = goukei2013;

日付取得は以下のイメージでして、見積日を元に期間指定した見積合計数を取得したいと思っています。

2021-05-01　～　2021-05-01　合計8000円
2021-06-01　～　2021-06-30　合計5000円