Skip to main content

 

SILK UI Framework

 

OutSystems

In-App Chat Web Component

The In-App Chat Web 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.

in app chat web_new.png

How to Use the In-App Chat Web

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 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.

dependencies.png

3. Select, at least, the CreateSubjectId action and Subject entity from InAppChatCore.

in-app core.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 Web Chat

  1. Add references to the component, as described in the previous step
  2. Configure the Firebase plugin.
  3. Create a new Entity and call it Channel.
    a. Add a Name - Type Text - and SubjectId - Type Subject Identifier - attributes.
  4. Open the MainFlow flow, in the Interface tab, and drag and drop the entity inside.
    This will create a new screen with a list of Channels.
  5. Repeat step 4 to create a ChannelDetail screen.
  6. Open the Save action of the latter and add the CreateSubjectId action from the Component’s Core.
    Do this only for new channels:

create subject id.png

With this we create a chat instance for each new channel, keeping the SubjectId stored in our data model for later access.

Accessing a Chat

  1. Create a new screen, call it ChatChannel and add an Input Parameter ChannelId (type Channel Identifier).
  2. Add a Preparation action and, inside query the Channel entity and filter by the ChannelId input parameter.
  3. Create two new local variables in your screen and set their type as text: FirebaseToken and FirebaseProjectId.
    a. Set their values with the GetFirebaseData action from step 2.
  4. Create one more local variable on your screen with the name SubjectId and set the data type as Subject Identifier.
    a. Set its value with the one from the query.

channel id.png

5. Drag and drop the InAppChatWeb block in the screen and set the parameters with the local variables created previously.

in app parameters.png

6. Select a New Screen Action in the block’s OnNotify destination.
    a. The block’s description provides information about the messages returned by the OnNotify action, so you can act accordingly:
        - "UserPictureUploaded" - When a user changes his Picture.
        - "HasNewAttachment" - When a user uploads an Attachment.
        - "HasNewMessages" - When a user sends a new message.

Showing a List of Users in a Specific Chat

1. Create a new chat conversation, like in the previous step.

2. Open the Preparation action of the ChatChannel screen.

3. Add the component’s GetUsersInConversation action to the flow, below the GetChannelById aggregate.
    a. Set the input parameter SubjectId with the Subject Identifier that results from the aggregate above.

4. Create a local variable.
    a. InAppChatMemberList - InAppChatMember List.
    b. Set its value with the output from the GetUsersInConversation action.

users in conversation.png

5. Add a List Records widget to the screen and set its Source Record List with the InAppChatMemberList variable.

members list.png

Deleting a Chat

  1. Create a new In-App chat, as described in the previous sections.
  2. Add a new button in the Channel list inside the Channels screen, link it to a new action and name it DeleteChat.
  3. Add an InputParameter and call it ChannelId - type Channel Identifier.
    a. In the list, set the argument with the list’s Channel Identifier.
  4. Query the Channel entity filtered by that ChannelId.
  5. Delete the Channel entry using the input parameter.
  6. Call the DeleteSubjectData client action from the In-App Chat Core API and set its input parameter with the SubjectId from the query.
  7. Refresh the query and the list on the screen.

delete chat.png

In-App Chat Web Input Parameters

Input Name Description
SubjectID Filters the conversation by Subject. If there's no Subject available, use the CreateSubjectId action to create a new Subject identifier.
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 Project ID used to instantiate the Firebase integration.

In-App Chat Web Functions

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

  • Was this article helpful?