I am new to Outsystems and looking to understand the layout options in Forms. The default when creating a form from an existing dB entity is one field per row.
In one case, I have an existing form in which each row has between 1 and 6 fields on it, in no particular columnar alignment. If I wanted to reproduce the form to layout in a similar fashion, what approach should I take?
Second Q - is there a repository of form templates out there that I could look at for inspiration?
Hi @Chris Peltz ,
Although the default layout is one field per row, you can always modify the layout in service studio. If you have a lot of stuff and you start to get confused, you can always depend on the widget tree to easily see the layout structure.
And in this case, if you want to properly lay them out without worrying on the responsiveness, OutSystems has the Structure Patterns available:
In your case and as you can see in the first screenshot, you can use the Columns6 that actually splits the row into 6 columns.
You can find more information here: https://outsystemsui.outsystems.com/WebStyleGuidePreview/Columns6.aspx
If you are looking for template repositories, OutSystems already covers it for you. You can always try to create a new Application "From an App" and you'll find that there are loads of templates you can get your inspiration with and play around.
I hope this helps.
Regards,
Bryan
IThanks Bryan. The 6-Col Layout won't work because each row can have anywhere from 1-6 fields, and for those with fewer than six, I would want to spread them out. So things wouldn't fit neatly into 6 columns, unless you can merge columns for specific rows? I could set this up using different column layouts throughout, but that seems messy.
Without using column layout, how else can you have fields share the same row? I am thinking of something similar to Java's GridBagLayout.
Thanks on the Templates. I was looking more for user contrib content. I will be checking out Forge for some ideas.
OutSystems has other column widgets (Columns 2-6) which you can utilize depending on what you need with your rows. So if in the first row, you need 6 fields, then use Columns6. If in the next one you need 5, then you can use Columns5. And so on. You are not limited to using just 1 column widget.
However, to answer your question, if I were to avoid using the Columns widgets, I will have to use containers as column partitions. You can set up containers to take up 2 col each and then have 6 containers in a row that fills the 12 col width. But then again, this can be messy. I normally would use the Columns widgets to save me from creating and aligning those containers.
I don’t think there is an easier way to do this and OutSystems column widget should easily do the trick for you.
Got it. I was looking for something akin to Java's GridBagLayout. But I see what you are saying. Rows where each row has a different number of column based on the pattern used.
Curious - why can you only have a 6-Col Layout while you can have 12 column width containers? Does each column require two widths or the grid?
You can actually achieve layouts more than 6. Lets say if you want 12 columns then you need to have two Columns2 with Columns6 inside of each of the Columns2 column. Or probably Columns3 with Columns4 on each column. You might need some css though for others like 7 or 11. But I’m sure they are achievable.
As for the exact reason why they didn’t include them, i am not quite sure though. I’m not a UI expert but it could be because there are less use cases for too many columns in a form, or probably it’s less user friendly for more than 6 columns.
But then again, I’m sure you can achieve complex layouts by using the existing widgets.
Hope this answers your questions.
Hey @Chris Peltz
I understand that you are new to OutSystems. I suggest you follow the training videos properly so you can better understand OutSystems.
https://learn.outsystems.com/training/journeys/web-developer-single-use-case-2608/bootstrap-entity-and-data-from-an-excel-file/o11/6230
check this link this was helpful for you
thanks
I have gone through some of the training. The link you sent is about bootstrapping. I was able to do that no issue. I am asking more about UI design layout tips. I haven't found much in the training that covers creating more complex UI forms. Any pointers you have on that would be extremely helpful. Thank you!
To create your custom layout
And also you can check this for the main layout
https://success.outsystems.com/documentation/11/building_apps/user_interface/patterns/using_traditional_web_patterns/layout/
in case your need to create custom template use it when create screen , you can use on of this or create your own template you can check next link
https://success.outsystems.com/documentation/11/building_apps/user_interface/screen_templates/creating_screen_templates/
And also you can find more screens templete by click on more