# Messaging Screen

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 Components

### **Side Navigation**

<figure><img src="/files/UDyfoXFkn0h99ZokDfqG" alt="" width="39"><figcaption></figcaption></figure>

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.

### Sidebar Group

<figure><img src="/files/HjVJ8gKNnkrqHUfx7P20" alt="" width="212"><figcaption></figcaption></figure>

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.

### TopBar Group

<figure><img src="/files/V9m7ys5ZvAIfF7liusnF" alt="" width="563"><figcaption></figcaption></figure>

**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

### Messages Group

<figure><img src="/files/zFZRf9OFAZC6cFnj0Qdm" alt=""><figcaption></figcaption></figure>

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.

### Chat Form Section

#### Input Component:

<figure><img src="/files/ORBSO1lxoO91GM0RplSq" alt="" width="563"><figcaption></figcaption></figure>

The Input Component is where Users will enter their message to be sent to the channel.

#### **Icon Component:**

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”


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.adalo.com/feature-templates/group-messaging/messaging-screen.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.