👀 Our most exciting product launch yet 🚀 Join us May 8th for Sanity Connect

Adding tabs to a document in the structure builder using plugins.

27 replies
Last updated: Dec 3, 2021
Is there a easy way to add Tabs per say to a document in the structure builder?
Dec 3, 2021, 3:42 PM
You can use fieldsets to group things without affecting the actual data structure.
Then there’s a plugin for Sanity that will turn your fieldset groups into tabs.
Dec 3, 2021, 3:42 PM
Perfect!
Dec 3, 2021, 3:44 PM
user S
using that plugin forces you to create an object which is changing the data structure
Dec 3, 2021, 3:44 PM
Yes - I just realised that. It’s either changed or I was thinking of a different one. Thanks for pointing that out
user S
Dec 3, 2021, 3:45 PM
Well, we aren't set on data structure yet so I think this still works. Would there be a drawback to using a object to group fieldsets?
Dec 3, 2021, 3:46 PM
Let me know if you find one without structure changes. I'm looking for that :)
Dec 3, 2021, 3:47 PM
This seems to be 'define fieldsets', 'specify fieldset' right?
Dec 3, 2021, 3:47 PM
Which is good, maybe not the fact its 'ALPHA ALPHA ALPHA' haha
Dec 3, 2021, 3:47 PM
Actually - I think that’s just the example. I believe in the one I linked you can apply that to the parent document / object so that it ISN’t affecting your structure.
Dec 3, 2021, 3:48 PM
I could be wrong though. I used something like this on a project last year and it didn’t require schema changes.
Dec 3, 2021, 3:49 PM
I'm pretty much there so I'll just try it out and see ha
Dec 3, 2021, 3:49 PM
So -- didn't have to create a object.
Dec 3, 2021, 3:51 PM
But I only get fieldsets, no tabs ha
Dec 3, 2021, 3:52 PM
Did you add the input component?
Dec 3, 2021, 3:52 PM
Probably cause i'm not using the 'inputComponent', which seems to be required as a object?
Dec 3, 2021, 3:52 PM
No.. but I guess that has to be a top level object in the document fields?
Dec 3, 2021, 3:53 PM
inputComponent is a React component. it’s provided by the plugin
Dec 3, 2021, 3:53 PM
It would have to be on the document:
Dec 3, 2021, 3:53 PM
Right, how do I specify it to be used without nesting my document under a Object?
Dec 3, 2021, 3:53 PM
I think it would be…
{
  type: "document",
  title: `Frontpage`,
  name: `frontpage`,
  inputComponent: Tabs,
  fieldsets: [...]
  fields: [...]
}

Dec 3, 2021, 3:54 PM
Cool so I have tabs and didn't have to change any structure.
Dec 3, 2021, 3:56 PM
Noice! cc
user S
☝️
Dec 3, 2021, 3:56 PM
oh that's cool.
Dec 3, 2021, 4:12 PM
Yes
Dec 3, 2021, 4:14 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?