Unable to do alias mapping on fields inside repeated field group (React)

Marketing & Content Hub Blog, Website & Page Publishing
1

Hi,

I am trying to create alias mappings for module fields that are located in a repeated field group but have been unsucessfull so far. The new field that reference the old one does not seem to get included into the modules field values. I have no issue creating alias mappings for fields NOT inside a repeated field group.

I have done my best to follow this documentation regarding alias mapping:

I get no error message in either the page editor or on a published page that gives any insight to what might be wrong

Here is a slimed down version of our people cards module that highlights the issue:

export function Component({ fieldValues }) {
 const { people_cards } = fieldValues

 return (
 <ModuleWrapper fieldValues={fieldValues}>
 <div className={['module_content_wrapper', styles.people_cards].join(' ')}>
 <pre style={{ lineHeight: '20px' }}>Field values:{JSON.stringify(fieldValues, null, 1)}</pre>

 {people_cards.map((card, index) => {
 let { old_title, new_title } = card
 return (
 <div key={index} className={styles.card}>
 <div className={styles.text_wrapper}>
 <p>Old title:{old_title}</p>
 <p>New Title:{new_title}</p>
 </div>
 </div>
 )
 })}
 </div>
 </ModuleWrapper>
 )
}
export const fields = (
 <ModuleFields>
 <FieldGroup label="Styles" name="styles" tab="STYLE">
 <ModuleWrapperStyleFields />
 </FieldGroup>

 <RepeatedFieldGroup label="Cards" name="people_cards" occurrence={{ min: 0, default: 3 }}>
 <TextField name="old_title" label="Title" default="title" />
 <TextField name="new_title" label="Title" default="title" propertyAliasesPaths={{ new_title: ['old_title'] }} />
 </RepeatedFieldGroup>
 </ModuleFields>
)

This is the field values display in the editor when running the code above:

458×229 24 KB

Other things i have tried:

-Change the alias path to include the path of the repeated field group. This did not work either:

<RepeatedFieldGroup label="Cards" name="people_cards" occurrence={{ min: 0, default: 3 }}>
 <TextField name="old_title" label="Title" default="title" />
 <TextField name="new_title" label="Title" default="title" propertyAliasesPaths={{ new_title: ['people_cards.old_title'] }} />
 </RepeatedFieldGroup

-Create a alias inside the repeated field group that reference a field outside the field group. This works as expected:

 <TextField name="old_title" label="Title" default="title" />

 <RepeatedFieldGroup label="Cards" name="people_cards" occurrence={{ min: 0, default: 3 }}>
 <TextField name="new_title" label="Title" default="title" propertyAliasesPaths={{ new_title: ['old_title'] }} />
 </RepeatedFieldGroup>

Does anyone have any idea what’s going on here? Any help would be much appreciated

2

Hi @iLangen,
Thank you for posting to the Community and providing all of the details above!
I’d like to tag in some of our Top Contributors to see if they have any suggestions on this.
Hi @Indra @JTBuys @Stephanie-OG Do any of you all have any ideas on @iLangen’s alias mapping inquiry?
Thank you!
Cassie, Community Manager

3

@chighsmith Have you and your team made any progress regarding this issue?

From further testing I have made some interesting discoveries that might help narrow down what is causing the issue:

New fields that are added to a repeated field group after an instance of that module was created does not seem to get the new fields included at all in it’s field values. However, If i add a new instance of that module to a page after the new field has been added, the new field is present in the fieldValues as expected.

To me, this seems like a likely culprit to the original issue!

I created a test scenario where i did the following:
1. Added the module to a page before adding the “new_text_field”

2. Added the “new_text_field” to teh repeated field group.

3. Added another instance of the module to the same page.

Notice how the old module instance does not include the new_text_field values, but the new module instance does.

export function Component({ fieldValues }) {
 const { navigation_cards } = fieldValues
 const navigation_cards_count = navigation_cards.length

 return (
 <ModuleWrapper fieldValues={fieldValues}>
 <div className={['module_content_wrapper', styles.in_page_navigation].join(' ')}>
 <pre>{JSON.stringify(fieldValues, null, 2)}</pre>
 {navigation_cards.map((card, index) => {
 return (
 <div
 key={index}
 className={[
 styles.navigation_card,
 navigation_cards_count === 2 ? styles.two_cards : styles.three_cards,
 ].join(' ')}
 >
 </div>
 )
 })}
 </div>
 </ModuleWrapper>
 )
}

