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>には表示をコントロールする属性がいくつか定義されていますので、こちらやこちらのドキュメントを参考に色々と試してみてください。