Wednesday, July 15, 2020

Liferayで成功メッセージを画面上部に表示する

こんにちは。おおたにです。

今回は、ユーザフィードバックのメッセージ表示位置に関するTIPSを紹介します。なお、以下のサンプルスナップショットやコードはLiferay DXP 7.1でのものです。

成功メッセージとエラーメッセージ


Liferay上で何かしらの処理を実行した場合、ユーザフィードバックとしてメッセージが表示されます。例えば処理が成功した場合は、以下のような成功メッセージが表示され、



処理が失敗した場合は、以下のようにエラーメッセージが表示されます(併せて汎用エラーメッセージ「処理に失敗しました。」が画面左下に表示されることもあります)。


画面左下の表示はトースト(toast)と呼ばれる自動的に消えるメッセージで、画面上部の表示は自動的に消えない画面埋め込み(embed)のメッセージです。通知の目的が処理の状況や成否を通知することだけなのか、それ以上の具体的なメッセージをユーザに伝えることなのかに応じて使い分けることが多いです。
Liferayではこれらのメッセージの実装に<liferay-ui:success><liferay-ui:error>を使いますが、普通に実装すると前者がトースト、後者が埋め込みとなります。

成功メッセージを埋め込みで表示したい


メッセージの表示形式はembed属性でコントロールできます。例えば、成功メッセージを埋め込みで表示する場合はこのように指定します。

<liferay-ui:success key="success_message_key" message="msg.success" embed="<%=true %>" />

成功メッセージの表示は以下のようになり、成功メッセージとエラーメッセージを同様のUIで提供するような要件に応えることができます。


この他にも<liferay-ui:success><liferay-ui:error>には表示をコントロールする属性がいくつか定義されていますので、こちらこちらのドキュメントを参考に色々と試してみてください。

No comments: