Skip to main content

 

 

 

 
Language:
 
従来のWebアプリにのみ適用されます
 
 
OutSystems

Chat Message

Chat Message UIパターンを使用すると、通知またはチャット画面に会話の投稿を表示できます。写真、テキスト、画像、配信時間、ステータスなどのコンテンツを表示するために使用できます。

Chat Message UIパターンの使用方法

この例では、ユーザーが問い合わせを入力できるフォームがアプリにすでに含まれています。ユーザーがメッセージを送信すると、Chat Messageウィジェットを使用して会話の投稿としてメッセージが表示されます。

  1. Service StudioのツールボックスでChat Messageを検索します。

    Chat Messageウィジェットが表示されます。

  2. ツールボックスから、Chat Messageウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。

    デフォルトで、Chat Messageウィジェットには[Image]、[Name]、[Content]、[Actions]の各プレースホルダが含まれています。

  3. 関連するコンテンツをプレースホルダに追加します。

    • この例では、ユーザーがフォームに入力した名前が表示されるようにするため、[Name]プレースホルダをExpressionに変換して関連するロジックを入力しています。これを行うには、[Name]プレースホルダを右クリックして[Convert to Expression]を選択し、[Expression Value]ポップアップでNameアトリビュートに移動して[Done]をクリックします。

    • ユーザーがフォームに入力したメッセージが表示されるようにするため、[Content]プレースホルダをExpressionに変換して関連するロジックを入力しています。これを行うには、前の手順を繰り返しますが、今度はMessageアトリビュートに移動します。

  4. Properties]タブで(オプションの)プロパティを設定し、Chat Messageのルックアンドフィールをカスタマイズできます。

これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。

この例の結果は以下のようになります。

プロパティ

プロパティ 説明
IsRight(Boolean型): オプション Trueの場合、パターンは右揃えになります。Falseの場合、パターンは左揃えになります。これがデフォルト値です。
IsInline(Boolean型): オプション Falseの場合、チャットメッセージがバルーンスタイルのボックス内に表示されます。これがデフォルト値です。Trueの場合、チャットメッセージがバルーンスタイルのボックス内に表示されます。
Color(Color Identifier型): オプション チャットメッセージの背景色を設定します。事前定義された利用可能な色は、赤、オレンジ、黄、ライム、緑、青、紫、ピンクなどです。

  • 空白 - 背景色が中間色になります(Entities.Color.Neutral3)。これがデフォルト値です。
  • Entities.Color.Red - 背景色が赤色になります。
ExtendedClass(Text型): オプション Chat Message UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。

  • 空白 - カスタムスタイルを追加しません(デフォルト値)。
  • "myclass" - 適用されるChat Message UIのスタイルに_myclass_というスタイルを追加します。
  • "myclass1" "myclass2" - 適用されるChat Message UIのスタイルに_myclass1_というスタイルと_myclass2_というスタイルを追加します。
  • Was this article helpful?