<img height="1" width="1" src="https://www.facebook.com/tr?id=730305433807073&amp;ev=PageView &amp;noscript=1">
Start

Advent Calendar Door 24: Creating multicolumn form layouts in SharePoint list forms.

avatar

Posted by Adis Jugo - 24 December, 2017

Creating multicolumn form layouts in SharePoint list forms

The last skybow Advent Cookie for 2017 is an evergreen: creating multicolumn form layouts with SharePoint lists. It is probably the single most requested feature in SharePoint, and – sure enough – not something that SharePoint can deal with out of the box, and – again – sure enough, something what is beyond simple with skybow Solution Studio and skybow Rich Forms.

In order to create multiple columns, we will have to work with “Horizontal Group” and “Vertical Group” controls in the “Rich Forms” tab in the form editor. In essence, each Group control can include one or more other group controls, so you can create really advanced and sometimes crazy looking layouts. Most of the time, however, you will create one “Horizontal Group” with as many “Verticals Groups” inside it as you would like to have columns in your layout.

The first step is to select an existing control somewhere in the form. The group will be created right above it. Then, click on the Group icon in the “Rich Forms” ribbon, and select the “Horizontal group”.

Horizontal Grouping Rich Forms

Reposition the group where you would like to have it in the layout. Since we are creating a multiple column layout, you will probably want to have it on the top of the form.

Ad filed in SharePoint Form

Drag and Drop Forms SharePoint

Now, while the horizontal group is still selected, insert the “Vertical group” from the Group icon in the “Rich Forms” ribbon menu.

Add vertical group SharePoint Forms

And a vertical group has been created inside the horizontal group.

In order to create more vertical groups (we need a multiple-column layout), you will need to select the “Horizontal group” inside the layout again, since it is the parent container for all vertical groups inside it. In order to do that, please click the select control icon () beside the newly created “Vertical group” and choose its parent – “Horizontal group”, again.

Horizontal Grouping Rich Forms

Now you can add the next “Vertical group”. Please repeat this process for as many columns as you need in the layout. In our case, we will create three “Vertical groups” for three columns.

Horizontal Grouping Rich Forms

When you are finished creating the layout, just drag and drop controls into newly created “Vertical groups” (columns). You can, of course, freely resize the columns using the mouse and handles beside vertical group controls, or you can select each particular control and enter the precise values in the “Formatting” group inside the “Rich forms” ribbon, as shown in the picture below.

Size field SharePoint Forms

Often, you will want to know how your layout really looks. In order to get a “map” of your layout, you can click on the “Select Element” icon in the “Layout” group of the “Rich forms” button and get a full map of all the elements currently positioned on the form. There, you can easily find and select the element you need. As shown in the picture below, our “Horizontal group” and multiple “Vertical groups” are easy to identify and select.

Groups SharePoint Forms

This way, in less than 5 minutes, we have created a fully functional, good looking multi-column layout in a SharePoint form, in less then 5 minutes. Your users are going to love it, and the adoption will increase. skybow makes this kid of magic possible.

Merry Christmas!

Topics: Office 365, Solution Studio, Sharepoint, SharePoint Online, SharePoint Forms


Recent Posts

Dossiers: Use SharePoint Lists Like a Database

read more

A Dirty Little Secret About InfoPath

read more

Anyone should be able to build SharePoint Add-Ins

read more