【フォームブリッジ】 ステップフォーム利用時の、「次へ」ボタンの文言変更

kintone カスタマイズ
1

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

表題の件ですが、ステップフォームの 一部の画面 において、「次へ」ボタンの文言を変更したいです。

おそらくformbridgeの仕様で、ステップフォーム内の「次へ」ボタンは全て同じクラスになっていると思うのですが、ステップフォーム内で「次へ」ボタンを区別することはできるのでしょうか。

区別ができれば、それぞれ文言の変更を適用できるのですが、、、

 

ご教示よろしくお願いいたします。

2

sdvxdartsさん

こんにちは。

 

JavaScriptであれば可能です。

MutationObserverを使い、現在のステップを監視しながら、ボタンの表示を変える方法です。

(function() {

    'use strict';

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

        // ステップ1を変更する場合
        if (document.getElementsByClassName('ui stackable grid')[0].getAttribute('active') == 0) {
            document.getElementsByClassName('fb-next')[0].innerHTML = document.getElementsByClassName('fb-next')[0].innerHTML.replace(document.getElementsByClassName('fb-next')[0].innerText, '次だ');
        }

        // ステップ上部バーの要素を監視（ステップの移動があれば処理が走る）
        const target = document.getElementsByClassName('el-steps el-steps--horizontal')[0];
        // ノードに変化があれば実行
        const observer = new MutationObserver(function() {
            const el = document.getElementsByClassName('fb-next');
            if (el.length > 0) {
                switch (document.getElementsByClassName('ui stackable grid')[0].getAttribute('active')) {
                    // ステップ番号-1になる点に注意
                    // ステップ1
                    case '0':
                        document.getElementsByClassName('fb-next')[0].innerHTML = document.getElementsByClassName('fb-next')[0].innerHTML.replace(document.getElementsByClassName('fb-next')[0].innerText, '次だ');
                        break;

                    // ステップ2
                    case '1':
                        document.getElementsByClassName('fb-next')[0].innerHTML = document.getElementsByClassName('fb-next')[0].innerHTML.replace(document.getElementsByClassName('fb-next')[0].innerText, '次よ');
                        break;

                    // 以下必要に応じてステップを増やす
                }

            }
        });
        const config = { childList: true, subtree: true };    // 監視を指定するオプション
        observer.observe(target, config);        // 監視開始

    }];

})();

 

3

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