Earlier in the HubSpot CMS, while building custom modules, it wasn’t possible to create fields that a content editor could duplicate or subtract from a module. However, with HubSpot’s new module system, developers can create repeating fields or repeating groups of fields. For instance, if you’re making a team module or modules where repetition of markup and fields is required, repeater options can come in handy.
Hi! I am Sumeet Hande, a front-end engineer at Addend Analytics and in this blog I will be sharing information about creating and setting repeating fields for a custom module. For this demonstration, we will build a small boxed component which contains a headline, some sub-text and a button. We will provide repeater options for this set of markup.
First, let’s create a new module and populate it with some fields. Head over to Design tools by clicking the ‘Marketing’ tab then selecting Design Tools from the ‘Files and Templates’ option. The boxed component which we will make in this demonstration will contain three fields. The first field will be a simple line of text which will act as the heading for the boxed component. The second field will be a rich text field which will act as the sub-text and the third field will be a URL link which we will display as a button with some additional HTML mark-up. We create the fields by using the Inspector which is the right-most section on the module editor screen.
As you can see in the above illustration, I have created the three aforementioned fields namely, Heading, Information and link.The next step is to create the HTML markup. For that we first create a main container to hold all the other elements. This main container will have two child containers, one will contain the heading and the other will contain the sub-text and the URL.
This is how the skeleton will look like,
The next step is to copy the HubL code snippet for the headline and paste it inside the heading-container. Since we want it to look like a heading, we will wrap this in a H1 tag. The mark-up will look as shown below,
We now need to add the HubL code for the remaining two fields, the subtext and the URL. We will make further bifurcation for the subtext and the URL button by creating two more div elements inside the subtext-container. This is what the code will look like after adding the HubL code for the remaining two fields,
Now, when we preview this HTML code, the Design Previewer gives the following output,
The next step is to add some CSS styling to this content to make it look a little prettier!
Since, it is a boxed component, creating a border around it and giving the box a background color would make it look better. For that we add the following CSS rules,
The next step is to put some mark-up around the URL and remove some of it’s default styles.
Now our boxed-component is ready and the output looks something like shown below,
However, this is a single box-component. Now, we will add repeater options to this markup. Once we add the repeater options to this mark-up, this will enable a content editor to create multiple such boxes or remove them according to requirement. To add the repeater options, to switch back to the module editor and head over to the Inspector section. We first need to wrap all the three fields of our module into a single group. Click on the group button and select all the three fields to create a group field. Give this group-field a name, for instance, box-cluster. After that, scroll down in the Inspector section till you see repeater options.
Switch the repeater options ‘on’ and specify the minimum and maximum number of repetitions you want. Let us set the minimum as 3 and the maximum as 6. This provides the upper and lower boundaries for a content editor. This is how the fields will look like,
Hover over the box (Field group), select ‘Actions’ and click on the copy snippet button. Paste this snippet on some other notepad file. This is the copied snippet:
This is basically creating a HubL for loop which will loop over all the fields and display them. We need to imbibe this code into the mark-up and arrange it as shown below,
The default behaviour of HTML will let the boxes be displayed one below the other, one box on a line. To change that behavior we will include the below line of code into our css styles,
Next, we also need to provide some margin space for each box. For that, we write the css rule margin: 10px; inside the main-container class in the module.css section.
After all this changes, the output will look as shown below,
As shown, the “+Add” button in the preview data will enable content editors to add more boxes if required and similarly provide an option to delete a box. As we provided the minimum value for the repetition as three, we can see three boxes being displayed by default, directly. This is how we use the repeater options in modules to repeat any mark-up. This technique can be used to create modules like a gallery of slides, a collection of testimonials, a group of team members, etc.