Prologue

After working on many Power Apps project, I notice that a lot of project need something like ‘Chatbox’ embeded within the Power Apps. I created it as component library so I can use without needed or recreate.

---

Showcase

Let’s see how its work, this video is showing two chatbox to demonstrate what will looks like in view of current user (who sending message) and another user (who receving message)

---

How its work

Well, l will do a little explanation, My goal about this chatbox is

• 100% Made within Power Apps, no need of custom code (PCF).
• Standalone, no dependencies required.
• Customizable without needed of edit the component.
• Support for any app, any data source.
• Support both 1-on-1 and group chat.

To archive these goal, Almost everything need to put in component property

---

Properties

OK, Let see a list of property where you can effortlessly customize this chatbox

RadiusTopLeft, RadiusTopRight, RadiusBottomLeft, RadiusBottomRight

• Data type: Number
• Purpose: Border radius for each corner

Theme

• Data type: Record
• Purpose: Change the appearance of chatbox
• Structure: Its so detailed, I recommend you to try change each property and see how they reflect to your chatbox!

HeaderText

• Data type: Text
• Purpose: Text display at top of the chatbox

Messages

• Data type: Table
• Purpose: Messages need to be shown in chatbox
• Structure: Must provide table exactly with this structure, no more, no less
  • image
  • message
  • senderId
  • senderName
  • side
    • Chatbox use this to control that which message need to be shown on left or right side (received = left, sent = right)
  • timestamp
    • Chatbox use this to sort the chat, lasest message will always at the bottom.

ShowLeftImage

• Data type: Boolean
• Purpose: Visibility of receiver profile image (left side)

ShowRightImage

• Data type: Boolean
• Purpose: Visibility of sender profile image (right side)

Showscrollbar

• Data type: Boolean
• Purpose: Visibility of scrollbar in chatbox

HintText

• Data type: Text
• Purpose: Placeholder text shown in text input if empty.

HeaderImage

• Data type: Image
• Purpose: Image shown at the top of chatbox

---

Download

You can download the component library at my GitHub repo

• https://github.com/VeGETz/PowerApps-Chatbox-Component
• https://github.com/VeGETz/PowerApps-Chatbox-Component/releases/tag/Release

Here’s some note

• A solution named “ChatboxComponent” is the main solution that contains the component library
• A solution named “ChatboxComponentSample” is optional, It just contains sample canvas app that using the component library
  • To install this solution, “ChatboxComponent” need to be installed first
  • Even the sample app is using Dataverse, you can use this chatbox with any data source

Please read this about how to import the solution to your environment

---

How to use

Please follow these step to use this component with your own app