フォームブリッジ上でのplaceholderについて

kintone カスタマイズ
1

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

フォームブリッジ上でplaceholderを実装したいのですが、

どのようにカスタマイズ(javascriptのコード)を書くのがよろしいでしょうか。

お手数ですがよろしくお願いします。

2

Yujiro Shinさん

落合です。

 

文字列（1行）フィールドか文字列（複数行）であれば、以下のようなJSでplaceholderを指定することができると思います。

 


(function() {  
  'use strict'

  fb.events.form.created = [function (state) {  
    state.fields[0].attributes.placeholder = 'placeholder message'

    return state  
  }]  
})()

 

以上、参考になりますでしょうか？

 

3

落合様

 

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

上記をもとに実装し、上手く行きました！

ありがとうございました。

4

落合様

初めまして。

同じくplaceholderを実装したいのですが、上記のコードだけで実装可能なのでしょうか？
具体的には、フィールドコード「name」に対して実装するにはどうしたらいいでしょうか？

5

株式会社オオヤ様

お世話になっております、トヨクモの山口と申します。

フィールドコード「name」に対する placeholder は、以下のような JavaScript コードで指定できると思います。

(function() {
'use strict';
fb.events.form.created = [function(state) {
// コードが 'name' のフィールドを検索
const nameField = state.fields.find(field => field.code === 'name');
nameField.attributes.placeholder = 'placeholder message';
return state;
}];
})();

以上、参考になりましたら幸いです。

6

山口様

ありがとうございます！

日本語にすると文字化けしていまいますが、何か対策方法はあるのでしょうか？

7

株式会社オオヤ様

placeholder に設定した文字が文字化けしてしまうということでしたら、JavaScript ファイルの文字エンコードが UTF-8 ではない（例えば Shift_JIS など）ことが考えられます。

その場合、ご利用のテキストエディタ等で JavaScript ファイルの文字エンコードを UTF-8 で設定・保存することで文字化けせずに表示できるようになると思います。

8

山口様

 

問題なく解決しました！ありがとうございました！

9

山口様

また初歩的な質問で申し訳ないのですが、

(function() {
‘use strict’;
fb.events.form.created = [function(state) {
// コードが ‘name’ のフィールドを検索
const nameField = state.fields.find(field => field.code === ‘name’);
nameField.attributes.placeholder = ‘名前’;
return state;
}];
})();

に、もう２個

「ken」→ドロップダウン
「add」→文字列
を加えたいのですが、ご教授下さい。

 

10

株式会社オオヤ様

ドロップダウンの placeholder はフォームブリッジが対応しておらず、設定することができません。

以下の JavaScript コードのように、検索とplaceholderの設定を繰り返すことで「name」と「add」の2つのフィールドにplaceholderを設定することができると思います。

(function() {
    'use strict';
    fb.events.form.created = [function(state) {
        // コードが 'name' のフィールドを検索し、placeholderを設定
        const nameField = state.fields.find(field => field.code === 'name');
        nameField.attributes.placeholder = 'placeholder message for name';

        // コードが 'add' のフィールドを検索し、placeholderを設定
        const addField = state.fields.find(field => field.code === 'add');
        addField.attributes.placeholder = 'placeholder message for add';

        return state;
    }];
})();

ご参考になれば幸いです。

11

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

以下のコードを参考にplaceholderの設定を試みているのですが、

3つ以上のフィールドを設定する場合のコード記述についてご教示いただけませんでしょうか。

 

(function() {
    'use strict';
    fb.events.form.created = [function(state) {
        // コードが 'name' のフィールドを検索し、placeholderを設定
        const nameField = state.fields.find(field => field.code === 'name');
        nameField.attributes.placeholder = 'placeholder message for name';


        // コードが 'add' のフィールドを検索し、placeholderを設定
        const addField = state.fields.find(field => field.code === 'add');
        addField.attributes.placeholder = 'placeholder message for add';
        return state;
    }];
})();

 

12

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