Table of contents

Field repeating and loops

One of the most significant features of modules is the ability to repeat fields or groups of fields. This means that a developer can create a module that allows users to add or subtract content in a structured but very extensible manner. Repeating fields and repeating groups can be created in the local development tools or if preferred the Design Manager. Let’s take a look at how this works in the Design Manager.

Create repeating field and set options

Create a new field in the Inspector. In this example, we’re using an image field. Switch on the repeater options switch for this field at the very bottom of the Inspector. Optionally, set a minimum or a maximum number of required instances of this field in the Object count limits section. You may also set a default object count.
HubSpot Help article screenshot

Loop through field with HubL

Since we’re giving the user the ability to add as many instances of this field as they like, our HubL markup will take the form of a loop instead of a single tag. In the HTML + HUBL section of the code editor, loop through the new field as shown in the screenshot below. You can also use the "Copy" menu and choose "Copy Snippet" to get your for loop code. 
Location of the copy snippet code in the copy menu.

In this example, we’re looping through an image field named snapshots and plugging the src and alt attributes of each instance into an image tag. The attributes used in this loop will vary with the field you are repeating. Check out the reference page for a full list of fields and their attributes.

If you’d like more general info on HubL loops, full documentation can be found here.

HubSpot Help article screenshot

The editing experience for repeating fields

The editor experience for users is illustrated below. In the left screenshot, the default single image appears when a user first begins editing this module. Clicking the Add button duplicates the default image.

As illustrated in the screenshot on the right, hovering over the duplicated image allows the user to either delete the image or enter editing mode where they can swap the image and set any other available attributes.
HubSpot Help article screenshot