Can we have "empty" group fields?

Prismic for Content Creators
1

When creating groups of fields, some times I want them to be possible to be left blank.

Example: In a portfolio, I want to have the technical_details field as a group field, where one could create as many task and doer inside of it.
In the front-end, if technical details has no elements, then omit this section entirely. As of now, it returns one object with empty fields.

Perhaps some inside condition in the API that if a group field as only one entry and all their fields are empty, return []instead of [{field1: "", "field2": "" …}]

All the best,
F.

3

Hey @fred2,

Thanks for this suggestion! First, I'll explain the rationale behind this decision:

Prismic has always favored returning falsey values for empty fields. This has a few benefits. For one, the behavior is predictable, so you won't get those darn Cannot read property of undefined errors.

It also encourages developers to deal with errors assertively. Error handling and data validation is often more than a matter of "does this exist?". An empty string might be deliberate. On the other hand, a string might pose a problem in your app if its too long, or has unwanted characters. So, Prismic returns very literal data so that developers can decide how they want to handle errors, empty values, etc.

In a case like yours, I would write a script to see if the fields have content, and then render the group conditionally.

Having said all of that, we regularly revisit decisions like this, so I'm going to flag your suggestion with our product team, and I'll let you know if anything changes!

Best,
Sam

1 Like
4

Absolutely! I understand the motivation behind this choice.

It bothers me that I've found myself doing !!doc.technical_details.length && doc.technical_details[0].field1 || doc.technical_details[0].field2 && <component> which is terrible syntax, but the first condition will always be truthy, and that has led me to many mistakes in the past :frowning:

1 Like
5

Cool! I hear what you're saying.

I'll let you know if we revisit this decision. And, in the meantime, let me know if you ever need help with workarounds.

1 Like
8

For anyone using React here's an utility function to identify whether a group has items. It's probably not the best performant in the world but works wonders.

export const groupHasItems = (group) => {
	if (!group || !Array.isArray(group) || !group.length) return false;
	return (
		group.length > 1 ||
		group.filter((item) => Object.values(item).filter((value) => value))
	);
};
1 Like
9

@fred2 Awesome! Thanks for sharing :slight_smile:

10

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.