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 ...

rubenf•11/14/23, 12:05 AM

The drag-n-drop is purely on the editor side of things, not the viewer

rubenf•11/14/23, 12:05 AM

We would either have to build such a component or you would build that custom component with react

rubenf•11/14/23, 12:06 AM

The latter is only possible with EE

repiOP•11/14/23, 12:07 AM

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

rubenf•11/14/23, 12:09 AM

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

rubenf•11/14/23, 12:10 AM

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.

rubenf•11/14/23, 12:10 AM

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.

repiOP•11/14/23, 12:10 AM

Great thanks!

rubenf•11/14/23, 12:10 AM

do note that the cloud is on EE so you could experiment there

repiOP•11/14/23, 12:11 AM

Thanks

rubenf•11/14/23, 12:11 AM

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

repiOP•11/14/23, 12:12 AM

Well ... actually I really prefer building web components - I realise it's not the most popular choice but it is my preference!

rubenf•11/14/23, 12:12 AM

It will work, what windmill require is just an iife that will mount itself on a specific div

rubenf•11/14/23, 12:13 AM

and then we inject some callbacks so you can get inputs and set outputs to interact with the rest of the app

repiOP•11/14/23, 12:13 AM

got it

repiOP•11/14/23, 12:13 AM

sounds great - I appreciate the help! Awesome project - I'm pushing for it at our company!

rubenf•11/14/23, 12:14 AM

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

rubenf•11/14/23, 12:16 AM

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

repiOP•11/14/23, 12:24 AM

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.

rubenf•11/14/23, 12:25 AM

vanillajs is even easier, just use javascript to set innerContent of the div

rubenf•11/14/23, 12:25 AM

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.

rubenf•11/14/23, 12:26 AM

replace ReactDOM.render(...) with:
document.getElementById(props.id)!).innerContent = ...

rubenf•11/14/23, 12:27 AM

I will prepare a template tomorrow

rubenf•11/14/23, 12:27 AM

we've released custom components quite recently and we lack templates

repiOP•11/14/23, 12:36 AM

great - thanks!