Table of contents

Field grouping and logic

Another powerful new addition to modules is the ability to group fields. This functionality lets you tailor a more intuitive editing experience for your users. In this section, we’ll see grouped fields at work and also take a look at using conditional logic in the HTML + HUBL section of the editor.

Create a new group

To group a number of fields, click the Group button towards the top right corner of the inspector. You will be prompted to select fields to group. In this case, we’ll create a group to partition off the meta info for this image.
HubSpot Help article screenshot

Name your group

After creating your new group, you’ll be in the editing mode for this group. Add a name for this group. Remember, your user will be depending on this name to intuitively edit this page. Use the breadcrumbs to exit the field group editing mode. The image below to the right shows the group as it appears next to other fields in the module.

HubSpot Help article screenshot

Access your group data with HubL

It’s important to note that the data for grouped fields are stored inside the group. The screenshot below illustrates the HubL for accessing the image meta in the example above. In this case, image_title is a child of image_meta, not a direct child of the module.

HubSpot Help article screenshot

Add conditional logic

The ability to group fields and create more complex modules can result in a more cumbersome experience for your user if you aren’t careful. You’ll probably want to add conditionals for groups like our image meta example in case your user doesn’t have this content available for some images.

In the screenshot below we check to make sure an image has been selected before adding the figure and image tags. Then we check to make sure each image meta field has been filled out before adding the markup for those fields.

HubSpot Help article screenshot

Depending on the module, you may want to use a combination of Display Conditions, Required Fields, and HubL logic to make things as flexible and intuitive as possible for your user. This example was chosen for succinctness. For more info on conditional HubL, check out the documentation here.