【新バージョン フォームブリッジ】時刻フィールドを１５分単位で表示したい

[pio (匿名)]

新バージョンのフォームブリッジで時刻フィールドを１５分単位で表示したく、

フォームブリッジの時刻フィールドを１５分単位で表示したい

基本が１分単位になっているフォームブリッジの時刻フィールドを１５分単位で表示するよう変更する方法を教えてください。   ※具体的な方法を教えて頂けると助かります

上記URLの方法を試しましたが、古いバージョンでのコードなのでできませんでした。

「fb.events.form.created 」というコードを「form.show」と書き換える必要があるのはわかったのですがその他の項目について変更点を教えていただきたいです。使用したコードは下記のとおりです。

(function() {
“use strict”;

form.show = [function (state) {
var fields = [1, 2]; //フィールドの番号（0以上の整数）
fields.forEach(function(field){
state.fields[field].pickerOptions = {start: ‘00:00’, end: ‘23:30’, step: ‘00:15’};
state.fields[field].type = ‘time-select’;
});

return state;

}];
})();

また、フィールドに振られている番号を調べるために以下のコードを使用しましたがこれも動きません。理由などが分かれば教えていただきたいです。

(function(){
“use strict”,

form.show=[function
(state){
console.log(state)
return state;
}];
})();

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

[wv-sumichan (住田 知基)]

FormBridge についてはあまり詳しくないので、詳しいことは他の方の回答や記事を参考にしていただければと思いますが、、

新バージョンになって、イベントの登録方法が変わっているため、単純にイベント名のみ変更しても動作しません。

JavaScriptカスタマイズ | FormBridge

イベントリスナーの登録方法

formBridge.events.on関数を用いて指定したイベントに対してリスナーを登録することができます。 第一引数はイベント名、第二引数は実行したい関数です。イベントの種類はイベントの項を参照ください。

formBridge.events.on('form.show', function () {
	console.log('ハンドラー1を実行');
});

ハンドラーの引数(イベント引数)にはイベントのコンテキスト情報を含んだオブジェクトが渡されます。コンテキスト情報はイベントごとに異なります。詳細はイベント詳細の項を参照ください。

formBridge.events.on('form.field.change.single_line_text', function (context) {
	const $value = context.value;
	// 任意の処理
});

また、既に確認されてはいると思いますが旧バージョンから新バージョンへの移行ガイドもあるので、併せて読むと良いと思います。

JavaScriptカスタマイズ | FormBridge

[pio (匿名)]

丁寧にお答えいただきありがとうございます。
教えていただいたものを参考にして作成してみます。

ただ以前のコードの意図もわからないところもあるので、
私の手には余るということもわかりました。

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

[BackRuler]

新バージョンのFormBridgeでは、Headless UIが採用されており、その動作を変更、拡張することは非常に難易度が高いです。旧バージョンはHTMLを直接変更することで対応できましたが、新バージョンでは、同じ方法で対応できませんでした。
FormBridgeの仕様でもあるので、1分単位の表示に変更になったことを現場の方々へ理解してもらうのも手だと思います。または確認画面を用意し、遷移するときに時刻のエラーチェックを行う、という方法が現実的かと思います。幸い、form.confirmイベントの中でcontext.preventDefault();を呼び出すと、確認画面に遷移することをキャンセルできるようになっています。

ちなみに15分単位に表示する方法としては、時刻フィールドをクリックしたときにHTMLにid="headlessui-portal-root"というものが出現します。この中のHTMLを変更することで15分単位の表示にできると思います。しかし、クリックしたときにその値がセットされないこともあり、その場合はcontext.setFieldValue(fieldCode, newValue)を呼び出し、内部に値をセットする必要が出てきます。コードの流れは以下のようになるかと思います（もっと良い方法もあると思いますが(;^ω^)）。

1. 時刻フィールドにclickイベントを追加
2. クリック時にMutaionObserverでheadlessui-portal-root、data-testid="hours-list"、data-testid="minutes-list"など、いずれかの出現を検知
3. 表示された時刻（分）のうち、00、15、30、45以外を非表示にする
4. 時刻をクリックして閉じとき、MutaionObserverを破棄

時刻をクリックして値がセットされない場合（特に確認画面に遷移し何も選択していないことになっている場合）は、data-testid="hours-list"などが消えたときにcontext.setFieldValue(fieldCode, newValue)を呼び出す処理が必要になると思います。

[pio (匿名)]

丁寧に方法まで提示していただきありがとうございます。
変更・拡張が難しくなったことを知らなかったので現在の状況がとても腑に落ちました。
私には難しそうなので少しずつ試してみようと思います。
反映されない場合の解決策まで提示していただいたので色々なブラウザで試してみます。
ありがとうございました。