1. Log in to the Kuika platform.
2. Open the project you will work on from the Apps screen.
3. Go to the UI Design module.

4. Select the Special category from the Elements panel on the left side.
5. 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.

• Datasource
  • Select the chatHistory created above.
  • The message history is retrieved from here.
  Current User Name
  • The username of the logged-in user is linked (e.g., loggedInUser.name).
  • This is required to distinguish the sender information in the chat.
  Dark Mode
  • Set to On/Off.
  • Improves the user experience for users who prefer a dark theme.
  Show Profile Photo
  • Enabled.
  • The profile photo is displayed in message bubbles using the avatar field.
  Show User Name
  • Enabled.
  • In chats with multiple participants, it is easy to see who wrote what.
  Allow Edit Message (Available only in web applications.)
  • Enabled.
  • Users can edit all their messages (e.g., to correct typos).
  Allow Delete Message (Available only in web applications.)
  • Enabled.
  • Users can delete all their messages (e.g., to remove accidentally sent messages).
  Text To Speech (Available only in mobile apps.)
  • Allows messages to be read aloud.
  • Improves accessibility for users with visual impairments and provides audio interaction on mobile devices.

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., chatHistory) on the Create a New Table screen and click the Next button.

Enter the required column information:

• Column Name: ID
• Type: Guid
• Required: ✔️
• Unique: ❌
• Column Name: message – Message content
• Type: String
• Required: ❌
• Unique: ❌
• Column Name: userDisplayName – Sender's display name
• Type: String
• Required: ❌
• Unique: ❌
• Column Name: avatar – Profile photo URL (optional)
• Type: Image
• Required: ❌
• Unique: ❌
• Column Name: messageCreatedAt– Message submission time
• Type: DateTimeOffset
• Required: ❌
• Unique: ❌
• Column Name: messageModifiedAt – Message update time
• Type: DateTimeOffset
• Required:❌
• Unique: ❌
• Column Name: username – User's system username
• Type: String (200)
• Required: ❌
• Unique: ❌

Data Source Filtering:

• Messages should only be visible to relevant users.
• Example filter:

WHERE username = loggedInUser.username

• 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: Automatically comes with a Row element.

Chat Element Settings

Datasource

• Select the chatHistory created above.
• The message history is retrieved from here.

Current User Name

• The username of the logged-in user is linked (e.g., loggedInUser.name).
• This is required to distinguish the sender information in the chat.

Dark Mode

• Set to On/Off.
• Improves the user experience for users who prefer a dark theme.

Show Profile Photo

• Enabled.
• The profile photo is displayed in message bubbles using the avatar field.

Show User Name

• Enabled.
• In chats with multiple participants, it is easy to see who wrote what.

Allow Edit Message (Available only in web applications.)

• Enabled.
• Users can edit all their messages (e.g., to correct typos).

Allow Delete Message (Available only in web applications.)

• Enabled.
• Users can delete all their messages (e.g., to remove accidentally sent messages).

Text To Speech (Available only in mobile apps.)

• Allows messages to be read aloud.
• Improves accessibility for users with visual impairments and provides audio interaction on mobile devices.

Action Definition

Retrieving Messages While the Page is Loading

A page-specific Page Init action must be defined so that past messages can be automatically loaded when the chat screen is opened. This allows the Chat element to retrieve data from the data source (e.g., the chatHistory table) and automatically display the chat history.

Steps for Adding a PageInit Action:

1. Select the page where the chat screen is located.
2. From the right panel, select +ADD ACTION → pageInit → Managed DB → Get Record.
3. Action Name: getChatHistory
4. Table: chatHistory
5. If necessary, filtering (e.g., only messages belonging to logged-in users) can be performed.
6. The data obtained as a result of this action is used in the Chat element's Data Source setting.

This process ensures that the most recent message history is automatically loaded each time the user opens the chat screen.

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 (chatHistory table).

Save Record Action Addition Steps:

1. In the UI Design module, add a Button (e.g., “Send”) next to or below the Chat element.
2. Select the button and in the Properties panel:
   
   • From the + ADD ACTION menu,
   • select onMessageSend → Managed DB → Save Record.
3. 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 returned, so the ID is usually not sent or is automatically generated in new messages.
4. Table Selection: chatHistory table
5. Table Columns and Values:
   
   • message: Chat1.message.text
   • userDisplayName: loggedInUser.name
   • avatar: loggedInUser.photo
   • username: loggedInUser.username
   • messageCreatedAt: Now()

Custom Actions:

If more control or processing is required during message sending, custom actions can be created and connected as follows when onMessageSend is triggered:

• getUserChat → A custom Get Record action can be defined to retrieve the user's information. It works based on the username column.
• chatHistoryADD → A custom Insert Record action can be created to save the new message with all its columns.
• getChatHistory → A custom Refresh Chat action can be defined to refresh the page. It should be executed after Edit/Send/Delete operations. Otherwise, messages will not be updated instantly. Alternatively, this functionality can be achieved by configuring the Save Record action in Update mode based on the messageCreatedAt column.

Message Update

When a user edits a message, it is updated according to the relevant record ID.

Steps:

Select the Chat1 component.

1. Action Mode: Update
2. Table: chatHistory
3. Properties:
   
   • AllowEditMessage > Components > Chat1.message.currentlyEditingMessageId
4. Fields to Update:
   
   • message: Chat1.message.text
   • messageModifiedAt: Now()

Custom Actions:

• chatHistorySAVE → A special Update Record action can be created for the message column only for the update operation.
• getChatHistory → A special Refresh Chat action can be defined to refresh the chat after editing a message. Alternatively, the Save Record action can be triggered in Update mode via messageCreatedAt.

Delete Message

When the user clicks the “delete” icon next to the message, the message is completely removed from the system.

Steps:

1. Select the Chat1 component.
2. From the right panel, select +ADD ACTION → onDeleteMessage → Managed DB → Delete Record
3. Table: chatHistory
4. Properties:
   
   • AllowDeleteMessage > Components > Chat1.message.messageIdToBeDeleted

Custom Actions:

• deleteChatMessage → A custom Delete Record action can be created based on the id column.
• getChatHistory → A custom Refresh Chat action can be defined to update the chat in real-time after deletion. Otherwise, the deleted message will continue to appear. This requirement can also be addressed using the Save Record action in Update mode via messageCreatedAt.

Chat Element Usage Flow

User side:

• Log in to the application.
• Go to the chat screen.
• The message history is loaded automatically.
• Writes and sends a new message.
• The sender's name and profile photo (if available) appear next to the sent message.
• Can edit or delete the last message.

Support representative side:

• Uses a separate Chat screen that monitors the same message table.
• Sends a message to the user.
• All communication is visible in real-time through the same data source.

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:

1. Select the element on the screen.
2. Open the Properties panel on the right edge.
3. 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.