Axure Tutorial: Making Chat Interface with Repeater

Introduction

Chat is a feature of many chat app. Today I'll teach you to use Axure to make a chat interface. The prototype is simple to use and can be used directly by filling in the repeater data table.

Features to be Realized

1. View chat list and chat records of different people.

2. View and update the number of unread chats.

3. Send new chat content and update the list.

4. Add the last chat record to the latest chat content of the chat list.

How to Realize these Features

1. Create the interface of chat list and chat record through two repeaters.

2. Edit the unread column number of repeater.

3. Add a new row to the repeater and update the chat list.

4. Edit the latest chat content of the chat list.

Preview the completed prototype for this tutorial

Widgets Setup 

1. Drag several controls shown in the above image into the canvas, create them as repeaters, and fill in the content. The column of repeaters table includes number, image, name, dialog, column4 and unread.

2. Drag and drop the controls shown above into the canvas and create them as repeaters. The column of repeaters includes Other_ name, Other, Other_ message, Me, My_ message.

Note: If it is the other party's chat, import its image and name; if it is my chat, import my image and name.

3. Drag a text field and button into the canvas, and name the text field as input message.

Make other interface elements. And create the chat record on the right as a dynamic panel, named Dialog Panel.

Interactions Setup 

Chat List Interactions Setup

1. First, set the bubble of unread messages. When repeater item is loaded, if the number of unread messages is 0, the bubble will be hidden.

2. When the repeater is loaded, sort the repeater according to the number column.

Chat Records Interactions Setup

3. When items in the list are clicked, set the label of person name as the text of the item name. And add a filter to the dialog repeater to set the text equal to this item name, so as to show the list as this person's list. Then set the unread column of repeater to 0 to make the bubble disappear. Finally, the dialog panel is shown.

1. First set the hiding of the dialog in the dialog box. When item of Dialog repeater is loaded, if Other_ Message or My_ Message column is empty, the dialog widgets are hidden.

2. Set the text in chat list item to show only the last message. When item of Dialog repeater is loaded, add a filter to the current repeater, edit the Dialog column data of the Person list repeater: change its data to Other_ Message or My_Message (Add a judgement: Non empty data).

When the Send button is clicked, if the person name is not equal to the person name (the default label value), the following interaction will be added:

1. Add a row to the dialog repeater. The data is the input data.

2. Update the last message in the Person list to the entered information.

3. Set the Number column of the current row of the repeater to 1 and the Number column of other rows to + 1, so as to set the new message to the top of list.

4. Clear the text field.

In this way, all the settings are completed. If you have any questions and suggestions, please leave a message.

If you like the article, please share it with others with page link, thanks for your supporting! ❤