レコード詳細画面の見た目を変えたい

kintone カスタマイズ
1

実現したいこと

レコード詳細画面のコメント欄の見た目を、下図のように一目でコメント欄だと分かるようにしたいです。

質問と回答の間に縦棒の仕切り、コメント欄の上に「回答／コメント欄」と記載し、四角い線で囲めるとわかりやすくなるのではと思っております。

また、コメント欄は常時表示させたいです。吹き出しマークのクリックで表示・非表示になると、「回答が消えた！」と言われそうなので。。。

 

アプリの用途

社内の問い合わせと回答用です。

図

以上、宜しくお願いします。

2

コメントがあるサイドバーは

document.getElementsByClassName('gaia-argoui-app-show-sidebar')[0];

で取得できます。また吹き出しマークは

document.getElementsByClassName('sidebar-tab-comments-gaia')[0];

こちらで取得できます。それぞれに対して非表示のスタイルを適用したり、borderLeftを適用したり、タイトル要素を作成してprependすれば近いことが可能ではないかと思います。

3

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

１週間色々試しまして、ようやく枠線引けました・・・

「コメントする」の上に「回答／コメント」と文字を追加したかったのですが、どうやるのでしょうか？！

ご教授頂けると幸いです！！

4

Ichiro Saito さま

枠線とコメントアイコンの非表示を含めて、こちらで近いことが可能かと思います。

(function() {
  'use strict';

  kintone.events.on([
    'app.record.detail.show', 'app.record.create.show', 'app.record.edit.show'
  ], (event) => {
    let sidebar = document.getElementsByClassName('gaia-argoui-app-show-sidebar')[0];
    let balloonIcon = document.getElementsByClassName('sidebar-tab-comments-gaia')[0];

    sidebar.style.borderLeft = '7px solid #3498DB';
    balloonIcon.style.display = 'none';

    let title = document.createElement('div');

    title.innerHTML = '回答／コメント';
    title.style.height = '48px';
    title.style.lineHeight = '48px';
    title.style.fontSize = '24px';
    title.style.backgroundColor = '#3498DB';
    title.style.color = '#FFF';
    title.style.textAlign = 'center';
    title.style.borderRadius = '16px 16px 0 0';

    document.getElementsByClassName('gaia-argoui-app-show-sidebar-dragged')[0].prepend(title);

    return event;
  });
})();
5

mls-hashimoto 様

出来ました！

結局、全部やってもらってしまいましたが…ありがとうございました！

もっと勉強します！！

6

すみません、泣きのラスト質問です！

プロセス管理の次のステータスボタンを押すと、
「回答／コメント」の文字が下に増殖してしまいました。

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
// 増殖バグ
      if (document.getElementById(‘div’) !== null) {
        return event;
      }
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

プロセス管理しているから…これか！？

// 増殖バグ

    (function(){

kintone.events.on(‘app.record.detail.process.proceed’, function(event){

  if (document.getElementById(‘div’) !== null) {

  return event;

}});

})();

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

と入れてみましたが、両方ダメダメでした…

7

Ichiro Saito さま

増殖について失念しておりました。こちらで対応可能です。

(function() {
  'use strict';

  kintone.events.on([
    'app.record.detail.show', 'app.record.create.show', 'app.record.edit.show'
  ], (event) => {
    let sidebar = document.getElementsByClassName('gaia-argoui-app-show-sidebar')[0];
    let balloonIcon = document.getElementsByClassName('sidebar-tab-comments-gaia')[0];

    sidebar.style.borderLeft = '7px solid #3498DB';
    balloonIcon.style.display = 'none';

    if (document.getElementById('comments-title')) return event;

    let title = document.createElement('div');

    title.id = 'comments-title';
    title.innerHTML = '回答／コメント';
    title.style.height = '48px';
    title.style.lineHeight = '48px';
    title.style.fontSize = '24px';
    title.style.backgroundColor = '#3498DB';
    title.style.color = '#FFF';
    title.style.textAlign = 'center';
    title.style.borderRadius = '16px 16px 0 0';

    document.getElementsByClassName('gaia-argoui-app-show-sidebar-dragged')[0].prepend(title);

    return event;
  });
})();
8

完璧に出来ました！

３００点満点です！！

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

9

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