Horizontal listing of table

Horizontal listing of table

  

Hi,

This book1 book2 book3.... are the list of books which is in a book table. I need to show the list of books like the one in this image. And on clicking the arrows to right it should change to book4 book5 book6..Is it possible in OutSystems?

Hello Devu,

It is possible to do it.
There are several ways to achieve this, I would recommend using the Gallery pattern

You could also use the Carousel pattern.


Kind regards

João Batista wrote:

Hello Devu,

It is possible to do it.
There are several ways to achieve this, I would recommend using the Gallery pattern

You could also use the Carousel pattern.


Kind regards

 Can i use this in normal web template


These patterns are from SILKUI

You should use one of their web templates to be able to use these patterns as intended.

I would recommend you check out the Advanced UI patterns lesson form Developing OutSystems Web Applications.

-or-

If you are adamant about using the default web template you can always use a List Records widget with the "Line Separator" parameter set to "None".

Inside of your List Records widget create a container and set its width according to how many elements you want (e.g. if you want 3 elements side by side make the width [of the container inside the list] 4 col). It is inside this container that you will create your list element with the widgets (expressions, images, ...). 

Hopefully this information will help you achieve your goal.

Did you manage to implement a solution Devu?

João Batista wrote:

These patterns are from SILKUI

You should use one of their web templates to be able to use these patterns as intended.

I would recommend you check out the Advanced UI patterns lesson form Developing OutSystems Web Applications.

-or-

If you are adamant about using the default web template you can always use a List Records widget with the "Line Separator" parameter set to "None".

Inside of your List Records widget create a container and set its width according to how many elements you want (e.g. if you want 3 elements side by side make the width [of the container inside the list] 4 col). It is inside this container that you will create your list element with the widgets (expressions, images, ...). 

Hopefully this information will help you achieve your goal.

Hi João,


I have the same concern. In my case, most of my form have several option fields. 



To save an Application Object count, I stored all the option list into 1 entity instead of creating a static entity for each..


I used a web block that will display the option list (as per requirement, need to use a radio button) which I want to display in horizontal manner. I used ListRecord widget and set Line Separator to none.


However, when I load the form, the record list were displayed vertically.

Any suggestion on this?



Thanks,

Ruby

Ruby Jimenez wrote:

João Batista wrote:

These patterns are from SILKUI

You should use one of their web templates to be able to use these patterns as intended.

I would recommend you check out the Advanced UI patterns lesson form Developing OutSystems Web Applications.

-or-

If you are adamant about using the default web template you can always use a List Records widget with the "Line Separator" parameter set to "None".

Inside of your List Records widget create a container and set its width according to how many elements you want (e.g. if you want 3 elements side by side make the width [of the container inside the list] 4 col). It is inside this container that you will create your list element with the widgets (expressions, images, ...). 

Hopefully this information will help you achieve your goal.

Hi João,


I have the same concern. In my case, most of my form have several option fields. 



To save an Application Object count, I stored all the option list into 1 entity instead of creating a static entity for each..


I used a web block that will display the option list (as per requirement, need to use a radio button) which I want to display in horizontal manner. I used ListRecord widget and set Line Separator to none.


However, when I load the form, the record list were displayed vertically.

Any suggestion on this?



Thanks,

Ruby

I think, I figured this out. I modify the style property of radio button from..

to..

This gives me this result.

I'm glad you got it working Ruby!

It is curious that you got that weird behavior with Radio Buttons.
I tried building a Screen with Radio Buttons inside a List Records with the Line Separator set to None and it created a horizontal list without the need to change the CSS.