The Messaging Screen operates as both a navigational element between chats and the main way to read messages within a channel.
Last updated
The Messaging Screen is comprised of several elements that are reminiscent of the popular business app, Slack. With a navigational left hand menu, as well as a ‘Channel’ menu, this feature template allows makers to create an app that is feature rich and pleasantly designed.
The side navigation is the main way that users will navigate around your app. In this case, the second menu item is highlighted to show the users are within the messaging part of the app.
If you would like to utilize this navigation throughout your app, simply copy + paste this component and change the ‘Active Menu Item’ to reflect which screen someone is viewing.
If you would like text to display alongside the icons, change the settings to Side Navigation > On Desktop > Medium Side Menu or the settings to Menu Style > Small Side Menu Item Text toggled on.
This sidebar contains multiple components includes some text components & a list component. The list contains all the channels that the Logged In User belongs to.
⚡ Text Action
The ‘+ Add a Channel’ Text contains a Link Action to the ‘Channels’ Screen.
⚡ List Action
When an item in the list is clicked on, there is an Update Action to update the Logged In User > Active Channel > Channel ID of the channel selected.
Text Components:
The #Name Text Component is controlled by Magic Text, so the information comes from the database. The Channel Name reflected here is based on the “Active Channel” property in the Users Collection.
The Count Text Component is controlled by Magic Text, and is the count of all users in the channel.
Icon Components
Search Icon
⚡ Link Action to the ‘Search Messages’ Screen
More_Vert Icon
⚡ Link Action to the ‘Edit Channel Modal’ Screen
This is a list of Channel Messages, which is filtered by all the channel messages that belong to the Logged In Users > Active Channel and is sorted by the Create Date of the message from oldest to newest.
Icon — Icon 4
The “More Vert” Icon is sometimes visible, based on whether or not the Logged In User created the message.
⚡ Icon Action
Link Action to the ‘Edit Message Modal’ Screen.
The Input Component is where Users will enter their message to be sent to the channel.
The Send Icon contains the action once a message has been created.
⚡ Icon Action
Create a Channel Message where the ‘Message Text’ is the “Input,” the Channel is “Current Channel” and the User is “Logged In User”
