JSEdit for kintone で、テーブルのフィールド名（ヘッダーの文言）を改行したい

kintone カスタマイズ
1

初めまして、kintone初心者です。

作成したテーブル内のフィールド名「サービス提供数」に対して、値が「１」や、「２」、でしたり、同様のフィールドが同じテーブルにいくつかあるため、テーブルが横長になってしまいました。

エクセルのようにフィールド名を改行して、

サービス

提供数

という風に横幅を狭めたいのですが、JSEdit for kintoneでの構文がわかりません。。

フィールド名の取得まではこれで良さそうでしょうか？また、、その続きの肝心な部分の改行して同じフィールドに代入の構文をご教示頂けないでしょうか？

(function() {
  “use strict”;
  kintone.events.on([‘app.record.detail.show’, ‘app.record.create.show’, ‘app.record.edit.show’], function(event) {
   […document.querySelectorAll(‘.control-label-text-gaia’)]
  .find(el => el.innerText === ‘サービス提供数’)
  ？？？？？？？？？？？？？？？？？？？？ ;

↑多分この部分に「サービス提供数」を改行して代入、の構文なのかと思うのですが、、まったくわからず、、、
    
    });
    return event;
 })();

2

ご提示されたコードだと、サブテーブル、その他問わずアプリ内の全てのフィールドを取得しています。また書き換えてようとしている部分はフィールド名ではなくそのフィールドの値になっているようです。
また、サブテーブルのフィールド名そのものを変えても幅が変わることはないため、style.widthも指定する必要があります（フィールドが文字列等でない場合はこの限りではありません）。

以下のような形で可能かと思います。あくまでもkintone仕様外のDOM操作であることには注意して下さい。
4行目にはコンソールツール等で確認できる、サブテーブルに振られている番号を指定して下さい（Chromeであればサブテーブル上で右クリックから「検証」を選択すれば「subtable-xxxxxx」と記載されています）。5行目には文字を書き換えたい列番号を0から配列で指定して下さい（例として2列目と4列目のみ変えたい場合は[1, 3]、1列目と3列目と5列目を変えたい場合は[0, 2, 4]）。

(function() {
  'use strict';

let subtable = 'subtable-'; // サブテーブルに振られている番号
  let thIndex = [0, 1, 2]; // 文字を変更したい列（0から）

  kintone.events.on([
    'app.record.detail.show', 'app.record.create.show', 'app.record.edit.show'
  ], (event) => {
    [...document.getElementsByClassName(subtable)[0].querySelector('tr').children].forEach((th, index) => {
      if (thIndex.includes(index)) {
      th.innerHTML = '<span class="subtable-label-inner-gaia">サービス<br />提供数</span>';
        th.style.width = '70px';
      }
    });

    return event;
  });
})();
3

こんなに早くご回答頂き、誠にありがとうございます。また、私のつたない説明書きから、全てをご理解頂き、本当にありがとうございます。明日、早速実践させて頂きます。

4

mls-hashimoto様

早速実践してみました。結果、イメージしていた通りの画面になり、本当に満足しております。

配列で複数個所を同時に変更出来るのもとても便利で、更には列幅の指定も可能なコードにしていただき、とても美しい入力フォームとなりました。

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

山本

5

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