Skip to main content

 

パターン

 

 

OutSystems

ChatMessage

写真、テキスト、画像、配信時間、ステータスなどの対話型コンテンツを表示します。

ChatMessageは、通知またはチャット画面に会話の投稿を表示するために使用します。

使用方法

  1. ChatMessageパターンをプレビューにドラッグします。

  2. プレースホルダで必要なコンテンツを設定します。

  3. パブリッシュしてテストします。

入力パラメータ

入力名 説明 必須 デフォルト値
IsRight Trueに設定されている場合、パターンの位置を右に合わせます。 Boolean No なし
IsInline Trueに設定すると、チャットバルーンスタイルが投稿パターンと似たスタイルに変更されます。 Boolean No False
Color 背景色を設定します。 Color Identifier No Entities.Color.Neutral3
ExtendedClass このブロックにカスタムスタイルクラスを追加します。 Text No なし

レイアウトおよびクラス

イベント

イベント名 説明 必須
OnClick ユーザーがメッセージコンテナをクリックしたときにトリガーされるイベント。 False

CSSセレクタ

要素 CSSクラス 説明
.chat-message-actions is--hidden ToggleChatActionsサーバーアクションでコンテンツを非表示にする場合
.chat-message-actions is--visible ToggleChatActionsサーバーアクションでコンテンツを表示する場合

高度なユースケース

ChatMessageスタイルをユーザーに応じて変更する

  1. チャットユーザーをSource Record Listにして、ListRecordsウィジェットをプレビューにドラッグします。

  2. ListRecordsウィジェットに、ChatMessageパターンをドラッグします。

  3. IsRightパラメータに「If(Chat.List.Current.ChatUser.Sender, True, False)」と入力し、アクティブなユーザーの右側にメッセージが表示されるようにします。

  4. Colorパラメータに「If(Chat.List.Current.ChatUser.Sender, Entities.Color.Primary, Entities.Color.Neutral3)」と入力し、ユーザーに応じて背景を変更します。

  5. ExtendedClassプロパティで「If(Chat.List.Current.ChatUser.Sender, "color-neutral-0", "")」を使用し、背景が初期色の場合にテキストを白色に変更します。初期色が白色の場合、以下のコードを「color-neutral-10」に変更します。

  6. UserInitialsパターンで、[Image]プレースホルダ内のColorパラメータを「If(Chat.List.Current.ChatUser.Sender, Entities.Color.Primary, Entities.Color.Neutral3)」に設定します。これはテキスト色を上記で設定した条件と合わせるためです。

  7. IsLightパラメータを「If(Chat.List.Current.ChatUser.Sender, True, False)」に設定します。

  8. パブリッシュしてテストします。

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

クリック時に[Actions]プレースホルダを表示または非表示にする

  1. ChatMessageパターンをプレビューにドラッグします。
  2. パターンの名前を入力します。
  3. Eventsプロパティで、ハンドラの新しい画面アクションを選択します。
  4. この新しいアクションに、ToggleChatActionsをドラッグします。これは[Logic]タブのOutSystemsUIWeb - ChatMessageフォルダにあります。

  5. WidgetIdパラメータで、ChatMessageパターンの名前を入力します。

  6. パブリッシュしてテストします。

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

  • Was this article helpful?