custom components without React - what about native web components?

[unonweb]

Hello everybody,

I wonder if it's possible to add native custom elements (web components) to the admin ui?
That would be great for me as I'm not familiar with React (I use Google's Lit).
In the end I need to add a button that triggers some actions on the collection.

Furthermore I'd like to thank everybody who is contributing to this awesome and very customizable cms.

Regards,
unonweb

[DanRibbens]

If you have need a field on the page that isn't tied to any particular data you can use the ui field type for that. The basics are that you will need to make a react component for the admin.components.Field. You can read more in the docs: https://payloadcms.com/docs/fields/ui

Alternatively if there is some data associated with the feature you can use a checkbox or a radio option to represent the state for the users to set that value and then in your collection or field hooks add the code that you need to execute there.

Totally up to you how you want your interface/system to work!

[unonweb]

Thank you for your answer.

you can use the ui field type for that. The basics are that you will need to make a react component for the admin.components.Field

I tried to hook in a native web component and that didn't seam to work.
class MyButton extends HTMLElement throws error HTMLElement is not defined
I understand that this is a Typescript error that's thrown at compile time. I would try to get rid of it (I'm a Typescript beginner) but as I understand you it's not possible to use native web componets anyway. Right?

you can use a checkbox or a radio option to represent the state for the users to set that value and then in your collection or field hooks add the code that you need to execute there

It would totally solve my isse if there was a payload button field that I could use and customize.
A radio or checkbox is not the right ui element for what I'm looking for.