Introducing Field Groups

A new way to organise your edit forms

We increasingly see customers looking for ways to rationalise more complex edit forms. As forms grow in complexity with more fields being added, it can sometimes be difficult for a CMS user to see what’s going on. Big forms feel complex and daunting, and complex and daunting forms don’t get used like they should.

Perch 2.4 introduced the concept of dividers to try and help with this. That was a good step forward, but in recent times we’ve seen customers try to add on JavaScript hacks to try and make dividers do more than they were designed for, so they’re obviously not completely solving the problem.

This is a problem we’ve experienced ourselves, too. In the design of the Blog app’s main Post edit form, we tried to organise the fields across two tabs of the smartbar, introducing the “Meta & Social” section. That has proved confusing and not an ideal way to solve the problem either.

So we’re looking at it again. Perch 3.1 introduces a new experimental feature called Field Groups. It’s new and you can use it today in Perch and Runway 3.1, but we don’t think it’s 100% complete, because it’s missing a very important component - your feedback. We don’t want to create another feature that doesn’t quite solve the problem, so we’ve made a start with what we hope is a good approach, and we can refine it as we go.

That means that if you’ve got client who are very sensitive to change, you probably shouldn’t use Field Groups in their projects just yet, because they might change a little.

Groups

Using field groups

To add a field group to your form, wrap the fields you want to group in a perch:group tag pair.

<perch:group label="My group">
   ...
</perch:group>

The label attribute is used on the form as the name for the group. The user can click the group name to expand and collapse the group.

If you want the group to be collapsed initially, add the collapse attribute.

<perch:group label="My group" collapse>
   ...
</perch:group>

If any field within the group is invalid, the group is open and can’t be collapsed until the problem is addressed.

When a group is collapsed, we show a summary of the content within it. This means that while sections of the form can be compacted down to take up much less space, no content is hidden in a way that could cause it to be missed.

Give it a go

We’d love for you to try out field groups on your own projects and see if they solve some of the issues you’ve been experiencing with larger forms. The documentation outlines the features and gives some examples of use, plus a few notes. If you run into a problem or have any feedback, come over to the support forum and create a thread to discuss your issue.