Kuika's Chat element allows you to add real-time messaging functionality to your application. It can be used in customer support systems, social platforms or any application where users need to interact with each other. In this guide, you will learn how to integrate the Chat element, customize messages and manage user interactions.
The Chat element can be used in both web and mobile applications.
This training content consists of the following topics:
Add Chat Element
Chat Element Properties
Element settings and customization
Add Chat Element
Log in to the Kuika platform.
Open the project you will work on from the Apps screen.
Go to the UI Design module.
Select the Special category from the Elements panel on the left side.
Drag and drop the Chat element into the workspace.
If you drag it to an empty space, the element will be added along with a Row element.
If you drag it into Column, only the Chat element will be added.
Chat Element Properties
Datasource: You can select the data source where the message history will be displayed.
Current User Name: Displays the current user information on the screen where the chat element is used.
Dark Mode: When the switch is activated, you can view the chat element in dark mode.
Show Profile Photo: You can activate the Switch to show users' profile photos.
Show User Name: You can activate the Switch to show user names.
Allow Delete Message: Allows the user to delete all of their messages.
Allow Edit Message: Allows the user to edit all of their messages.
By following this guide, you can use the Chat element effectively in your application.
Real-Time Messaging Integration with Chat Element
This example scenario involves designing a Chat screen that allows application users to chat with customer support representatives in real time.
Data Source Preparation
You can quickly add a new table to the data source with Kuika to store the Chat element's message history. Follow these steps:
Go to the Datasources module.
Click the + icon next to the Tables heading in the left panel.
Select the New Table option from the menu that opens.
Give the table a name (e.g. Messages) on the Create a New Table screen and click the Next button.
Messages should only be visible to relevant users.
Example filter:
WHERE sender_id = CurrentUser.id OR receiver_id = CurrentUser.id
After entering each column, click the ADD button.
After adding all columns, click the CREATE button to create the table.
This data source will be selected as ‘Datasource’ in the Chat element.
Adding a Chat Element
Go to the UI Design module.
Select the Special > Chat element from the left panel.
Drag and drop onto the screen:
If dropped into Column: Only the Chat element is added.
If dropped into empty space: It automatically comes with a Row element.
Chat Element Settings
Datasource
How to use: Select the message table created above.
Why is it important: The message history is retrieved from here.
Current User Name
How to use: Links to the username of the logged-in user (e.g. loggedInUser.name).
Why is it important: Required to distinguish the sender information in the chat.
Dark Mode
How to use: Set to On/Off.
Why is it important: Improves user experience for users who want a night theme.
Show Profile Photo
How to use: Enable.
Why is it important: The profile photo is displayed in message balloons using the sender_photo field.
Show User Name
How to use: Enable.
Why is it important: Makes it easy to see who is writing in chats with different representatives.
Allow Edit Message
How to use: Enable.
Why is it important: Users can edit all their messages (e.g. to correct typos).
Allow Delete Message
How to use: Enable.
Why is it important: Users can delete all their messages (e.g. to remove messages sent by mistake).
Action Definition
Message Sending
An action must be created to allow users to send messages in the chat screen. This action is usually linked to the ‘Send’ button and saves the user's message to the data source (Messages table).
Steps to Add a Save Record Action:
In the UI Design module, add a Button (e.g. ‘Send’) next to or below the Chat element.
Select the button and in the Properties panel:
From the + ADD ACTION menu,
select OnMessageSend→ Managed DB → Save Record.
Select Insert mode as the Save Record Action Mode:
This mode adds a new record to the table.
If there is a record with the same ID, an error is generated, so the ID is usually not sent or is automatically generated in new messages.
Table Selection:
Select the Messages table.
Table Columns and Values:
Link the appropriate values to the following columns:
message: The value of the message text input field (e.g. txtMessage.value)
sendername: The name of the user who logged in (e.g., loggedInUser.name)
senderphoto: The profile photo of the user who logged in (e.g., loggedInUser.photo)
userid: The unique ID of the user who logged in (loggedInUser.id)
timestamp1: The time when the message was sent using the Now() function
Message Update
When a user edits a message, it is updated according to the relevant record ID.
Steps:
Select the Chat1 component.
From the right panel, select +ADD ACTION → onEditMessage → Managed DB → Save Record action.
Clearing the input field after the message is sent (Set Value Of)
When the user clicks the ‘Send’ button, the message input box must be cleared after the message is saved to the database. This is done with the Set Value Of action. This way, the user does not have to manually clear the field after each message, making the user experience more fluid.
Adding the Set Value Of Action
Select the ‘Send’ button and click on the ‘+ ADD ACTION’ menu in the ‘Properties’ panel.
As the first action, add the following action below the previously added ‘Save Record’ action:
‘OnClick → UI Control → Set Value Of’ action.
Configuring the Set Value Of Action
Fill in the following fields in the panel that opens:
Component to Change: Select the text box where the message is written (example: Chat1). This is the input component where the user enters the message.
Prop name to set: message
Value: Default > Empty. This automatically clears the box after the message is sent.
Why Use It?
Value Update: Provides a clean area for the user to write a new message in the same box after sending a message.
Advanced Use: If necessary, a Symbol Picker content other than a fixed value can also be assigned to this field (e.g., a suggestion message from the system).
Extra: Dynamic Message Clearing
If the message content starts with a specific character (e.g., ‘/’), a different value can be assigned in this case. In such scenarios, the Set Value Of combination can be used with If conditional actions.
Simultaneous Messaging
The chat element is designed to reflect database updates in real time.
The same Messages table is used by both the user and the support representative for writing/reading.
With filtering, each user sees only their own chat:
Chat Element Usage Flow
User side:
Log in to the application.
Go to the chat screen.
The message history is automatically loaded.
Write and send a new message.
The sender's name and profile photo (if available) appear next to the sent message.
They can edit or delete their last message.
Support representative side:
Uses a separate Chat screen that monitors the same message table.
Sends messages to the user.
All communication is visible in real-time through the same data source.
Element Settings and Customization
Authorization
Anonymous Access: Allows users to access without entering account information.
All Roles Access: Provides access by verifying users' account information.
For element-level authorization, edit Authorization settings in the Properties panel.
Visibility
Always Visible: Element is always visible.
Hidden: Element is hidden.
Sometimes Visible: The element is visible depending on a specific condition.
To configure the setting:
Select the element on the screen.
Open the Properties panel on the right edge.
In the Visibility field, select an option according to your needs.
Editability
Enabled: Elements can be edited.
Disabled: Element cannot be edited.
Sometimes Enabled: The element can be edited or uneditable according to certain conditions.
Interface Design with Style Panel
By customizing your elements with the Styling Panel, you can create impressive interfaces for your web and mobile applications. In this section, you can configure the following settings:
Layout: Sizing, alignment and padding settings. Settings include Size, Min Size and Align.
Text: Font, style, color, size and spacing settings.
Fill: Customize the background with color or images.
Border: Add borders and corner radius settings.
Shadow: Add a shadow effect to add depth to elements.
By following these steps, you can configure the Area Chart element to suit your needs.
Actions
Kuika supports the following system actions:
Arithmetic, Authorization, Condition, Device, Export, Geolocation, Inversion, Local Storage, Multi Language, Navigation, Notification, Payment, UI Control, Process Administration, Process Automation, Trigger, Process Automation, Process Administration and String Operations.
You can also use SQL actions that you create yourself.
You can use the +ADD ACTION button from the Properties panel to add an action.
Actions support may not be available in some elements.
