Skip to content

[CRUD] Allow custom form fields #4968

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 12 commits into from
May 26, 2025
Merged

[CRUD] Allow custom form fields #4968

merged 12 commits into from
May 26, 2025

Conversation

apedroferreira
Copy link
Member

@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
Member

@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
Member Author

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
Member Author

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
Member

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
Member Author

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
component: crud 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