Issues with array field and reference type in navMenu schema
5 replies
Last updated: Jun 11, 2023
J
The closest I've gotten is by passing an empty span, but that looks horrible. The media's html element in the preview list container has a fixed height and width. I would expect that if I specifically pass null or false to the media property, that it would hide it altogether.
Jun 11, 2023, 12:35 AM
J
UPDATE: solved, but not sure if this is the best way
Okay, I've got another related issue: The screenshot above is of my navMenu schema. I've set up a field of type
If I do it like this:
the result is like this:
Okay, I've got another related issue: The screenshot above is of my navMenu schema. I've set up a field of type
arrayand it can take custom objects such as
menuItem, but it can also take a
referencetype to itself,
navMenu, so that I can have sub menus. My issue is I'm not getting the expected data in the list previews. What's odd to me (because I'm still learning Sanity) is that the correct icon will show up for the
referencetype, but for everything else I'm getting
undefined. I'm probably doing something wrong.
If I do it like this:
defineField({
name: "items",
title: "Menu Items", // e.g. 'Categories', 'Sale'
type: "array",
of: [
{ type: "menuItemWithIcon" }, // e.g. 'New Arrivals', 'Tops', etc.
{ type: "menuItemWithImage" },
{ type: "reference", to: [{ type: "navMenu" }] },
],
validation: (Rule) => [Rule.min(1), Rule.unique()],
}),Jun 11, 2023, 1:14 PM
J
As you can see, the validation is working, as are the titles, but I want to use a different icon to better represent a submenu item.
Jun 11, 2023, 1:16 PM
J
So I resorted to something I did in another schema, but feels hacky:
and the result I get with this spaghetti code is:
defineField({
// doing this so I can alter the appearance of the menuItem in the dropdown, but I lose the ability to reference the data in the preview
name: 'submenu',
title: 'Sub Menu',
type: 'object',
icon: BsListNested,
preview: {
select: {
// NOT SURE WHAT TO SELECT HERE??
title: 'navMenu',
},
prepare({ title }) {
console.log('title', title);
return {
title: title,
media: BsListNested,
};
},
},
fields: [
defineField({
name: 'submenuReference',
type: 'reference',
to: [{ type: 'navMenu' }],
}),
],
}),Jun 11, 2023, 1:20 PM
J
I don't know what to select in the preview object. Everything I try comes back as
undefined.
Jun 11, 2023, 1:36 PM
J
Golly bum! I know I tried this
title: 'submenuReference.title'and was still getting
undefined, but now it's working as expected. However, do I really have to define an inline object like that to achieve the desired result or is there a more concise way?
Jun 11, 2023, 1:46 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.