#Custom Field with dynamically rendered subfields.

35 messages · Page 1 of 1 (latest)

sweet kite
#

Hello everyone, 10+ years experienced dev new to payload and nextjs (have worked a bit with react before but never in production). We are currently evaluating payload for our agency, it still misses a couple features that we need. Nevertheless great already!

So one thing we are missing is a nested, sortable tree field. I thought to myself: if it does not exist, make it yourself. I am very close to a working custom field. I am using a JSON field to save my data.

Rendering subfields works with RenderFields works and writes into my JSON data correctly. But now comes the problem: I can't repopulate the fields again because useField({path}) cannot read from json fields. All in all this kind of makes sense to me.

Now that I am so close the end, I am sure there MUST be a way to accomplish this.:

<TextField
key={${path}.${item.getId()}.itemData.${field.name}}
field={field}
path={${path}.${item.getId()}.itemData.${field.name}}
/>

Is there no way to repopulate this with values other then the internal useField({path})? Can I somehow inject data in the datastore? I know this is probably an extreme edge-case. If you need any other info to look into it better, let me know.

And most importantly: I am very new to Payload and React, so code samples may be unoptimized and a bit wonky 🙂

idle orbitBOT
sweet kite
#

I could really use some help on this one. I am trying using the FieldContext but path cannot be overridden. I need to have easy maintanable, hierarchical fields that can be infinitely nested. changing it to a collection is no-go and will be a game breaker as building complex menus is not the only place we will need this.

image.png
thorn thorn
#

Yeah you need to "simulate" a field based on your json data

#

So, what I would do is use the "*-Input" component for the field you need from your json isntead of the actual component

#

So if you need a TextField, I'd use a TextInput

#

The input counterpart lets you set your own state

sweet kite
#

Okay, let me try. One second.

#

Lets say minute 🙂

thorn thorn
#

I'll give you up to 5

#

But after that I'm gone

#

Lol jk, take your time

sweet kite
#

lol

#

it worked

#

I was on this for, 16 hours

#

need to double check if saving works as well

#

this is insane

#

I will finish up what I have been working and check back in if I need help. It seems solved so far.

thorn thorn
#

Hahaha, glad it worked out for ya. Yeah, subtle difference between Field & Input, but it should work nicely. I've done similar patterns many times before.

sweet kite
#

but tell me, how was i supposed to know this?

#

I could find anything on the web nor via AI search

thorn thorn
#

The underlying issue is the lack of UI docs

#

This would be a non-issue with the docs for the UI package, but that's still WIP

#

The UI package can be complex, and building comprehensive docs for it is still smt the team is navigating

#

For now, for these kinds of specific use-cases, the best knowledge-base would be the other Payload experts in this discord

#

Aside from existing docs, tutorials, etc.

sweet kite
#

Yes I get that, I mean after all the system itself is still very young. And good docs is what makes it – in my opinion – approachable to devs.

thorn thorn
#

Yeah, and good docs are an ongoing battle, not something one can build once

sweet kite
#

It's just, when you come from developing on very matured systems, fighting with things like this, makes working with new software / tools extremely frustrating.

thorn thorn
#

The team tries to stay on top of it, but they do ship real fast, so it can be burdensome

#

Yep, absolutely. This is the nature of new technology though

sweet kite
#

But I guess my missing knowledge about react adds on to the frustration 😅

thorn thorn
#

Hahaha, definitely helps if you're comfy with React!

sweet kite
#

thanks anyways, I think I will figure things out, just have to mirror the changes to the actual tree data and then it's basically done.

idle orbitBOT