Create a Comment Thread Like Yammer/Viva Engage in PowerApps

Introduction

One of the desirable features is the ability to comment. We frequently show the specifics of the requests in order to gauge user perceptions and opinions. The ability to comment is useful. For the purpose of responding to comments, we can create a nested gallery, which I will discuss in my upcoming post.

Scenario

We will review the request's details and then give individuals the opportunity to respond.

Objective

This requirement's goal is quite challenging because it frequently calls for proposals for ideas or strategies for improvement.

Step 1. Add a new Scrollable screen.

Scrollable screen

Scrollable

Step 2. How Scrollable screen work?

A scrollable screen allows for full-screen scrolling. By default, a canvas and a data card are added when a scrollable screen is generated.

Full-screen scrolling

Step 3. How to set the height width of the pane?

From the highlighted border we can pull the border and bring it to the yellow border. It is just to show the flexibility of the screen.

Yellow Border

Step 4. How to ensure that the Add section after entering controls?

The add section isn't always clickable. This unclickable issue arises when the Add section covers datacard1, the control added to datacard1, or other controls. In my instance, Form1 is connected to Datacard1 in the form even though it is not inside Datacard1 in the treeview (navigation).

Step 5. How to add controls on a scrollable screen?

With the exception of one control that is inserted through a pane (as the text above indicates, "Add an item from the insert pane") and within the same canvas, all controls on a scrollable screen will always be added within data cards. When a screen is scrollable, it always scrolls a single canvas, making the entire screen scrollable. Using the pane or Add section, all of the controls will be added to the same canvas.

Using this window, you can leave comments.

Add first control

Add the rest of the controls

Step 6. Add the second or next control on the scrollable screen

In this case, the second control is a gallery.

Second control

Cut

In the below screen, we can not see Gallery 2 because it was cut.

Gallery 2

After pasting we can see Gallery 2 in DataCard2. The screen will grow as Gallery2 grows and the entire screen will be scrollable.

Gallery 2 in DataCard2

Step 7. Make Gallery Height overflow according to the Items in the gallery.

If the gallery height is not dynamic, a scroll bar will show up on screen two. One scroll bar needs to be buried or made flexible in order to prevent this. Therefore, it would be excellent to remove the gallery scroll bar. In order to create a dynamic gallery scroll bar, we must construct a height formula.

One scroll bar

Step 8. Add a button, and On click of the button opens a new popup.

This popup allows you to enter comments.

Popup allows

Change the background color of the comment popup panel so that it reflects the popup, and also, behind controls are hidden, which are not required.

Comment popup panel

Step 9. Set visibility of form on button click.

Set visibility

Step 10. Add a cancel icon to disappear the comment popup form.

Set visible property of cancel icon.

Set visible property

Set onselect property of cancel icon.

Conclusion

We observed that comments in the gallery appear beneath one another, and the representation resembles Vivia Engage or Yammer. As I mentioned in the introduction, we can reply to comments using a nested gallery, which I will go over in more detail in my upcoming post.