Create Comment System Like Facebook YouTube Viva Engage Yammer

Introduction

Commenting is one of the most attractive features one could get. We often display the details of the requests if we want to get a perception of the user and their opinions. The commenting feature comes in handy. We can have a nested gallery for reply to the comment feature which I will explain in the next article.

Scenario

In this, we shall see details of the request and then will provide people to go and comment.

Objective

The objective of this requirement is very demanding as it is often required to take suggestions on ideas or any improvement plans.

Step 1. Create a new Scrollable screen

Step 2. The scrollable screen feature explained

The scrollable screen can be scrolled throughout. When a scrollable screen is created, a canvas and a data card are added by default.

Step 3. Set the height width of the pane as per the need.

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.

Step 4. Ensure to align the Add section after entering controls.

Sometimes Add section is not clickable. This unclickable problem happens if the Add section overlaps with other controls or datacard1 or the control added in datacard1. In my case, Form1 is not inside datacard1 in the treeview(navigation) but it is still associated with datacard1 in the form.

Step 5. How to add controls to the scrollable screen?

All the controls in the scrollable screen will be added within the data card always except the one control that is added through the pane (we can see from the above screen text is Add an item from the insert pane) And within the same canvas. The scrollable screen always scrolls one canvas so the entire screen becomes scrollable. All the controls will be added in the same canvas by using a pane or Add section.

This popup allows you to enter comments.

Add first control

Add the rest of the controls

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

In this case, the second control is a gallery.

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

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

Step 7. Make Gallery Height dynamic.

If gallery height is not dynamic then on screen two scroll bars appear. To avoid this one scroll bar has to be hidden or made flexible. So, the ideal scenario is to make the gallery scroll bar disappear. We need to write the height formula to make the gallery scroll bar dynamic.

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

This popup allows you to enter comments.

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

Step 9. Set the visibility of the form by clicking the button.

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

Set visible property of cancel icon.

Set on the select property of the cancel icon.

Conclusion

We saw how comments look below one another in a gallery and representation looks like Facebook or YouTube Viva engage or yammer. As I expressed in the introduction we can have a nested gallery for reply to the comment feature which I will explain in the next article.