Conditional fields in Array of type Object - Sanity.io
Here's how you can work with conditional fields in array of type object - Sanity.io.
Go to Conditional fields in Array of type Object - Sanity.ioThis article describes my experience creating my very first Sanity.io plugin. The main takeaways here are the problems I encountered and how I solved them. But yeah, just really scratching my own itch and with a little hope that you might find this plugin useful.
I recently published sanity-plugin-netlify-deploy-status-badge - a Sanity studio plugin that displays your Netlifyâs site build status.
It also displays the latest deploys of your site - UI/UX looks like a carbon copy of Netlify Appâs deploys page. Oops, sorry! đ
To make it even more useful, I added triggering a new build function behind an authentication mechanism thanks to Netlifyâs OAuth.
This isnât my first attempt at creating a plugin, and even though the first one never made it to the finish line, the hours spent on it were carried over to this one. So, really, all good. đ
In a nutshell, and in my definition, a plugin extends the functionality of an existing app.
In Sanity, you can do as much and from a basic tool to one with routing, or a custom input component, or creating a dashboard using widgets or providing a custom asset source. Like really, the limit is up to your imagination.
The easiest way to get started with creating a plugin is to run the command:
sanity init plugin
This will bootstrap us and allow us to choose a template for the possible type of plugin weâre going to create.
Out of all the options here, I found the âBasic, empty toolâ the easiest as it gave me quick feedback on how this plugin works plus thereâs not a lot of files to scan through. It basically creates a new menu item named âMyToolâ in the top bar. Clicking on that gives us an almost blank page like below.
If you take a look at the source code at plugins
directory, youâll find that MyTool.js
is just your typical React Class component. You might ask if we could write a Function component? The answer is, yes, of course. The thing Iâm not sure though is whether if itâs better to write a Class component than a Function component. Do you guys know? Please share your thoughts in the comments below this post.
Anyhow, you should be able to find sanity.json
in the plugin directory and if you click on that, youâll find the following contents below.
{
"parts": [
{
"implements": "part:@sanity/base/tool",
"path": "./index.js"
}
]
}
To be honest, when I first encountered the above, it just didnât make sense to me at all. Maybe I was just bad at specifying the right keyword to Google at that time, but I didnât really found an answer to this until later.
âEverything in Sanity is a pluginâ, they said. The above is what they call the Part System. You can read more on that here but in a nutshell, Sanity is assembled from these so-called parts
and plugins are basically a collection of âpartsâ that either add or replace or amend the original Sanity parts.
I found this Sanity plugin called Parts List. You can install it if you want to get to know more parts as itâll list them down for you. And to really get to understand these things, this intro from Sanity really helps.
Disclaimer: This plugin is basically just scratching my own itch and with a little hope that others may find it useful. My site is happily hosted at Netlify and I wanted a way to see how my site is doing without having to go to Netlify app and switch back and forth. Before I went to write this plugin, I went to Sanity.io plugins directory and NPM to find if such a thing already existed and I got excited when I found thereâs none yet.
My idea was pretty simple, show the Netlify status badge up there and update it real-time. Sooner, I realized that I also need to show the latest deploys as well to understand whatâs going on with my site and update them too continuously, and lastly, well, I thought, there are cases when I want to trigger a new build right here and there, so I thought, letâs also add that.
So to summarise, here below:
â
Display Netlifyâs Status badge and update real-time.
â
Display my siteâs deploys and update them in real-time.
â
Trigger a new build.
To be honest, I wasnât able to come up with that clean list above when I first started. And I think youâll find yourself in the same situation. If I may throw a piece of advice, just keep it simple. Simple that it does its job and it does it very well.
I wonât go step by step on detailing how I created everything but instead, Iâll tell you things where I tripped and had difficulty building this plugin.
To begin with, I bootstrapped the plugin using sanipack made by Espen (Principal Engineer at Sanity.io). You donât need to use this tool at all if you know how to set things up yourself.
According to the FAQ (derived):
âIf you just make sure your Sanity plugin is ES5-compatible and that your sanity.json
and any references parts refer to the right directories, and youâre good to go.â
I thought if I wanted this plugin to be used by others, I need to make sure that they could specify their own Netlify site id.
So, the first problem I had is how to use the key/values specified in my pluginâs config marked with the filename of <name-of-plugin>.json
(netlify-deploy-status-badge.json
) in Sanity Studioâs config
directory.
So, letâs say if I have the following below as content:
{
"apiId": "<YOUR-NETLIFY-API-OR-SITE-ID-HERE>"
}
The solution is simple, in my plugin, I just need to import like this below:
import config from "config:<name-of-plugin>";
where <name-of-plugin>
is of course netlify-deploy-status-badge
.
So, the import will be now:
import config from "config:netlify-deploy-status-badge";
console.log(config.apiId) // <YOUR-NETLIFY-API-OR-SITE-ID-HERE>
See pluginâs config helper file here as an example.
While I bootstrapped my plugin using sanipack, I actually created it inside the plugins
directory. As you may know, since both @sanity/ui
and @sanity/icons
are already included in Sanity Studio, I never ran into problems using those two. And even when I imported functions from date-fns
later on. But when I moved it out, and test using npm link, I immediately saw a huge pile of import errors.
To solve this issue, I needed to install both @sanity/ui and @sanity/icons as dependencies in my plugins folder. I also went to add date-fns as well as it allowed me to format dates easier. I thought I donât need the last one but I guess the comfort it gave won me over this time. And oh, lastly, I need to install styled-components as it is also a dependency of Sanity UI. Yay!
...
"dependencies": {
"date-fns": "^2.21.3",
"prop-types": "15.7.2",
"@sanity/icons": "^1.0.6",
"@sanity/ui": "^0.33.19",
"styled-components": "^5.2.3"
},
...
See package dependencies here.
And lastly, youâll have to import studioTheme
and ThemeProvider
from @sanity/ui
and make sure to wrap your primary component with it. See the example below:
import { ThemeProvider, studioTheme, Container, Text } from "@sanity/ui"
export default function PrimaryComponent() {
return (
<ThemeProvider theme={studioTheme}>
<Container>
<Text>Yay! This works now...</Text>
</Container>
</ThemeProvider>
)
}
See this Getting Started guide to learn more.
And I guess thatâs pretty much it. I guess the other things were pretty much about the logic of the app. And maybe perhaps, I donât remember them as much before. Remember, this is the second time I tried and Iâve pretty much learned things I didnât know before.
Thank you for reading up until here. I hope you can at least get something useful from this article to compensate for the time youâve spent reading this.
Build your own Sanity plugin! I think itâs really important to really understand the Part System
I mentioned in this article. I hope there was more documentation about it. I just try to make out of the examples of anything I can find. Probably a good tip is to browse the node_modules
of the @sanity
package youâre working on. Youâll find some examples there. đ
Sanity Composable Content Cloud is the headless CMS that gives you (and your team) a content backend to drive websites and applications with modern tooling. It offers a real-time editing environment for content creators thatâs easy to configure but designed to be customized with JavaScript and React when needed. With the hosted document store, you query content freely and easily integrate with any framework or data source to distribute and enrich content.
Sanity scales from weekend projects to enterprise needs and is used by companies like Puma, AT&T, Burger King, Tata, and Figma.
Here's how you can work with conditional fields in array of type object - Sanity.io.
Go to Conditional fields in Array of type Object - Sanity.ioAs we get to use GROQ more and more, it's inevitable when we get ourselves to situations where we need to construct queries dynamically. Here's how you make dynamic GROQ query in JavaScript.
Go to Dynamic GROQ Query in JavaScriptHeard of GROQ? How can it be used as an alternative to GraphQL? This article will not only introduce you to GROQ but you'll also learn to hopefully appreciate it. Truly a hidden gem out there!