【OutSystems】「Message」機能でメッセージを改行表示させることが出来ない事象について

【環境情報】

■OutSytems 11　

• Version：11(11.8.4）　
• モード：Reactive Web App

【事象】

私用でOutSystesms 11(.NET Stack/Reactive Web App(PC及びモバイル向け))を触り、OutSystemsの既存機能「Message」を用いてメッセージを表示させようとしたところ、HTMLの改行コード「<br>」タグがそのまま表示され改行が実施されない事象に直面しました（NewLine()も試しましたが効果無し）。

OutSystems 10(Java Stack/Traditional APP(PC向け))で3年ほど業務アプリケーションの開発経験があり、その際は「<br>」タグを使用し複数のメッセージを一括表示を実現させていました。今回は、何故か「<br>」タグが無効化されハマってしまったという内容です。

＜図：追加ボタン押下前の様子＞

＜図：追加ボタン押下後の様子（事象発生）＞

今回事象が発生した「買物リスト」画面は、追加ボタンを押下した際にサーバサイドで以下のバリデーションが走ります。

• 「項目名」欄に入力があること
• 「購入店舗」欄に入力があること

どちらにも入力がない場合、以下のように2種類のメッセージを同時に表示させる必要があります。

期待しているメッセージ表示：

　「項目名」は必須入力です

　「購入店舗」は必須入力です

実際のメッセージ表示：

　「項目名」は必須入力です<br>「購入店舗」は必須入力です

より具体的な実装を記します。

• ①：バリデーション処理（Server Action）
• メッセージが2つ以上の場合、<br>タグで連結されたテキストがアウトプットパラメータとして返却される。1つのみの場合、<br>タグは含まれない。
• ②：Message表示処理
• ①の処理で返却されたアウトプットパラメータ（Text型）を、インプットパラメータとして使用する。

＜図：事象が発生したClient Actionの実装状況（課題発生時）＞

【原因】

OutSystems 11におけるReactive Web Appの「Message」機能はEncodeHTML()が実行されており、そのため「<br>」タグが無効化されているようです。

【解決方法】

公式が用意してくれているJavaScript API「FeedbackMessage」のshowFeedbackMessageを使用します。画面から見たら「Message」とほぼ同じ見栄えですが細かい設定が可能で、#3のインプットパラメータでencodeHTMLの実行有無が制御可能になっていることが今回のポイントです。

＜図：showFeedbackMessage　インプットパラメータ一覧＞

※副次的に得られた産物ですが、#5(closeOnClock）が設定出来るようになったのもありがたいです。OutSystems 10や「Message」機能は、メッセージ種別がErrorの場合、1度表示されると時間の経過で非表示になることがなく再度ボタンの押下をしない限り表示され続け、鬱陶しいシチュエーションがありました。ユーザが、クリックでメッセージを任意でクローズさせることが出来る選択肢が得られるのは、プラスなことではないかと考えています（メッセージ内容の性質を踏まえ、最終判断になるかと思いますが）。

具体的な実装例を記します。

■showFeedbackMessage用の関数の作成

メッセージを表示させる機会は数多くの画面で発生することが想定されるため、発生個所に直接JavaScriptを記載するのではなく共通関数として作成を行います。LogicタブでClient Actionを作成し、インプットパラメータは「inMessage（Text）」「inMessageType(Integer）」の2種とします。JavaScriptのインプットパラメータも同様の設定を行います。

＜図：共通関数の実装状況＞

Referenceに従い実装を行います。インプットパラメータは全部で6種類ありますが、message(#1)、#messageType(#2)は変数とし、#3(encodeHTML)は"false"固定とします。4つ目以降は今回は定義しなくて良いため内容であったため記載を省略し、デフォルト値としています。

　※#3(encodeHTML)を"true"とすることで、「Message」機能の表示と同様に「<br>」がそのまま表示されるようになります。

$public.FeedbackMessage.showFeedbackMessage(

    $parameters.Message, 

    $parameters.MessageType,

    false

);

＜図：JavaScriptの実装状況＞

■作成した関数のコール

「Message」を先ほど作成した関数に置き換え、インプットパラメータを設定します。

＜図：事象が発生したClient Actionの実装状況（解消後）＞

Publishを行いメッセージの表示を確認すると、「<br>」タグが改行の役割を果たしていることが確認出来ます。

＜図：動作検証＞

留意点として当方法で実装した場合、メッセージ表示されるテキスト全体にEncodeHTML()が実行されなくなるため対応要否の検討が必要です。EncodeHTML()が必要なケースの場合、「<br>」タグで連結させる前のテキスト（メッセージ）に対して事前にEncodeHTML()を実行しておく等の工夫が必要になります。