detail時のみサブテーブルの列を非表示にする

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

下記の方法で実装してみたのですが

一部わからないところがあります。

 

現在の動きとして表示されたタイミングで非表示を実現できていますが

編集画面へ移動した際に非表示のままとなります。

この状態でブラウザーでリロードをすると表示されるようになります。

また新規作成時は最初から表示をされているようです。

 

編集画面へ移行したタイミングで非表示を解除できないのでしょうか?

 

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

 

 

 

(function() {

 “use strict”;

 kintone.events.on([“app.record.detail.show”], function(event) {

 document.getElementById(‘record-gaia’).classList.add(‘detail-show’);

 return event;

 });

})();

 

 

.detail-show .subtable-gaia th:nth-child(2),
.detail-show .subtable-gaia td:nth-child(2) {
display: none;
}

 

> 編集画面へ移行したタイミングで非表示を解除できないのでしょうか?

 

 

編集画面のタイミングで、逆のことをすればどうでしょうか?

 

app.record.edit.showのイベントで、クラスを外すなど

 

村濱様

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

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

見様見真似でやっており逆のことがピンと来ていないのですが、

下記の認識でよろしいでしょうか?

ご教示いただければ幸いです。

 

(function() {

 “use strict”;

 kintone.events.on([“app.record.edit.show”], function(event) {

document.getElementById(‘record-gaia’).classList.add(‘edit-show’);

 return event;

 });

})();

 

 

.detail-show .subtable-gaia th:nth-child(2),
.detail-show .subtable-gaia td:nth-child(2) {
 diplay:block;
}

はい。そういうイメージですね。

 

できれば、独自のクラス定義して切り替えるのがよさそうなイメージあります。下記のクラスみたいなものを定義して、detail.showではクラス追加して、edit.showではクラス削除など。

 

.hide-subtable {
  display: none;
}

村濱様

 

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

下記の様に編集してみました。

(function() {
“use strict”;
kintone.events.on([“app.record.detail.show”], function(event) {
document.getElementById(‘record-gaia’).classList.add(‘detail-show’);
return event;
});
})();

(function() {
“use strict”;
kintone.events.on([“app.record.edit.show”], function(event) {
document.getElementById(‘record-gaia’).classList.remove(‘detail-show’);
return event;
});
})();

 

.detail-show .subtable-gaia th:nth-child(2),
.detail-show .subtable-gaia td:nth-child(2) {
display: none;
}

 

 

編集時フィールドが狭くなってしまいました。

新規作成の時と同じ幅を利かせたいのですが、幅指定しても広がりません。

何か原因がありますでしょうか。ご教示いただけますと幸いです。

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

 

.subtable-gaia th:nth-child(2),
.subtable-gaia td:nth-child(2) {
width: 300px;
}

 

 

新規作成の場合

編集の場合

返事遅くなりました。

同じコードでためしましたがこちらの環境では特段細くなりませんでした。。環境はChrome 79です

 

http://g.recordit.co/hKfMURjdB4.gif

村濱様
お世話になります。
ご返信ありがとうございます。
申し訳けありません。
説明不足でした。
テーブルの1列目は数値
2列目がルックアップ
3列目が文字フィールドであります。

この2列目のルックアップの幅がおかしくなってしまいます。引き続きよろしくお願いいたします。

追記
村濱様にて検証を頂いた形で正しく表示されることを
確認しました。
左からルックアップフィールド、文字フィールドで
正常を確認しました。
左から文字フィールド、ルックアップフィールドとするとやはり表示幅がおかしくなるようです。
kintoneの仕様でしょうか。

https://developer.cybozu.io/hc/ja/community/posts/360054689192-%E3%82%B5%E3%83%96%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB%E3%82%92%E9%9D%9E%E8%A1%A8%E7%A4%BA%E3%81%AB%E3%81%97%E3%81%9F%E9%9A%9B%E3%81%AB%E3%83%AB%E3%83%83%E3%82%AF%E3%82%A2%E3%83%83%E3%83%97%E6%9E%A0%E3%81%8C%E5%B0%8F%E3%81%95%E3%81%8F%E3%81%AA%E3%81%A3%E3%81%A6%E3%81%97%E3%81%BE%E3%81%86

 

理解しました!!!

それではこれで治ると思いますがいかがでしょう?

村濱さま

 

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

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

ご教授いただいた方法で確認ができました。

ありがとうございます!

 

今後ともよろしくお願いいたします