Chat Screen

The Chat Screen in the User Chat Feature Template displays the messages between two people within one chat window.

The Chat Screen is where all the messages between two people are displayed. Similar to a text messaging app, there are two bubbles on each side of the screen to denote the sender & receiver of the message. There is also the ability to add attach an image to the message, like modern day messaging apps.

The Components

Image & Text Components

These two components create the heading of the screen to display the Full Name of the user that is being messaged, as well as their profile. These components are controlled by Magic Text and therefore are dynamically pulled in from the database, based on which user was selected on the previous screen.

List Grouping

There are three components that make up each iteration of this list — meaning, each item in the list could potentially have all, some, or none of the components visible.

To begin, the list is filtered to the Current Conversations > Messages and is sorted by Created Date - Oldest to Newest.

Shape & Text Components

There are two text components within the list that are sometimes visible. The visibility is controlled based on whether or not there is text in the database that is available to be shown. If the Current Message > Text is NOT empty, it will show the text.

Rectangle 10:

This rectangle containing a message is only visible if the User ID that is related to the Current Message is equal to the User ID of the person whose messages are being viewed.

In other words, this text bubble is a message. Each message belongs to a conversation, and each conversation belongs to two users. The only time this bubble will be visible is if the current conversation contains a User and that User has sent a message. Said another way, the messages that show up here will be the messages that the Logged In User has received from someone.

Rectangle 13:

This rectangle containing a message is only visible if the User ID that is related to the Current Message is equal to the User ID of the person who is Logged In.

In other words, this bubble will appear with a message in it if the Logged In User sends a message and that message was sent to the Current Conversation. The messages shown here are the messages that have been sent by the Logged In User.

Image:

This image component is only visible if the Current Message > Image is NOT empty. In other words, if there is an image to display within the Message item in the database, the image component will be displayed — otherwise it will not appear.

Input Component

The Input component will be where the Message Text will be entered by the Logged In User.

The Send Button Icon

The Send Button Icon will “send” the message to the chat.

⚡ Icon Action

‘Create’ Action to create a message for the current conversation based on the information that is entered in the Input component.

Image Picker Component

This component allows users to select an image from their device to attach to a message.