新規投稿
フォローする

カスタムビューでサブテーブルを表示

Avatar
Nao

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


 


カスタマイズビューとCSSフレームワークでオリジナルのビューを作る方法


 


第6回 サブテーブルの値を利用する


 


上記2件のページを参考に


 


カスタムビューにてサブテーブルを表示しようと考えております。


 


サブテーブルの項目(フィールドコード)は「品名」「数量」「金額」「合計」の4つでテーブルのフィールドコードは「テーブル」です。


 


htmlはカスタマイズビューとCSSフレームワークでオリジナルのビューを作る方と同様に記入しており、jsは下記に書き換えて設定していますが、表示すらできない状態です。


 


*---------------------------------------------------------------------------------------------------------*


 


(function () {
    "use strict";

    function loadJS(src) {
        document.write('<script type="text/javascript" src="' + src + '"></script>');
    }
    
    loadJS('https://cdn.jsdelivr.net/foundation/5.2.2/js/vendor/jquery.js');
    loadJS('https://cdn.jsdelivr.net/foundation/5.2.2/js/foundation.min.js');
    loadJS('https://cdn.jsdelivr.net/foundation/5.2.2/js/vendor/modernizr.js');
    
    kintone.events.on('app.record.index.show', function(event){
        //カスタムビューでなければここで終了
        var check = document.getElementsByName('kintone-custom-view');
        if (check.length == 0) {
            return;
        }

        var trec = event.record.テーブル.value;

        //イベントの多重化による要素生成に対応
        $('#articles').empty();

        //記事の中身を作成
        for(var i=0; i< trec.length; i++){
            if(i != 0){
                $('#articles').append('<hr />');
            }
            $('#articles').append('<article id="article' + i + '" class="articles"></article>');
            $('#article'+i).append('<table>' + '<tr>');
            $('#article'+i).append('<td>' + trec[i]['value']['品名']['value'] + '</td>');
            $('#article'+i).append('<td>' + trec[i]['value']['数量']['value'] + '</td>');
            $('#article'+i).append('<td>' + trec[i]['value']['金額']['value'] + '</td>');
            $('#article'+i).append('<td>' + trec[i]['value']['合計']['value'] + '</td>');
            $('#article'+i).append('<div id="articleRaw' + i + '"></div>');
            $('#articleRaw'+i).append('</tr>' + '</table>' + .replace(/\r?\n/g, "<br />"));
        } // for i        
    }); // kintone.events
})();


 


*---------------------------------------------------------------------------------------------------------*


 


初心者で全然ちがう記入だと思うのですが、どのように記載すれば実装できるかご教授いただければ幸いでございます。


 


 


 


 


 


 


 


 

0

7件のコメント

Avatar
kazuo urata

