Being able to group fields inside a model

Is it possible to group the fields in a model? Currently it’s just a list with fields. Would be nice to give editors a bit more info how fields are related to another and make the UI for them easier to understand.


Originally posted by info@cantierecreativo.net

Maybe the same way as prismic, they use tabs


Originally posted by jan@digitaler-spinat.com

Yes I double thumbs up this idea


Originally posted by experts@parkfieldcommerce.com

Yes please! – with a way to then collapse the group or even start it in a collapsed state. Tabs another good approach.


Originally posted by webmaster@convincible.media

Just an idea

Vertical tabs for the models
Horizontal tabs for the different languages

Or reverse


Originally posted by jan@digitaler-spinat.com

Would definitely love this! We already added this to our internal DatoCMS Wishlist so I was happy this request has already been raised :slight_smile:

This feature could bring a great improvement to the GraphQL API too — if grouped fields were nested under the group name you could model the exact structure you want to get out of the API. As far as I can tell GraphQL doesn’t support introducing arbitrary nesting of fields in its query syntax, so often I’ve had to pull data from the GraphQL API and then transform it around a bit to get the structure I want.

Is this feature still on the cards? I’m just working on some models which represent long pages with lots of sections, and due to the low contrast of Dato’s form UI (both in terms colour, and sizing and spacing), it’s really really hard to scan the page and see which field you’re after.

The project isn’t public so I can’t share, but you can imagine a long page with 30+ fields of all sorts, text, multiline, galleries, seo, modular, etc.

Improved colour and size contrast, vertical separators elements, etc could all help. But I agree with the above that the most straightforward solution is horizontal tabs across the top. The content of each tab wouldn’t get too long, and users would understand what each tab is for with a simple text label.

It would also allow us to train users what to expect in different models — eg. if a model has an associated SEO field, then it’s always the first tab on the left labelled ‘metadata’ with a title and summary field.

@webworkshop @floris.tenhove one simple way to manage this is to write a simple field-addon plugin: https://www.datocms.com/docs/guides/building-plugins#field-addon-plugins in which you can draw a separator.

Then you can have another plugin to show a “section header” in which you can create your own title and section.

We’ve seen very complex pages that are nicely structured and much more scannable.

I’m mentioning this as a workaround, we’ll surely need to implement something on our side as well!

1 Like

Thanks @mat_jack1 the separator is a great idea for a workaround. I’ll make it public when I get a chance to put something together.

3 Likes

It would be really good to have the ability to add Headers and blocks of text within the Model to announce sections - these dont need to be within the model data schema but just decorations that can be added to make the model content editor more organised and clean. Grouping via tabbing (similar to the locals) would be awesome, or a colour coded line on the left side of the content editor to group fields together would also be awesome here.

Currently working on this!

Modelling side:

Editing side:

6 Likes

Love it already! Keep up the good work @s.verna! :+1:

1 Like

Thanks for the work on this! Since the grouping is aimed at improving the editor’s experience. Maybe it’s worth considering allowing an editor help block as part of a group?
For now, we’ve created a field add-on plugin for this: https://www.datocms.com/marketplace/plugins/i/datocms-plugin-editor-help .
But it would be more convenient to have it as an introduction section to a field group.

1597767987-preview

2 Likes

I don’t know how I missed this but this is GREAT! Can’t wait. It would be amazing if you could set the default open/closed status for each group to guide editors.

Yes, you will be able to do that @webworkshop!

1 Like

It’s live!

4 Likes

Hey guys - just a quick UI suggestion;

It would be great if at the bottom of each fieldset you could have an ‘add new field’ button which attaches a new field directly to that fieldset - rather than adding one at the bottom then dragging up.

7 Likes