【フォームブリッジ】ヘッダーにボタン設置

kintone カスタマイズ
1

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

フォームブリッジのヘッダー、もしくはタイトル部分にボタンを設置することは可能でしょうか。

kviewerではヘッダーにHTML指定が出来たので設置できたのですが、フォームブリッジにはHTMLで記述できる要素がないようで困っております。

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

2

Y.SUGIさん

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

JavaScriptで要素を取得して、その中身にボタンなどを追加すると良いと思います。

ヘッダー要素は「.fb-header」というクラス名になっています。
document.getElementsByClassName()などでクラス名を引数として指定して取得できます。

fb.events.form.mounted.push(function (state) {
  var button = document.createElement('button');
  button.innerText = 'click';
  document.getElementsByClassName('fb-header')[0].append(button);
  return state;
});
3

江田篤史様

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

頂いたコードを基に希望通りの動作が出来ました。ありがとうございます。

fb.events.form.mounted.push(function (state) {

  var backbtn = document.createElement('button');

  backbtn.innerText = '戻る';
  backbtn.style.height = "50px"; //ボタンの高さ
  backbtn.style.width = "300px"; //ボタンの横幅
  backbtn.style.backgroundColor = "#B22222"; //ボタンの背景色
  backbtn.style.color = "white"; //ボタンの文字色
  backbtn.style.fontWeight = "bold"; //文字の太さ
  backbtn.style.position='absolute';
  backbtn.style.right='5%';

//ボタンのクリックイベント
  backbtn.onclick = function () {
    backbtnClick();
  };

  document.getElementsByClassName('fb-title')[0].append(backbtn);
  return state;
});

//クリック後の動作
function backbtnClick() {
  clickBtnNm = "戻る" //押したボタンの名称
    
  //確認ウィンドウ表示
    let check = confirm('確認メッセージ');
    console.log(check);

    //OKクリック
    if (check){
      location.href='リンクアドレス';
    }
}

私の勘違いでヘッダーではなくタイトル部分でしたが、fb-titleに書き換えて無事ボタン配置出来ました。

右上にボタンを配置してクリック後に確認ウィンドウを表示、OKならリンク先のページへ移動、という希望通りの動きに出来ました。

一応上記コードで希望の動きにはなったのですが、おかしな表記があればご指摘頂けると幸いです。

4

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