Examples of Custom Group/Field Components?

[sleek sleet]

Any Group/Field custom component examples?

[glad ether]

Original message from @forest comet - Moved from #general message

New Community-Help Thread Created!

Help is on the way! To mark it as solved, use the /solve command. In the meantime, here are some existing threads that may help you:

Documentation:

• Radio Group Field - Custom Components
• Radio Group Field - Custom Components - Field - Server Component
• Radio Group Field - Custom Components - Field - Client Component

Community-Help:

• Lexical markdown
• I don’t think we can nest group fields in another group field.
• Is it possible to populate field with the title of a relation?
• Dynamic select field values

[molten spade]

Hey @forest comet

What are you looking for precisely? Are you trying to make a custom group field component?

[forest comet]

Hej @molten spade! Yes, exactly, I wanna make a custom group field component to make it more condensed, but I'm not sure how to render the child fields. I tried this:

"use client";

import { RenderFields } from "@payloadcms/ui";
import type { GroupFieldClientComponent } from "payload";

export const StackBlockLayout: GroupFieldClientComponent = ({
  path,
  field,
  indexPath,
  parentPath,
  parentSchemaPath,
}) => {
  return (
    <div>
      <RenderFields
        fields={field.fields}
        parentIndexPath={indexPath ?? ""}
        parentPath={parentPath ?? ""}
        parentSchemaPath={parentSchemaPath ?? ""}
        permissions={true}
        readOnly={false}
      />
    </div>
  );
};

but it doesn't get the values

[molten spade]

Aha I see, one moment

So this fails to render out the fields for you?

Can you share the config for this group field

[forest comet]

Here's without the component loaded, notice the values

With my custom component, notice it's just placeholders. If I change a value and save, then reload, it's still the placeholders

Here's the group field:

{
  name: "layout",
  type: "group",
  required: true,
  admin: {
    components: {
      Field: {
        path: "/components/StackBlockLayout#StackBlockLayout",
      },
    },
  },
  fields: [
    {
      name: "flexDirection",
      type: "select",
      options: ["row", "column"],
      defaultValue: "row",
    },
    {
      name: "gap",
      type: "select",
      options: ["none", "xs", "sm", "md", "lg", "xl"],
      defaultValue: "md",
    },
    {
      name: "align",
      type: "select",
      options: ["start", "center", "end", "stretch"],
      defaultValue: "start",
    },
  ],
},

[molten spade]

Hmm weird, can you log the fields that are being passed to render fields?

[forest comet]

{
  "fields": [
    {
      "name": "flexDirection",
      "type": "select",
      "options": [
        "row",
        "column"
      ],
      "label": "Flex Direction",
      "admin": {}
    },
    {
      "name": "gap",
      "type": "select",
      "options": [
        "none",
        "xs",
        "sm",
        "md",
        "lg",
        "xl"
      ],
      "label": "Gap",
      "admin": {}
    },
    {
      "name": "align",
      "type": "select",
      "options": [
        "start",
        "center",
        "end",
        "stretch"
      ],
      "label": "Align",
      "admin": {}
    },
  ],
  "indexPath": "1",
  "parentPath": "layout.0.layout.0",
  "parentSchemaPath": "page.layout.Section.layout.stack_level_0"
}

[molten spade]

Hmm, nothing really stands out to me as a clear reason why values are not propogating to your fields

I'm leaning towards a path issue but nothing really stands out to me

[forest comet]

I was thinking that too, do I need to construct a new parentPath?

[molten spade]

Try throwing this in there:

    schemaPathFromProps ?? (field.type === 'group' && groupHasName(field) ? field.name : path)```

Like so https://github.com/payloadcms/payload/blob/main/packages/ui/src/fields/Group/index.tsx#L117

Since your group field is named

[forest comet]

{
  "schemaPath": "page.layout.Section.layout.stack_level_0.layout",
  "schemaPathFromProps": "page.layout.Section.layout.stack_level_0.layout",
  "parentSchemaPath": "page.layout.Section.layout.stack_level_0"
}

looks better, but it didn't help

[molten spade]

Want to just log the path prop in your custom component

[forest comet]

path: "layout.0.layout.0.layout"
looks correct, the two first layout are one thing (blocks) and the last layout is a group. I should rename it

[forest comet]

I needed parentPath={path} as well. Thanks for the help!

[molten spade]

Ah awesome, glad you figured it out! My pleasure!

Thanks for coming back with the fix!