カスタムビューにてサブテーブルを表示するアプリを作りました。      
       
 参考：      
 第6回 サブテーブルの値を利用する       
 第7回 カスタマイズビューを利用してみよう     
       
 サブテーブルの項目(フィールドコード)は「品名」「数量」「金額」「合計」の4つでテーブルのフィールドコードは「テーブル」です。      
       
 htmlは「第7回 カスタマイズビューを利用してみよう」と同様に記入しました。      
 jsは、上記参考２トピックをベースにしました。      
 
 １）最初の段階では、一覧カスタムビューのヘッダは表示されましたが、登録したレコード内容は表示できませんでした。             
 ２）次に、最初のレコードの、品名（テーブルの１列目のデータ）のみ表示できました。       
 ３）次に、最初のレコードのみ、テーブルの最初のレコードの全項目（品名、数量、金額、合計）を表示できました。             
 ４）そして、ついに、４件のレコードで、そのサブテーブルの全項目（品名、数量、金額、合計）を表示できました。      
  ［登録レコード］     
  １レコード目は３件のデータを含むサブテーブル１個     
  ２～４レコード目は、それぞれ２件のデータを含むサブテーブル１個     
       
 ５）問題は、レコードをテーブル配列として扱い、各レコード内のサブテーブルを、その下位の配列とし、      
 要するに、２次元配列にすることが必要でした。      
                    
           var records = event.records;      
       
           for (var i = 0; i < records.length; i++) {      
               var record = records[i];      //　レコードの配列
               tableRecords[i] = record.テーブル.value; //　レコード内のサブテーブルの配列
                    
           for (var ix = 0; ix < tableRecords[i].length; ix++) {      
                    //↓一覧カスタムビューの１行を追加
               var row = myRecordSpace.insertRow(myRecordSpace.rows.length);      
       ．．．
       
 ６）以下、次のようなコードにしました。      
 これは、もっとスマートに書けるかもしれません。また、無駄なところがあるかも知れませんが、      
 厳密なものではなく、ご参考までにご覧ください。      
 ※このような形で、カスタムビューにてサブテーブルを表示することができました。    
       
                cell1[i] = row.insertCell(0);     
                cell2[i] = row.insertCell(1);     
                cell3[i] = row.insertCell(2);     
                cell4[i] = row.insertCell(3);      
       
        
                tmpA[i] = document.createElement('a'+i);     
                tmpB[i] = document.createElement('b'+i);     
                tmpC[i] = document.createElement('c'+i);     
                tmpD[i] = document.createElement('d'+i);     
       
                tmpA[i].href = recUrlA + tableRecords[i][ix].value['品名'].value;    
                tmpB[i].href = recUrlB + tableRecords[i][ix].value['数量'].value;    
                tmpC[i].href = recUrlC + tableRecords[i][ix].value['金額'].value;    
                tmpD[i].href = recUrlD + tableRecords[i][ix].value['合計'].value;    
                   
                tmpA[i].innerHTML = tableRecords[i][ix].value['品名'].value;     
                tmpB[i].innerHTML = tableRecords[i][ix].value['数量'].value;     
                tmpC[i].innerHTML = tableRecords[i][ix].value['金額'].value;     
                tmpD[i].innerHTML = tableRecords[i][ix].value['合計'].value;     
                    
                cell1[i].appendChild(tmpA[i]);     
                cell2[i].appendChild(tmpB[i]);     
                cell3[i].appendChild(tmpC[i]);     
                cell4[i].appendChild(tmpD[i]);     
       
                cell1[i].innerHTML = tableRecords[i][ix].value['品名'].value;     
                cell2[i].innerHTML = tableRecords[i][ix].value['数量'].value;     
                cell3[i].innerHTML = tableRecords[i][ix].value['金額'].value;     
                cell4[i].innerHTML = tableRecords[i][ix].value['合計'].value;     
             
       
           } // ix     
       
           } // iiiii     
       
 ７）「Nao 」様のソースとは、ベースが異なるので、そのまま利用して頂けるかどうかは分かりません。    
 ８）「Nao 」様のソースとの違いは、      
       
  var trec = event.record.テーブル.value;      
  ．．．     
  for(var i=0; i< trec.length; i++){     
       
  ．．．     
   $('#article'+i).append('<td>' + trec[i]['value']['品名']['value'] + '</td>');    
       
  ．．．     
       
 上記の箇所が、こちらでは、      
       
           var records = event.records;      
       
           for (var i = 0; i < records.length; i++) {      
               var record = records[i];      //　レコードの配列
               tableRecords[i] = record.テーブル.value; //　レコード内のサブテーブルの配列
                    
           for (var ix = 0; ix < tableRecords[i].length; ix++) {      
                    //一覧カスタムビューの１行を追加
       
               tmpA[i].href = recUrlA + tableRecords[i][ix].value['品名'].value;    
       
  ．．．     
       
       
 ※この辺りが、何かあるのではないかと思います。あくまで、ご参考まで、ですが。      

0
Avatar
Nao

kazuo urata 様

お返事ありがとうございます。

コメントにてご教授いただいた内容にて、下記のように設定したのですが、表示ができませんでした。

１．サブテーブルの項目(フィールドコード)は「品名」「数量」「金額」「合計」の4つでテーブルのフィールドコードは「テーブル」

２．カスタマイズビューに入力したHTMLソース

*----------------------------------------------------------------------*

<div id="my-customized-view">
<table border="1">
<thead>
<tr>
<th>品名</th>
<th>金額</th>
<th>数量</th>
<th>合計</th>
</tr></thead>
<tbody id="my-tbody">
</tbody>
</table>
</div>

*----------------------------------------------------------------------*

３．JSに入力したコード

*----------------------------------------------------------------------*

(function() {
    "use strict";
    kintone.events.on('app.record.index.show', function(event) {
        if (event.viewName !== 'カスタマイズビュー') {
            return;
        }

        var records = event.records;
        if (!records || !records.length) {
            document.getElementById('my-customized-view').innerHTML = '表示するレコードがありません';
            return;
        }
        
        var myRecordSpace = document.getElementById('my-tbody');
        myRecordSpace.innerHTML = '';    
       
        for (var i = 0; i < records.length; i++) {      
             var record = records[i];      //　レコードの配列
             tableRecords[i] = record.テーブル.value; //　レコード内のサブテーブルの配列
                    
        for (var ix = 0; ix < tableRecords[i].length; ix++) {      
             //↓一覧カスタムビューの１行を追加
             var row = myRecordSpace.insertRow(myRecordSpace.rows.length);  
               
             cell1[i] = row.insertCell(0);     
             cell2[i] = row.insertCell(1);     
             cell3[i] = row.insertCell(2);     
             cell4[i] = row.insertCell(3);      
       
             tmpA[i] = document.createElement('a'+i);     
             tmpB[i] = document.createElement('b'+i);     
             tmpC[i] = document.createElement('c'+i);     
             tmpD[i] = document.createElement('d'+i);     
       
             tmpA[i].href = recUrlA + tableRecords[i][ix].value['品名'].value;    
             tmpB[i].href = recUrlB + tableRecords[i][ix].value['数量'].value;    
             tmpC[i].href = recUrlC + tableRecords[i][ix].value['金額'].value;    
             tmpD[i].href = recUrlD + tableRecords[i][ix].value['合計'].value;    
                   
             tmpA[i].innerHTML = tableRecords[i][ix].value['品名'].value;     
             tmpB[i].innerHTML = tableRecords[i][ix].value['数量'].value;     
             tmpC[i].innerHTML = tableRecords[i][ix].value['金額'].value;     
             tmpD[i].innerHTML = tableRecords[i][ix].value['合計'].value;     
                    
             cell1[i].appendChild(tmpA[i]);     
             cell2[i].appendChild(tmpB[i]);     
             cell3[i].appendChild(tmpC[i]);     
             cell4[i].appendChild(tmpD[i]);     
       
             cell1[i].innerHTML = tableRecords[i][ix].value['品名'].value;     
             cell2[i].innerHTML = tableRecords[i][ix].value['数量'].value;     
             cell3[i].innerHTML = tableRecords[i][ix].value['金額'].value;     
             cell4[i].innerHTML = tableRecords[i][ix].value['合計'].value;     
             
             } // ix     
       
             } // iiiii     
       });
})();

*----------------------------------------------------------------------*

恐縮でございますが、初心者の為、コードを記載いただけると

幸いでございます。

宜しくお願い致します。

 

 

 

0
Avatar
kazuo urata

Naoさん、

お尋ねありがとうございます。

「２．カスタマイズビューに入力したHTMLソース」はこちらのものと同じです。

「３．JSに入力したコード」を拝見いたしました。

ご記入のソースコードで、少し手を入れるとできます。

自分の作ったjsとの違いで気がついた点は、次のとおりです。

（１）

// OK↓ #################################################################
        var records = event.records;
        if (!records || !records.length) {
            document.getElementById('my-customized-view').innerHTML = '表示するレコードがありません';
            return;
        }
// OK↑#################################################################

//
// ++++++++ recUrlA～recUrlDのvar宣言をここに入れる ++++++++++++++++++++
//
// OK↓#################################################################
        var myRecordSpace = document.getElementById('my-tbody');
        myRecordSpace.innerHTML = '';   
// OK↑#################################################################

（２）

// OK↓#################################################################
        var myRecordSpace = document.getElementById('my-tbody');
        myRecordSpace.innerHTML = '';   
// OK↑#################################################################
//
// ++++++++ tmpA～tmpDの「new Array()」宣言をここに入れる +++++++++++++++
// ++++++++ cell1～cell4の「new Array()」宣言をここに入れる +++++++++++++
// ++++++++ tableRecordsの「new Array()」宣言をここに入れる +++++++++++++
//

// OK↓ #################################################################
        for (var i = 0; i < records.length; i++) {     
             var record = records[i];      //　レコードの配列
             tableRecords[i] = record.テーブル.value; //　レコード内のサブテーブルの配列
                   
        for (var ix = 0; ix < tableRecords[i].length; ix++) {     
 // OK↑#################################################################

以下、そのままでよいと思います。

※recUrlAの書き方は「第7回 カスタマイズビューを利用してみよう 」のサンプルにある

「 recUrl 」の記述に「テーブル」の分を付け加えればできます！！！

※こちらでは、文字列をうまく作るところが、ちょっと、すらすらとできなくて、考えました。

（文字列の書き方はいろいろあると思いますが。）

以上です。

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

0
Avatar
kazuo urata

この件での、こちらの確認アプリは次のようなものです。

（１）TOP画面

（２）レコード１サブテーブル

（３）レコード２サブテーブル

（４）レコード３サブテーブル

（５）レコード４サブテーブル

（６）カスタムビュー

以上です。

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

 

0
Avatar
Nao

kazuo urata 様

ご丁寧な説明ありがとうございます。

*----------------------------------------------------------------------*

・recUrlA～recUrlDのvar宣言

・tmpA～tmpDの「new Array()」宣言

・cell1～cell4の「new Array()」宣言

・tableRecordsの「new Array()」宣言

*----------------------------------------------------------------------*

上記4点を色々調べながら、試しているのですが、どうもうまくいきませんでした。。。

大変申し訳ございませんが、kazuo urata 様が上記コメントで表示できた時のjsコードをそのまま記載していただくことは可能でしょうか。

jsの書き方のルールがまだ理解できていない素人ですみません。

 

0
Avatar
kazuo urata

Naoさん、   
   
お疲れ様です。   
   
・recUrlA～recUrlDのvar宣言   
これについては、こちらでは、次のようにしています。   
   

var recUrlA = location.protocol + '//' + location.hostname + '/k/' + kintone.app.getId() + '/show#record.テーブル.value['+'品名'+']=';    
var recUrlB = location.protocol + '//' + location.hostname + '/k/' + kintone.app.getId() + '/show#record.テーブル.value['+'数量'+']=';    
var recUrlC = location.protocol + '//' + location.hostname + '/k/' + kintone.app.getId() + '/show#record.テーブル.value['+'金額'+']=';    
var recUrlD = location.protocol + '//' + location.hostname + '/k/' + kintone.app.getId() + '/show#record.テーブル.value['+'合計'+']=';    
   
・tmpA～tmpDの「new Array()」宣言   
・cell1～cell4の「new Array()」宣言   
・tableRecordsの「new Array()」宣言   
これについては、こちらでは、次のようにしています。   
   
var tmpA = new Array();   
var tmpB = new Array();   
var tmpC = new Array();   
var tmpD = new Array();   
   
var cell1 = new Array();   
var cell2 = new Array();   
var cell3 = new Array();   
var cell4 = new Array();   
   
 var tableRecords = new Array();   
   

   
＞jsコードをそのまま記載していただくことは可能でしょうか。   
   
人様にお見せするほどのソースコードではないので、遠慮しておきます。   
※といっても、これまでのところで、すべて記載しました。   
自分のよりよいソースコードを書かれるとよいと思います。   
   
Good Luck!   

0
Avatar
Nao

kazuo urata 様

ご返信とアドバイスありがとうございます。

上記コードにて、無事表示することが出来ました。

こちらを参考に色々と試して勉強したいと思います。

今後ともご指導の程、宜しくお願い致します。

0
サインインしてコメントを残してください。