プリザンターで自動ポストバックが有効になっている項目をわかりやすくする方法

はじめに

プリザンターの便利機能である「自動ポストバック」。項目への入力をきっかけにイベントを発火させる便利な機能です。ただ、ユーザからしてみると項目を書き換えると他の項目が急に書き換わったり、書き換えのためにUIがブロックされるなど「項目を触ったことにより何かが起こる」ことを予告してあげる方が親切ではあります。
今回は、自動ポストボックが有効になっている項目をユーザにわかりやすく表示する方法を紹介します。

実装してみる

自動ポストボックが有効になっている項目のHTMLコードを見てみましょう。

<div id="Results_ClassAField" class="field-normal">
    <p class="field-label">
        <label for="Results_ClassA">分類</label>
    </p>
    <div class="field-control">
        <div class="container-normal">
            <div class="select-field">
                <select id="Results_ClassA" name="Results_ClassA" class="control-dropdown control-auto-postback">
                    <option value="" selected="selected"></option>
                    <option value="A">A</option>
                    <option value="B">B</option>
                    <option value="C">C</option>
                </select>
            </div>
        </div>
    </div>
</div>

selectにクラスとしてcontrol-auto-postbackが付与されています。これを使って判断出来そうですね。
項目への状況表示は必須項目を表す赤いアスタリスクがあるので、これのデザインを流用して青いハットが表示されるようにしてみます。
ポストバック機能を使用する項目としては、分類・日付・数値・説明・チェックボックスと分類のパターン違いの検索モーダルとラジオボタンといろいろなパターンがあるので、全パターンをあたりCSSを組んでみます。

AutoPostbackLabelIcon.css

.field-wide:has(.control-auto-postback),
.field-normal:has(.control-auto-postback) {
    .field-label label:after {
        margin-left: 3px;
        color: blue;
        content: "^"
    }
}

.field-wide:has(.control-checkbox.control-auto-postback),
.field-normal:has(.control-checkbox.control-auto-postback) {
    label:after {
        margin-left: 3px;
        color: blue;
        content: "^"
    }
}

これを拡張スタイルとして組み込みます。

いい感じに表示されていますね。必須と組み合わせたときの挙動も確認します。
おっと、自動ポストバック表示が勝ってしまい赤いアスタリスクが表示されていません。

先ほどのCSSを少し変更して、対応します。まずは、必須の時は表示されないようにします。

AutoPostbackLabelIcon.css

.field-wide:has(.control-auto-postback):not(:has(.required)),
.field-normal:has(.control-auto-postback):not(:has(.required)) {
    .field-label label:after {
        margin-left: 3px;
        color: blue;
        content: "^"
    }
}

.field-wide:has(.control-checkbox.control-auto-postback):not(:has(.required)),
.field-normal:has(.control-checkbox.control-auto-postback):not(:has(.required)) {
    label:after {
        margin-left: 3px;
        color: blue;
        content: "^"
    }
}

これで、必須の時は必須が優先されるようになりました。

ただし疑似要素は1つしか指定できないため、必須の標準のCSSを生かした状態で自動ポストバック表示と両立させることができません。そのため、標準のCSSを使わず全て定義することにします。まだ、疑似要素の内部で色変更は出来ないため自動ポストバックは青表示とすることは諦めて赤に統一します。

AutoPostbackLabelIcon.css

.field-wide:has(.control-auto-postback):not(:has(.required)),
.field-normal:has(.control-auto-postback):not(:has(.required)) {
    .field-label label:after {
        margin-left: 3px;
        color: red;
        content: "^"
    }
}

.field-wide:has(.control-auto-postback):has(.required),
.field-normal:has(.control-auto-postback):has(.required) {
    .field-label label:after {
        margin-left: 3px;
        color: red;
        content: "*^"
    }
}

.field-wide:has(.control-checkbox.control-auto-postback):not(:has(.required)),
.field-normal:has(.control-checkbox.control-auto-postback):not(:has(.required)) {
    label:after {
        margin-left: 3px;
        color: red;
        content: "^"
    }
}

.field-wide:has(.control-checkbox.control-auto-postback):has(.required),
.field-normal:has(.control-checkbox.control-auto-postback):has(.required) {
    label:after {
        margin-left: 3px;
        color: red;
        content: "*^"
    }
}

こんな感じで表示を両立できました。

まとめ

今回は自動ポストバックのトリガーとなる項目をわかりやすくする方法を紹介しました。システム側での自動動作でUIが絡むモノとなるとこういった小さな表示がUXの改善に効果的なので是非試してみてください。