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

**URL:** <https://community.cybozu.dev/t/topic/7490>\
**Category:** kintone 開発相談\
**Created:** [2021 年 4 月 24 日午前 7:48 UTC](https://community.cybozu.dev/t/topic/7490 "2021-04-24T07:48:45Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account2607](https://avatars.discourse-cdn.com/v4/letter/l/278dde/32.png) [@Legacy\_Account2607](https://community.cybozu.dev/u/Legacy_Account2607)\
**Post date:** [2021 年 4 月 24 日午前 7:48 UTC](https://community.cybozu.dev/t/topic/7490/1 "2021-04-24T07:48:45Z")

</div>

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

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

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

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

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1740](https://avatars.discourse-cdn.com/v4/letter/l/ed8c4c/32.png) [@Legacy\_Account1740](https://community.cybozu.dev/u/Legacy_Account1740)\
**Post date:** [2021 年 5 月 6 日午前 12:46 UTC](https://community.cybozu.dev/t/topic/7490/2 "2021-05-06T00:46:30Z")

</div>

Y.SUGIさん

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

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

ヘッダー要素は「.fb-header」というクラス名になっています。  
[document.getElementsByClassName()](https://developer.mozilla.org/ja/docs/Web/API/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;
});

```

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2607](https://avatars.discourse-cdn.com/v4/letter/l/278dde/32.png) [@Legacy\_Account2607](https://community.cybozu.dev/u/Legacy_Account2607)\
**Post date:** [2021 年 5 月 6 日午前 5:23 UTC](https://community.cybozu.dev/t/topic/7490/3 "2021-05-06T05:23:04Z")

</div>

江田篤史様

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

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

```
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ならリンク先のページへ移動、という希望通りの動きに出来ました。

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

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/1X/d5c841c3c5a6cb66eed514001c1b45147c9e1f4f.png) [@system](https://community.cybozu.dev/u/system)\
**Post date:** [2024 年 9 月 27 日午前 5:49 UTC](https://community.cybozu.dev/t/topic/7490/4 "2024-09-27T05:49:47Z")

</div>

クローズされました: 2024 年 9 月 27 日午前 5:49 UTC

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