フォームブリッジでのCSS、JSカスタマイズ

kintone カスタマイズ
1

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

 

以下ついてご質問させてください。

 

フォームブリッジで作成した画面スタイル変更を行いたいです。

変更したい内容は以下2点です。

 

①フォーム画面での項目間同士の幅を調整する

 

②確認画面での項目の表示幅を調整する

 

以下のリファレンスガイドは確認しましたが、

フォームブリッジでの個別フィールドのスタイルの変更は、

CSSではなくJavaScriptで行うようにと表記されていました。

 

cybozu developer networkのコミュニティも確認しましたが、

スタイルの変更に関する例示はないようでしたので、ご教授ください。

 

▼カスタマイズのためのリファレンス

https://fb.kintoneapp.com/user/customize.html

 

 

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

2

あ様

お世話になっております。
cstapの江田と申します。

1については「fb.events.form.created」イベントにおいて、各「fields」の「style」を指定することで変更できます。

2について、テーブルの列幅を変更するという解釈で宜しかったでしょうか？
もしそのようでしたら、DOM操作が必要になります。

サンプルコードを書いてみたのでご参考になればと思います。

(function() {
"use strict";
fb.events.form.created = [function (state) {
state.fields[0].style["margin-right"] = "50px";
return state;
}];
fb.events.confirm.created = [function (state) {
state.fields[0].style["margin-right"] = null;
return state;
}];
fb.events.confirm.mounted = [function () {
[].forEach.call(document.getElementsByClassName("row"), function(row){
row.children[0].style.cssText += 'width: 40% !important;'; //項目名の列幅
row.children[1].style.cssText += 'width: 60% !important;'; //値の列幅
});
}];
})();
3

江田様

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

ご回答ありがとうございます。
サンプルコードで実装がうまくいきました。

ご教授いただきありがとうございました。
よろしくお願いいたします。

4

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