Skip to content

[CRUD] Allow custom form fields#4968

Merged
apedroferreira merged 12 commits intomui:masterfrom
apedroferreira:crud-custom-form-fields
May 26, 2025
Merged

[CRUD] Allow custom form fields#4968
apedroferreira merged 12 commits intomui:masterfrom
apedroferreira:crud-custom-form-fields

Conversation

@apedroferreira
Copy link
Collaborator

@apedroferreira apedroferreira commented May 21, 2025 •
edited
Loading

Closes #4837

Adds new renderFormField property to data source fields to be able to render anything as a form field. Receive arguments for value, onChange and error to connect with the form logic.

Also added slots for every field component type in the form, as well as some overall improvements around all this, such as support for the valueFormatter field property in the "Show" pages.

https://deploy-preview-4968--mui-toolpad-docs.netlify.app/toolpad/core/react-crud/#custom-form-fields
https://deploy-preview-4968--mui-toolpad-docs.netlify.app/toolpad/core/react-crud/#slots

@apedroferreira apedroferreira self-assigned this May 21, 2025
@apedroferreira apedroferreira added scope: toolpad-core Abbreviated to "core" customization: dom Component's DOM customizability, e.g. slot. component: crud labels May 21, 2025
@mui-bot
Copy link

mui-bot commented May 21, 2025 •
edited
Loading

Netlify deploy preview

https://deploy-preview-4968--mui-toolpad-docs.netlify.app/

Generated by 🚫 dangerJS against cb9c69b

@apedroferreira apedroferreira requested a review from a team May 21, 2025 14:04
@apedroferreira apedroferreira marked this pull request as ready for review May 21, 2025 14:48
bharatkashyap
bharatkashyap approved these changes May 22, 2025
View reviewed changes
Copy link
Collaborator

@bharatkashyap bharatkashyap left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great addition! Also the improvement with the slots is important, do we need to additional document it/add a demo for it?

@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label May 22, 2025
@apedroferreira
Copy link
Collaborator Author

apedroferreira commented May 22, 2025

Great addition! Also the improvement with the slots is important, do we need to additional document it/add a demo for it?

Thanks! I guess I can add a small example, at least with slotProps or so, just not demo every slot exhaustively.

@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label May 22, 2025
@apedroferreira
Copy link
Collaborator Author

apedroferreira commented May 22, 2025

Added a demo just with slotProps for the forms (I guess that replacing a whole slot would be a lot more niche) and restructured the CRUD docs page a little with the "Customization" section:

https://deploy-preview-4968--mui-toolpad-docs.netlify.app/toolpad/core/react-crud/#custom-form-fields
https://deploy-preview-4968--mui-toolpad-docs.netlify.app/toolpad/core/react-crud/#slots

@bharatkashyap
Copy link
Collaborator

bharatkashyap commented May 23, 2025

Added a demo just with slotProps for the forms (I guess that replacing a whole slot would be a lot more niche) and restructured the CRUD docs page a little with the "Customization" section:

https://deploy-preview-4968--mui-toolpad-docs.netlify.app/toolpad/core/react-crud/#custom-form-fields https://deploy-preview-4968--mui-toolpad-docs.netlify.app/toolpad/core/react-crud/#slots

Looks good! For the slot, what props would the component receive, if any? Even though it feels advanced, I think there's really great value in this feature and by not having a demo we would hamper its discoverability - so we probably need to educate users into being able to pass in their own customised form field components. Wdyt? It can be a follow up to this PR

@apedroferreira
Copy link
Collaborator Author

apedroferreira commented May 23, 2025

Added a demo just with slotProps for the forms (I guess that replacing a whole slot would be a lot more niche) and restructured the CRUD docs page a little with the "Customization" section:
https://deploy-preview-4968--mui-toolpad-docs.netlify.app/toolpad/core/react-crud/#custom-form-fields https://deploy-preview-4968--mui-toolpad-docs.netlify.app/toolpad/core/react-crud/#slots

Looks good! For the slot, what props would the component receive, if any? Even though it feels advanced, I think there's really great value in this feature and by not having a demo we would hamper its discoverability - so we probably need to educate users into being able to pass in their own customised form field components. Wdyt? It can be a follow up to this PR

The slots and slotProps there have the same properties, and there kind of is a better way to customize individual fields with renderFormField. Using a slot would be helpful to override all text fields in general to your own custom version of it, for example...
I can keep it noted to maybe document this even more extensively in a demo or so.

@apedroferreira apedroferreira merged commit 87b7e8d into mui:master May 26, 2025
15 checks passed
@apedroferreira apedroferreira deleted the crud-custom-form-fields branch May 26, 2025 14:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@bharatkashyap bharatkashyap bharatkashyap approved these changes

Assignees

@apedroferreira apedroferreira

Labels

customization: dom Component's DOM customizability, e.g. slot. scope: toolpad-core Abbreviated to "core"

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[CRUD] Allow customizing the form input fields

3 participants

@apedroferreira @mui-bot @bharatkashyap