Advent Calendar Door 24: Creating multicolumn form layouts in SharePoint list forms
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”.
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.
Now, while the horizontal group is still selected, insert the “Vertical group” from the Group icon in the “Rich Forms” ribbon menu.
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.
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.
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.
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.
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.