export const fields = (
 <ModuleFields>
 <FieldGroup label="Styles" name="styles" tab="STYLE">
 <ModuleWrapperStyleFields />
 </FieldGroup>

 <RepeatedFieldGroup
 label="Navigation cards"
 name="navigation_cards"
 occurrence={{
 min: 2,
 max: 3,
 default: 2,
 }}
 >
 <TextField name="new_text_field" label="new text field" default='new'/>
 <TextField name="old_text_field" label="old text field" default='old' />
 </RepeatedFieldGroup>
 </ModuleFields>
)

The old module instance has the following field values:

{
 "navigation_cards": [
 {
 "old_text_field": "Old"
 },
 {
 "old_text_field": "Old"
 }
 ],
 "styles": {
 "background_color": "module_background_color_white",
 "padding_bottom": "bottom-padding-medium",
 "padding_top": "top-padding-medium"
 }
}

The new module instance has these field values:

{
 "navigation_cards": [
 {
 "new_text_field": "new",
 "old_text_field": "old"
 },
 {
 "new_text_field": "new",
 "old_text_field": "old"
 }
 ],
 "styles": {
 "background_color": "module_background_color_white",
 "padding_bottom": "bottom-padding-medium",
 "padding_top": "top-padding-medium"
 }
}

EDIT:

This only seems to affect new fields that have not had it’s default value changed. Once i changes the new fields value from something other then it’s default it poped up in the field values!
Old module instance, changed new_text_field in the editor on one of the field groups to something other then it’s default value:

{
 "navigation_cards": [
 {
 "new_text_field": "Not default value",
 "old_text_field": "Old"
 },
 {
 "old_text_field": "Old"
 }
 ],
 "styles": {
 "background_color": "module_background_color_white",
 "padding_bottom": "bottom-padding-medium",
 "padding_top": "top-padding-medium"
 }
}
4

Hi there @iLangen,
Thank you for your patience on this one!
I was able to work with our team on this and unfortunately, alias mapping on repeater fields is not supported however, alias mapping does work for repeating groups.
This is expected behavior however, we appreciate you putting this on our radar so we can make improvements down the line!
Cassie, Community Manager

5

Hi @chighsmith

It seems like we might be talking about diffrent things. I want to make sure we use the same terminology.

As i understand it, the react component <RepeatedFieldGroup>, which is the one I am having problems with, is the react equivalant of the JSON “repeating group” that is described in this documentation:

Repeated fields are diffrent and not something that i have used in any of my examples.

Is this a correct assumption?

If so, in what context is alias mapping supported for repeating groups? It does not work to reference individuall fields inside a repeating group. As a test I also tried to create an alias mapping for the entire repeated group, but this did not work either:

<RepeatedFieldGroup name="repeated_group" label="Repeated group" occurrence={{ min: 1, max: 3, default: 2 }}>
 <TextField name="text_field" label="Inside repeated group" />
 <TextField name="text_field_2" label="Inside repeated group 2" />
 </RepeatedFieldGroup>

<RepeatedFieldGroup name="new_repeated_group" label="New Repeated group" occurrence={{ min: 1, max: 3, default: 2 }} propertyAliasesPaths={['repeated_group']}>
 <TextField name="text_field" label="Inside repeated group" />
 <TextField name="text_field_2" label="Inside repeated group 2" />
 </RepeatedFieldGroup>

The code above generated these field values:

 "new_repeated_group": [
 {},
 {}
 ],
 "repeated_group": [
 {
 "text_field": "old value",
 "text_field_2": "old value"
 },
 {
 "text_field": "old value",
 "text_field_2": "old value"
 }
 ],

However, creating an alias mapping for the entire repeated group is NOT what I am currently after.

The issue I am trying to solve is how to handle changes to specific fields inside a repeated group, like renaming, moving into field groups, or adding new fields, without loosing any of the fieldvalue data that the editors previously set.

6

Hi @iLangen,
Thank you for your detailed follow-up and for clarifying the terminology.
You are correct in your understanding: the <RepeatedFieldGroup> React component is indeed the equivalent of the “repeating group” described in HubSpot’s documentation, and this is distinct from “repeated fields.”

To address your specific question -- currently, alias mapping is not supported for individual fields within a repeating group. This means you cannot reference or create aliases for individual nested fields inside a <RepeatedFieldGroup>, and, as you’ve observed, mapping the entire group itself does not resolve the challenge of retaining field data when making structural changes such as renaming fields, moving them, or adding new fields within the group.

We recognize how valuable this functionality would be, especially for managing data integrity during schema changes, and we will certainly consider it for future improvements. Your feedback is greatly appreciated and helps us prioritize enhancements to the platform.

Thank you for raising this!
Cassie, Community Manager