好きな場所にスペースフィールドで値を表示させたい

kintone カスタマイズ
1

スペースフィールド月間と年間の件数を表示させ、

他の数値と比較してOKだったら〇、NGだったら×というように表示したいと思っております。

大体出来たのですが、アプリの設定でスペースを表示させたい位置にしているにも関わらず、〇×表示が下のようになってしまいます。

 

ちなみにそれぞれMonthとYearの右にスペースを置いています。

 

コードはこれです。

これが２ファイルあり、月間用と年間用とに分かれています。

        fetchRecords(opt_Field).then(function(records) {

            // スペースフィールドにBアプリのレコード数を反映

            var num = records.length;
            var divTotalAmount = document.createElement('div');
            divTotalAmount.style.fontWeight = 'bolder';
            divTotalAmount.style.textAlign = 'center';
            divTotalAmount.style.fontSize = 18 +'px';
            divTotalAmount.innerHTML = num;
            kintone.app.record.getSpaceElement('numb').appendChild(divTotalAmount);
  

            // 取得した対象レコードと累積クレーム件数の比較

            var record = event.record;
            var acomp = record['SeriousComplaint'].value;
            var scomp = record['CustomerComplaint'].value;


            if(num > acomp + scomp){
                var target = "×";
            }else{
                var target = "〇";
            };

            kintone.app.record.getSpaceElement('numb_ok').append(target);

            return event;


        }

何が原因か教えて頂ければと思います。

 

宜しくお願い致します。

 

 

 

2

1/Month、2/Year の部分はラベルですか？

垂直位置を合わせるには、合わせたい内容をすべて含めてdivやtableタグ等で囲む必要があるかと思います。

例えばTableでやる場合だと、

<table>
<tr>
<td>1</td>
<td>/Month</td>
<td>×</td>
</tr>
<tr>
<td>2</td>
<td>/Year</td>
<td>×</td>
</tr>
</table>

のような感じになるかと思います。

3

説明不足ですみません。

数字はスペースフィールドで月間と年間の関連レコードの数を取得しております。

/Month や /Year はラベルで、関連レコードを取得する関係で良く分からなかったので、ファイルを２つ生成しております。

左の数字の要素はnumbで、
右の〇×の要素はnumb_okです。（年間）

 

月間はまた別のファイルで別の要素名を利用しております。

 

ついでに、〇×の方もスペースフィールドなので、数字と同じようにスタイルを指定しようと思ったのですが、うまくできませんでした。。

Javascript内にHTMLを組み込む方法がいまいち分かっていないので、もう少し詳しく教えて頂けたらと思います。

(.StyleやinnerHTMLを使ってもうまく動作しませんでした）

 

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

 

 

4

サンプル例をあげると、こんな感じでしょうか。

// サンプル的に同じものを2回作ってます。
for (var i = 0; i < 2; i++) {
    var table = document.createElement('table');
    table.style.fontWeight = 'bolder';
    table.style.fontSize = '18px';

    var tr = document.createElement('tr');
    table.appendChild(tr);

    var td1 = document.createElement('td');
    td1.textContent = '1';      // 一番左の件数をセット
    // td1.style.width = '80px';  // 左の数値の幅も調整する必要があれば調整してください。
    tr.appendChild(td1);

    var td2 = document.createElement('td');
    td2.textContent = '/Month'; // 真ん中の文言
    td2.style.width = '80px';  // 幅はうまく調整してください。
    tr.appendChild(td2);

    var td3 = document.createElement('td');
    td3.textContent = '×';      // 右の判定結果をセット
    tr.appendChild(td3);

    kintone.app.record.getSpaceElement('numb').appendChild(table);
}

 

5

ありがとうございます！

JavascriptにHTMLを組み込むのがよく分からず、全部にinnerHTMLで１つ１つ書くのかなあ？と思ってしまいました。

サンプルがたくさんあってやっと書き方が分かりました。

参考にさせていただきます。