新規投稿
フォローする

【フォームブリッジ】HTML出力時のフィールドチェンジイベント

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

実現したいこと:添付ファイルフィールドで選択できるファイル数を制限したい。

 

フォームブリッジをHTML出力し、kintoneにファイルを登録するフォームを作成しています。

現状、HTML出力は正常にできており、かつ下記を参考にしたところ、フォームブリッジ単体(HTML出力しない状態)ではファイル数制限ができている状態です。

 https://developer.cybozu.io/hc/ja/community/posts/900002226646-%E6%B7%BB%E4%BB%98%E3%81%A7%E3%81%8D%E3%82%8B%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E6%95%B0%E3%82%92%E5%88%B6%E9%99%90%E3%81%97%E3%81%9F%E3%81%84

 

HTML出力することでフィールドチェンジイベントがエラーとなってしまい、イベントが発火しなくなっております。

解決策ございましたらご教示いただけますと幸いです。

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

 

0

6件のコメント

Avatar
koichi

m.uさん

こんにちは。

 

FormBridge管理画面より、外部サイトに埋め込む→iframe用の埋め込みコードを別サイトに埋め込まれているということで合っていますか?

試しに私のkintone環境にて、カスタマイズビューに埋め込んだところ
fb.events.fields.{fieldCode}.mountedイベント
fb.events.fields.{fieldCode}.changedイベント
ともにバリデーションが機能しました。


フォームに対する他のスクリプト処理は機能して、バリデーションだけ機能しない状態でしょうか。

0
Avatar
m.u

ご回答いただきありがとうございます。

iframeではなく、下記サイトにある通りHTML出力により外部サイトに埋め込みを行っております。

https://toyokumo-blog.kintoneapp.com/formbridge_html/

>フォームに対する他のスクリプト処理は機能して、バリデーションだけ機能しない状態でしょうか。

→おっしゃる通り、fb.events.form.mountedなどほかのイベントは機能しておりますが、fb.events.fields.{fieldCode}.changedイベントは機能しない状態でございます。

 エラー内容:Cannot set properties of undefined (setting 'changed')

HTML出力によりフィールドコードが認識されなくなっているのでしょうか、、、?

0
Avatar
koichi

ご返信ありがとうございます。

そちらの記事の通り試しましたが、残念ながらフォーム自体表示できなかったです。

実際の挙動は見れていませんが、トヨクモ様も専用の機能を実装した訳ではなさそうなので

changeイベントには非対応かもしれませんね。

 

fb.events.form.mountedでは問題ないとのことですので

changeイベントに適用させる代わりに、そのフィールドのinputタグに対してイベントリスナーを追加してみていかがでしょうか。

fb.events.form.mounted = [function(state) {

// changeイベントの代わり
fb.getElementByCode('値変更を判定するフィールドコード').getElementsByTagName('input')[0].addEventListener('change', function() {
// 変更時の処理を記述

}, false);

}];
1
Avatar
m.u

ご返信いただきありがとうございます。

ご教示いただいた方法でフィールドチェンジ時のイベントを動かすことができました。ありがとうございます。

こちらの方法で添付ファイルフィールドで選択されているファイル数を取得する方法が分からず、度々申し訳ございませんがご教示いただけますでしょうか。

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

1
Avatar
koichi

イベント動いたようで良かったです。

添付ファイル数は「state.record.添付ファイルフィールドコード.value.length」で取得できます。

0
Avatar
m.u

ご教示いただきありがとうございます。

無事ファイル数チェックが実装できました。

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

1
サインインしてコメントを残してください。