Image Card Repeat 

  

Hello guys, 

I just got my first task using OutSystems and it is similar to ng-repeater in AngularJs to repeat the records as Image Cards for example and each will have its data, I will be consuming web API.. 

it will look like this for example

http://flatfull.com/themes/angulr/angular/#/music/home

Thanks in Advance. 

Solution

Hey Mohamed Elmokadem,


what I suggest to display records like Image Cards is that you use a List Records widget instead of Table Records widget. Then you have a propriety that is "Line Separator" which by default is set to "New Line" but change it to "None".

After doing this all your records will appear side by side. Now what you have to do is to put the record inside a container and apply some CSS to make it like a Card.

What you can do also is use the Silk UI because you have already some CSS Classes that will fit your needs,


Tell me if you need more help

Vincent Colpa

Solution

Hello Mohamed.

Another approach would be to use the "gallery": https://silkui.outsystems.com/Patterns_Web.aspx#Web_Structure_Gallery

With gallery you can control the number of items per row.

Cheers,
Eduardo Jauch

Eduardo Jauch wrote:

Hello Mohamed.

Another approach would be to use the "gallery": https://silkui.outsystems.com/Patterns_Web.aspx#Web_Structure_Gallery

With gallery you can control the number of items per row.

Cheers,
Eduardo Jauch

Hey, 

that gallery its simply amazing, love how Silk UI is helping us with all those patterns,


when I had to create an Image Card style data display I had a hard time with the CSS cause I wanted it to be responsive and constantly aligning all the items and each card info for every window size was hard and cost me lot of hours,


definitely got to take a big look at Silk UI patterns,


VC


Vincent Colpa wrote:

Hey Mohamed Elmokadem,


what I suggest to display records like Image Cards is that you use a List Records widget instead of Table Records widget. Then you have a propriety that is "Line Separator" which by default is set to "New Line" but change it to "None".

After doing this all your records will appear side by side. Now what you have to do is to put the record inside a container and apply some CSS to make it like a Card.

What you can do also is use the Silk UI because you have already some CSS Classes that will fit your needs,


Tell me if you need more help

Vincent Colpa

Hey Vincent, 

      Thanks for your I made as you said in a table records with none line separator works as expected after adding 

some CSS classes.
Best regards,
Mohamed


Eduardo Jauch wrote:

Hello Mohamed.

Another approach would be to use the "gallery": https://silkui.outsystems.com/Patterns_Web.aspx#Web_Structure_Gallery

With gallery you can control the number of items per row.

Cheers,
Eduardo Jauch

Hey Edward,  

       Silk UI looks awesome actually with many controls, I didn't use the gallery before I will give it a try see how it works, appreciate your concern so much. 

Best Regards, 

Mohamed