Skip to main content

 

 

 

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

Chat Messageのリファレンス

レイアウトおよびクラス

イベント

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

CSSセレクタ

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

高度なユースケース

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

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

![](<images/chatmessage-6-ss.png>)

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

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

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

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

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

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

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

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

クリック時にアクションプレースホルダを表示または非表示にする

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

1.パターンの名前を入力します。

1.Eventsプロパティで、ハンドラの新しい画面アクションを選択します。

1.この新しいアクションに、ToggleChatActionsをドラッグします。これは[Logic]タブのOutSystemsUIWeb - Chat Messageフォルダにあります。

![](<images/chatmessage-4-ss.png>)

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

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

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

  • Was this article helpful?