Draggable event listener for group container
I've been tasked with evaluating Windmill to build an application (lets just say 'similar' to Trello). I was wondering how I can listen for 'drag/drop' event on a group container? Or maybe I'm using the wrong type of component ...
18 Replies
The drag-n-drop is purely on the editor side of things, not the viewer
We would either have to build such a component or you would build that custom component with react
The latter is only possible with EE
Ah yes - when searching the docs I am redirected to the editor!! This was for a custom UI which uses drag and drop for our users. I thought it may require building out a custom component
So it is possible but you will definitely need a custom component for it. It would not be too complex, but you will really need a custom component for this so would recommend that your team start a free PoC with us so that you see if it's a good fit for your needs. There are no limits to the kind of custom components it supports
See template here: https://github.com/windmill-labs/windmill-custom-component-template
GitHub
GitHub - windmill-labs/windmill-custom-component-template
Contribute to windmill-labs/windmill-custom-component-template development by creating an account on GitHub.
example component: https://github.com/windmill-labs/windmill-custom-component-template/blob/main/src/component/Component.tsx
GitHub
windmill-custom-component-template/src/component/Component.tsx at m...
Contribute to windmill-labs/windmill-custom-component-template development by creating an account on GitHub.
Great thanks!
do note that the cloud is on EE so you could experiment there
Thanks
also, there is no restriction to use react, so if you have some other frameworks you'd like to use your components in, or even vanilla JS, we can provide guidance to adapt our template
Well ... actually I really prefer building web components - I realise it's not the most popular choice but it is my preference!
It will work, what windmill require is just an iife that will mount itself on a specific div
and then we inject some callbacks so you can get inputs and set outputs to interact with the rest of the app
got it
sounds great - I appreciate the help! Awesome project - I'm pushing for it at our company!
Thanks 🙏
if you can build your trello component in webcomponent, we're happy to help you into adapting it to windmill and we will open-source a template for webcomponents based on it for everyone to benefit from it
One benefit of our approach compared to iframe is that you load only the iife once so no cost to create one or many components + it's not an iframe so it's native to the dom of the app
OK great - We are still in research stage but if we progress that would be amazing. I could probably just use vanilla JS for this task but having a web component template would be awesome.
vanillajs is even easier, just use javascript to set innerContent of the div
This is exactly what we're doing with the react template:
https://github.com/windmill-labs/windmill-custom-component-template/blob/main/src/lib.tsx
GitHub
windmill-custom-component-template/src/lib.tsx at main · windmill-l...
Contribute to windmill-labs/windmill-custom-component-template development by creating an account on GitHub.
replace ReactDOM.render(...) with:
document.getElementById(props.id)!).innerContent = ...
I will prepare a template tomorrow
we've released custom components quite recently and we lack templates
great - thanks!