[WEB] Show comments like Facebook does

[WEB] Show comments like Facebook does

  

Hi,


Nothing else than what the title says, could you please tell me some way to show comments ( text, datetime, link to answer if possible, link to edit if possible ) gotten from Rest Services as ListRecords will just look 


The closer it gets to something like this, the better:


Just the comments, forget about the main status "Facebook sucks".


Thank you all by advance,

Jordi.

Isnt it any component from Forge that gets close to this ?

Hi Jordi.

I don't know if there is any component for thi sin Forge. Did you search it already?
In any case, what is the problem to use a ListRecords and shwo data in it like the way you want?

Cheers.

Hi Jordi,

Imho use css and some containers.

styling it a bit and you are good to go


Eduardo Jauch wrote:

Hi Jordi.

I don't know if there is any component for thi sin Forge. Did you search it already?
In any case, what is the problem to use a ListRecords and shwo data in it like the way you want?

Cheers.


Hi Eduardo,


Yeah, I did check Forge before opening this post and the only item close to what I wanted was this one ( https://www.outsystems.com/forge/component/1241/comments/ ) the problem is it has no edit and no answer button so it has half the functionality I'm looking for.


Jordi.

J. wrote:

Hi Jordi,

Imho use css and some containers.

styling it a bit and you are good to go



Hi J.


So you're telling me that I should use CSS together with containers, yeah, I get that but I'm guessing I should get the information from a ListRecord right ? 


The problem is I'm not that familiar with CSS so if you could show me any lead I'd appreciate it so much.


Thank you for your suggestion,

Jordi.

well,

I suggest to follow the online courses about css 

https://www.outsystems.com/learn/courses/?IsWebinars=False

and of course https://developer.mozilla.org/en-US/docs/Learn/CSS


Hi Jordi,

If I'm not mistaken Silk UI has a Post pattern that could be a good start (already places the avatar, and remaining elements in the right place, so less CSS to worry about). But you'd still need to implement the rest yourself based on your data. Like J. mentions, ListRecords to iterate through the Comments are the best approach.

Regarding the Comments forge component you mention, if it already has half the functionality you need... that's half the work done for you, you just need to implement the rest. I'd say it's a great starting point, and if you follow this path, please share with the community the end result, that way the next time someone has the same requirement as you, they'll have even less work! 

Jorge Martins wrote:

Hi Jordi,

If I'm not mistaken Silk UI has a Post pattern that could be a good start (already places the avatar, and remaining elements in the right place, so less CSS to worry about). But you'd still need to implement the rest yourself based on your data. Like J. mentions, ListRecords to iterate through the Comments are the best approach.

Regarding the Comments forge component you mention, if it already has half the functionality you need... that's half the work done for you, you just need to implement the rest. I'd say it's a great starting point, and if you follow this path, please share with the community the end result, that way the next time someone has the same requirement as you, they'll have even less work! 


Hi Jorge,


About the Sil UI Post pattern you talk about, I'm afraid I'm not familiar with how it works, I mean, I've already downloaded the proper and needed dependencies and I'm able to drag and drop all the elements to show them on screen but I don't really get how I should apply the information/data I'm willing to show. Let me explain, for instance, a ListRecords component requires a Source Record List in order to iterate through the list itself so that every single item will be displayed. The problem I'm facing is that I don't know where I should place my list of items so that I can show them on the screen. I don't know if you get what I mean but this SilkUI doesn't not give me a way to iterate through a list of items.


Also, as the OP says, if I want to implement something like facebook comments ( Main status/comment -> tabbed replies which can be edited and replied to as well) which way would be the faster ?


- RecordList with containers and CSS as J. said.

- Learning how SilkUI Componentes works.

-Modifying the Comments component linked before so that it has the functionality I'm looking for.


Thank you,

Jordi.

Jordi Gisbert Ponsoda wrote:

(...)a ListRecords component requires a Source Record List in order to iterate through the list itself so that every single item will be displayed. The problem I'm facing is that I don't know where I should place my list of items so that I can show them on the screen. 


Hi Jordi,

Yes the List Records allows you to iterate through a list and show the items in it. 

So, if you drag the 'Post' pattern inside a List Records, for each record you have in the List you'll show a 'Post'.

As for the 'list' itself, generally means it's a Sql or an Aggregate fetched in the Preparation. It gets data from the database, 'makes it available' in a list, that you'll then link as the Source for your List Records.


As an example, i created a Comment Entity, and in the preparation i fetched the comments; in the screen i have the List records with GetComments.List as 'Source Record List'.

 

         

You get something like this, each record is a post.