Making use of the dropzone in your weweb components

In this article I'll explain how to make use of the dropzone when building an app on the nocode/lowcode weweb.io platform.

Dropzone?

Just to get this clear, the name might suggest that it has to do with file uploads but in this context it is not!

A dropzone will enable you to make the components you create in weweb even more versatile and dynamic. Since by integrating a dropzone into a component it still allows you to add additional items to the component when implementing it in your app, so on the instance of the component (this will get clear in the use case and example). See it as a placeholder you can populate when making use of your component. All to make sure we do not have to repeat our selves by creating a lot of similar items/components.

If you are not familiar with components make sure to check the documentation on those since we will extend on that topic (components, component variables and component workflows are important concepts to have a grip on before starting with this article).

The use case

Let say we have to implement these 3 contact forms on our app.

Form A consists of a name/email and message (so used as a contact form).

Form B consists of a *name/email a department selector and message *(for contacting a specific department)

And form C consists of a name/email a product name and serial number (for a contact relating to a specific product)

All forms need to expose the form data as a json object. Since that will be used down the line.

You can see there is a lot of overlap between the forms.

They all have name/email/message and the submit button (highlighted in yellow).

Instead of creating 3 different forms we can simply create a single form component containing the mutual items.

And extend the instances of the component if necessary with additional items (in this case extra form inputs).

Ground work

Lets first setup the form component with a variable. The goal of the form is that it will expose the form fields as an object.

{
"name": "Tim",
"email": "[e-mail]",
"message": "<p>drop it like it's hot</p>"
}

When implementing the form component we can then send the exposed data to the workflow/service we wish.

A simple contact form containing the 3 inputs (the inputs have been given a name, so it is easy to keep track when we are binding afterwards).

Now we have to make sure that the component exposes the data. By adding a variable to the component called "data_to_submit" of type object (since this will contain several values) and we will be exposing this outside the component so we can handle the data when the form is in use.

The variable setup should look like this

Next we need to populate the variable with the values of the inputs.

Adding a workflow on each input (so the name, email and message input)

We want to set the value of a property **of the exposed data to the value of the corresponding input**.

So that we end up with this result

{
"name": "Tim",
"email": "[e-mail]",
"message": "<p>drop it like it's hot</p>"
}

The workflow will trigger on change and it will c*hange the data_to_submit variable*.

But it will only partially change it (when triggered on change of the** name input** it should only change the name property, when triggered on email only the email property,...)

Select the data_to_submit variable, chose to partial update and set the path to the corresponding property you wish to update (name for name, email for email,...)

Finally we can bind it to the input values by selecting the correct form field component variable (aka the name of the input followed by value).

Now we have a working form component that exposes data containing all the form input values!

Component workflow

Of course we need to make sure items added in the dropzone can call a workflow on the form component. So define the following.

The workflow needs 2 parameters (that will be populated from items in the dropzone). The key and value of the property on the data_to_submit we want to fill.

So add those 2.

With those in place we can setup the rest of the workflow.

Allow execution from outside and from a dropzone. To make sure the workflow is accessible.

Binding the path the the key param **and the **value to the value param created earlier.

Hello dropzone

Just add it in the place where you want to be able to add additional form fields when using the form component.

Connecting the dots

Now we are able to execute the workflow on the form component from items inside the dropzone.

Not in the component editor but in your instance of the component you can add extra items into the dropzone.

You can see that the dropzone is visible with a dotted line.

And you can just add what you want, making the component a lot more flexible and dynamic!

I'll add a new field with the name field_from_instance and will execute the component workflow on change of the value.

For the key param I just set something static but for the value I bind it to the event value. (so since this is triggered on change of an input the event value will be the value of the input).

If you now check the variables in the debugger you will notice that the data_to_submit will also update with the data from the dropped in input.

Of course** keys need to be unique**. So a unique key per input.

And that is it, a base contact form component that features a dropzone to allow further customisation when using the component in your app.