Custom component interface documentation
Hi 👋
Can you please explain this interface and how app/component interact with each other?
https://github.com/windmill-labs/windmill-custom-component-template/blob/553d10449adec81086765efc26d362548b45a011/src/global.d.ts
After reviewing the code, I understand there's a data exchange mechanism between the app and the component. However, it's unclear how to define component actions for use within the editor. Additionally, guidance on setting up events emitted by the component, which the editor can respond to, would be helpful.
Thank you for your hard work 🙏
GitHub
windmill-custom-component-template/src/global.d.ts at 553d10449adec...
Contribute to windmill-labs/windmill-custom-component-template development by creating an account on GitHub.
9 Replies
The easiest way to understand how it works is to look at the Component example: https://github.com/windmill-labs/windmill-custom-component-template/blob/553d10449adec81086765efc26d362548b45a011/src/component/Component.tsx#L24
GitHub
windmill-custom-component-template/src/component/Component.tsx at 5...
Contribute to windmill-labs/windmill-custom-component-template development by creating an account on GitHub.
It's a way to get access in your react component to the callback called when the inputs or render state change
Thanks @rubenf
I saw that and I understand how the state is exchanged. To clarify my earlier question: I need guidance on defining 'Event handlers' and 'Controls' (names from the editor) for the custom component. Could you provide some instructions or examples for these?
For now, the best would be to register the controls as global functions in the dom. To avoid ambiguity, they should be passed with an id but i'm not sure we actually pass the ID to the custom component. But we could fix that
So I need to update the repo/template with an example of how to do this
how urgent is it that the custom component support those controls?
@rubenf I'm currently evaluating the platform and noticed that the existing components don't fully meet my needs, which means I might have to use custom components. I appreciate your commitment to adding 'Controls'. Could you also provide information on 'Event Handler' support, similar to what's available in native components like 'Button' or 'Submit Form'? I would really need these functions for my custom components.
I think there is some confusion about "Event handlers". This is just the name that we give to the Runnable that the button will run on click (which is why you can select an inline or workspace script)
You would very likely not create a custom component backed by a runnable directly. For the Controls however, we could provide a template for how to add custom controls to the app by binding to the global context some functions
You would very likely not create a custom component backed by a runnable directlyWhy not? I need a stateful custom 'Button' and I want it to have the 'Event handler' similar to the native 'Button' component
For us to enable this, we would need to improve by a lot the custom component support
I believe that offering comprehensive support for custom components could significantly enhance the value of your product. By allowing users to add custom components to your Hub, you open up possibilities for contributions from users like myself, who are eager to share their creations 🙂