Skip to main content

SILK UI Framework

 

OutSystems

In-App Chat Mobile Component

The In-App Chat Mobile Component allows you to send and receive messages in real time, as well as share attachments, such as photos, videos, audio and different file formats.

How to Use the In-App Chat Mobile Component

The component uses Firebase as its Cloud Messaging system
Drag the InAppChat block to your workspace, configure the Firebase, generate a new subjectId using the server action provided and bind it to the block.

  1. In your Application Module, click the Manage Dependencies button.
  2. Select the component and all its actions, blocks and entities.

in app mobile dependencies.png

3. Select, at least, the CreateSubjectId and GetUsersInConversation actions from the InAppChatCore, since you'll need them.

Pasted image at 2017_11_17 02_15 PM.png

The In-App Chat component provides an API to access the data of a specific chat.
To have access to each chat instance you create, you must save the Id the component provides in your data model, in an extension entity. For example, if you’re implementing a chat scenario for a specific ‘Product’ you should create a ChatProduct extension table - with ProductId, SubjectId as attributes.

data model.png

Creating a New Mobile Chat

  1. Add references to the component, as described in the previous section.
  2. Configure the Firebase plugin.
  3. Drag the InAppChat block to your screen.
  4. Create two new local variables on your screen and set their type as text: FirebaseToken and FirebaseProjectId.
  5. Create one more local variable on your screen with the name SubjectId and set the data type as Subject Identifier.
  6. Create a new handler for the OnFirebaseMissingData event and get the Token and ProjectId generated by the GetFirebaseData server action.

7. Call the Create SubjectId server action from the component’s core API. If a title is provided, a subject with that title is created and the Id is returned. If no title is provided, a new subject is created and the ID is returned.
    a. This SubjectId is the chat identifier you need to store to allow users to have access to the specific chat.

8. Fill in the local variables with the GetFirebaseData and CreateSubjectId information.

in ap parameters.png

9. Associate the Collaboration block’s parameters with the local variables.

Note:
To access the same chat again, you have to store the SubjectId.

Showing a List of Users in a Specific Chat

  1. Create a new chat conversation, like in the previous section.
  2. Create a new screen and name it MemberList.
    a. Create a new input parameter, set its data type as Subject Identifier and name it SubjectId.
    b. Create a new query using the Fetch Data from Other Sources option. Name it ListOfUsersInConversation.

home screen.png

c. Rename the ListOfUsersInConversation output parameter to UsersInConversation and set the data type as InAppChatMember List.

Pasted image at 2017_11_17 01_54 PM.png

d. Call the GetUsersInConversation server action from the component’s core API. Fill the SubjectId input parameter with the screen Input parameter.

e. Assign the GetUsersInConversation output with the query one.

f. Use this query to create a list of users.

Deleting a Chat

  1. Create a new Chat conversation, like in the previous section.
  2. Add a new button in the screen, link it to a new client action and name it DeleteChatOnClick.
  3. Call the DeleteSubjectData client action from the Social Collaboration Core API and associate its SubjectId with the screen’s one.

6. Change the destination to another screen.

In-App Chat Mobile Input Parameters

Input Name Description
SubjectID Filters the conversation by Subject. If there's no Subject available, use the SetSubjectId action to create a new Subject identifier. You should store this identifier in your data model to identify a particular conversation.
ShowBottomBar Show or hide the bottom bar when the component is on the screen. Set to True, and the bar will be visible. When the User starts typing, the bar will be hidden and shown again when the message is sent. Set to False and the bar will be kept hidden - Default.
FirebaseToken Firebase Token used to instantiate the Firebase integration.
This token can be generated using the GenerateToken action provided by Firebase component API.
FirebaseProjectId Firebase Secret used to instantiate the Firebase integration.
This is a unique identifier for your Firebase project which can be found in the Project's Firebase Console URL.

In-App Chat Mobile Functions and Events

Refer to the list of functions and events required for the In-App Chat Mobile component to work properly. 

  • Was this article helpful?