一覧画面表示時のボタン配置及びメッセージテキスト表示について（ご質問）

kintone カスタマイズ
1

チュートリアルにある記事（第2回 レコード一覧画面にボタンを置いてみよう！）を参考に、（１）コード一覧画面のメニュー右側の空白部分にボタンを表示させる、（２）メニューの下側の空白部分に文字列を表示させるアプリを作成しました。

これをモバイルアプリ用にもと思い、APIに"mobile"を付加してコードを書き換えてみましたが、（１）のボタンが表示されません。

mobileを付加したapiは以下の通りです。
‘mobile.app.record.index.show’
kintone.mobile.app.getHeaderSpaceElement()
kintone.mobile.app.getHeaderMenuSpaceElement().appendChild(myIndexButton)

(() => {

  'use strict';

  kintone.events.on('mobile.app.record.index.show', (event) => {

    if (document.getElementById('my_index_button') !== null) {

      return;

    }

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

    myIndexButton.id = 'my_index_button';

    myIndexButton.innerText = '一覧のボタン';

    myIndexButton.onclick = () => {

      const myHeaderSpace = kintone.mobile.app.getHeaderSpaceElement();

      // 文字列要素

      const myListHeaderDiv = document.createElement('div');

      myListHeaderDiv.style.width = '100%';

      myListHeaderDiv.style.height = '35px';

      myListHeaderDiv.style.textAlign = 'center';

      myListHeaderDiv.style.fontSize = '30px';

      myListHeaderDiv.style.fontWeight = 'bold';

      myListHeaderDiv.style.backgroundColor = '#ffd78c';

      myListHeaderDiv.innerText = '押されて飛び出てじゃじゃじゃじゃーん';

      // メニューの下側の空白部分に文字列を表示

      myHeaderSpace.innerText = ''; // ← 増殖を防ぐため一旦明示的に空文字をセット

      myHeaderSpace.appendChild(myListHeaderDiv);

    };

    kintone.mobile.app.getHeaderMenuSpaceElement().appendChild(myIndexButton);

  });

})();

このボタン表示は、モバイル用アプリとして実装可能なのでしょうか？ （ボタンを表示しon click時に一覧レコードに対し処理を実行したい）

2

同様のことをしたい場合、mobileはヘッダーの下側の空白部分の要素を取得するを利用することになるかとおもいます。
PC/モバイル早見表があり、PCとモバイル何に対応してる・してないは一覧化されてるのでみてみてください！

3

村濱一樹様

ご助言有難うございました。
ボタンをヘッダースペースにわりあてることでボタンおよびメッセージ内容をモバイルでも表示できるようになりました。

重ねて御礼申し上げます。

 

4

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