スペースフィールド 非表示切り替え

[Legacy_Account2241 (やまだ（Legacy Account）)]

この辺りの記事を参考に試してみたのですがうまくいきません。

契約区分が「変更」になると表示される「変更前の数量」「変更前の売価」の位置を上段と揃えるために、

「商品区分」が「A」「B」のときだけ、スペースフィールド「item02」が表示されるようにしたいです。

現状のコードに組み込もうとすると自身のスキルでは難しく困っております。

お手伝いいただけませんか？

 

(function() {
  'use strict';
  
//契約区分
  var events2 = [
    'app.record.create.show',
    'app.record.edit.show',
    'app.record.detail.show',
    'app.record.create.change.契約区分',
    'app.record.edit.change.契約区分',
  ];
  
  kintone.events.on(events2, function(event) {
    
    // 初期値としてフィールドを隠す
    kintone.app.record.setFieldShown('数量_0', false);
    kintone.app.record.setFieldShown('売価_0', false);

    // 契約区分の値を取得
    var DropVal2 = event.record['契約区分'].value;

    switch (DropVal2) {
      case '変更' :
        kintone.app.record.setFieldShown('数量_0', true);
        kintone.app.record.setFieldShown('売価_0', true);
        break;
    }
    });
    
  

//商品名2
  var events1 = [
    'app.record.create.show',
    'app.record.edit.show',
    'app.record.detail.show',
    'app.record.create.change.商品区分_0',
    'app.record.edit.change.商品区分_0',
  ];
  
  kintone.events.on(events1, function(event) {
    
    // 初期値としてフィールドを隠す
    kintone.app.record.setFieldShown('商品名2_0', false);

  // 商品区分の値を取得
    var DropVal1 = event.record['商品区分_0'].value;

    switch (DropVal1) {
    case 'A' :
        kintone.app.record.setFieldShown('商品名2_0', true);
        break;
    case 'B' :
        kintone.app.record.setFieldShown('商品名2_0', true);
        break;
    }
  });
})();

[Legacy_Account1177 (mls-hashimoto（Legacy Account）)]

通常のカスタマイズ範囲のgetSpaceElement()ではスペースの幅を変えることができません。

スペースを「幅が0になるように非表示」とする場合、getSpaceElement()で取得するスペースの親要素を指定する必要があり、

let space = kintone.app.record.getSpaceElement('スペースのID');

if (/* 条件文 */) {
 space.parentNode.style.display = 'none'; // 非表示
} else {
 space.parentNode.style.display = null; // 表示
}

こんな感じになります。

そのため、ご希望の動作を実装する場合は「フォームの設定画面で、スペースの幅を最終的に合わせたいフィールドの幅と同じに設定し（item2スペースの幅と商品名2フィールドの幅を同じにし）、↑のカスタマイズを適用」すれば可能かと思います。

ただし、kintone側が用意しているgetSpaceElement()に対して相対的なDOM操作を行っているので、kintoneのアップデートでデザインが変わった時に対応が必要になる可能性があります。