詳細画面のJS作成のボタンの位置

[satoshi123]

JSで詳細画面時に、ボタンを配置して処理を実行したいのですが、プロセス管理のボタンの上にできてしまいます。別にこれでもよいのですが、何となく見た目にこだわりた位と思っておりますが、ccsがあまりよくわかっておらず、例えば、プロセスボタンの横の通常のアクションボタンの位置に置きたいとした場合の書き方をご教授いただければと思います。今作っているJSのボタンだけの部分を抜粋して、記載します。

(() => {

  'use strict';



  kintone.events.on('app.record.detail.show', () => {

    if (document.getElementById('custom-copy-button')) return;



        const button = document.createElement('button');

        button.id = 'custom-copy-button';

        button.textContent = '植毛本数入力してコピー';

        button.className = 'kintoneplugin-button-normal';

        kintone.app.record.getHeaderMenuSpaceElement().appendChild(button);

  });

})();

[wv-sumichan (住田 知基)]

※この回答には非推奨のDOM操作を含むことを先にお伝えしておきます。

kintoneコーディングガイドライン

---

kintone.app.record.getHeaderMenuSpaceElement() は「メニューの上側の要素を取得する」メソッドなので、そのメソッドで取得した要素ではアクションボタンの右側に持ってくることは難しいです。

推奨はされませんが、アクションボタンが表示されている部分の要素を取得して、そこに新しい要素を追加する必要があります。やり方はいろいろありますが div.gaia-argoui-app-toolbar-statusmenu に display: flex; を設定して、ボタンを追加してあげるのが簡単なのではないでしょうか。

(() => {
  'use strict';
  kintone.events.on('app.record.detail.show', (event) => {
    if (document.getElementById('custom-copy-button')) return;
    
    const button = document.createElement('button');
    button.id = 'custom-copy-button';
    button.textContent = '植毛本数入力してコピー';
    button.className = 'kintoneplugin-button-nomal';
    
    const parent = document.getElementsByClassName('gaia-argoui-app-toolbar-statusmenu')[0];
    if (!parent) return;
    
    parent.style.display = 'flex';
    parent.appendChild(button);
    
    return event;
  });
})();

[wv-sumichan (住田 知基)]

@wv-sumichan

div.gaia-argoui-app-toolbar-statusmenu に display: flex; を設定して、ボタンを追加してあげるのが簡単なのではないでしょうか。

……と思ったんですが、追加する場所がそこだとレコードを移動したときにアクションボタンが再生成されるので、追加したボタンが一番左側に来ちゃいますね。

ボタンを配置するための div 要素を作って、一つ上の階層に入れてあげないとダメですね。このあたりの仕様よく覚えてないな……。

(() => {
  'use strict';
  kintone.events.on('app.record.detail.show', (event) => {
    if (document.getElementById('custom-copy-button-wrapper')) return;

    const wrapper = document.createElement('div');
    wrapper.id = 'custom-copy-button-wrapper';
    wrapper.style.flex = '1';
    
    const button = document.createElement('button');
    button.id = 'custom-copy-button';
    button.textContent = '植毛本数入力してコピー';
    button.className = 'kintoneplugin-button-nomal';
    
    wrapper.appendChild(button);
    
    const parent = document.getElementsByClassName('gaia-argoui-app-toolbar')[0];
    const after = parent.getElementsByClassName('gaia-argoui-app-toolbar-menu')[0];
    if (!parent || !after) return;
    
    parent.style.display = 'flex';
    parent.insertBefore(wrapper, after);
    
    return event;
  });
})();

イメージとしては アクションボタン群 と レコード操作メニュー群 の間に新しい div 要素を作成して カスタムボタン群 を作成している感じですね。レイアウト的にカスタムボタン群を伸縮させないと左右の位置が崩れるので flex: 1; を適用しています。

これ以外にもやり方はたくさんあると思いますが、ご参考までに。