Zyllio Documentation English

Chat

This guide explains how to set up and configure a Chat component that allows the exchange of messages between two authenticated users

⁠

Setting Up Authentication

Before starting, it is essential to set up authentication to ensure that only authorized users can exchange messages with other users.

Creating the Users Table

From the Database tab, drag a Users table into the workspace. Zyllio will automatically create the required columns and also two sample users. These users are useful for testing and can be modified or deleted later.

⁠

You can keep tables that define columns in English. However, the screens can be displayed in your language by using the Label property available in all components.

Creating the Authentication Screen

From the Designer tab, drag a Login screen into the workspace and select the Users table. You will get this ready-to-use screen:

⁠

Then, create a second screen called "Header" and name it "Friends."

⁠

Displaying the Friends List

Then link the "Enter" button, which handles authentication, to the "Friends" screen. This way, if the authentication is successful, the mobile application will display the linked screen (in this case, "Friends")

⁠

In the "Friends" screen, add a List component (or any other list component like Grid or Carousel) using the Users table.

⁠

Set a filter on this List component to exclude the authenticated user based on the following criteria:

Email is not equal to User/Email

Here, Email represents the Email column from the Users table, and User/Email refers to the email of the authenticated user (User).

⁠

Creating the "My Messages" Screen

Creating the Chat Messages Table

You need to create a table to store the messages written by users. To do this, from the Database tab, drag the Chat messages table into the workspace.

⁠

Creating the Chat Component

Create a screen named My Messages and drag a Chat component from the list of components under the Lists section, selecting the Chat messages table. Then, link the two screens as shown below.

⁠

The Chat component does not display any messages because the table is empty.

Filtering Messages

By default, the Chat component displays all messages sent and received by the authenticated user. In this case, the Chat component should display only the messages exchanged with the user selected in the "Friends" screen.

To do this, set a filter on the Chat component to display only messages received or sent by the selected friend from the "Friends" screen

Pensez à cocher l’option Match any

⁠

Writing Messages

Optionally, to allow message writing, use the Message component from the Form fields section, again selecting the Chat messages table.

For this tutorial, the authenticated user sends a message to the selected friend from the "Friends" screen. Therefore, you need to set the Recipient email property accordingly.

⁠

Testing Your Application

Test the application from the Simulation tab.

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.