Hellooooo there 👋
It's the first time we're writing to you in June 😱
All three are big projects that are taking a bit of time buuuuut... are just around the corner 😉
We'll keep you posted!
In the meantime, we released one new data source (SOAP APIs), one new tracking extension (Segment) and seven new elements we're pretty sure you'll enjoy:
Let's show you how these work.
You can now use SOAP endpoints to create Collections in WeWeb.
You'll find the SOAP Plugin in the Plugins > Data sources menu:
Once you've added the Plugin, you'll be able to add a Collection:
⚠️ Note that the SOAP Plugin is still in Alpha. Please don't hesitate to reach out if anything is unclear or doesn't seem to work as expected! ️⚠️
Now, onto the new Elements in the toolkit! 😀
At times, your app will be waiting for data from your backend to display in the user interface.
When that happens, it is a best practice to display a loader on the page.
This lets the user know that nothing is broken, they just need to wait a second for the data.
There are two steps to do this in WeWeb:
1- add an Loader Element where you want it on the page
2- bind the display of the Loader and the Element you want to hide to a Variable
You can find the Loader Element in the Add > Add elements menu:
Once you have dragged and dropped the Element on the page, you can choose the type of Loader you would like and style it like you would any other Element:
You will need to bind the display of at least two items on your page:
How you bind the display property of these Elements depends on your use case.
The most common use case: you want to display a Loader while you are fetching the data from a Collection.
If the display depends on a Collection being fetched, bind the Loader Element to the isFetching Variable of that Collection:
You will then do something similar on the container with the Elements you want to hide while the data is being fetched.
Except in this case, you will bind it to the opposite of the isFetching variable by using the not no-code formula:
What we are saying is that:
Another use case: you want to display content at the end of a Workflow.
This can be very helpful when you have a Workflow with a For Loop iterator that takes a bit of time for example.
If you need to display a loader while a Workflow is in progress, you'll need to create a Variable that is a Boolean, i.e. a Variable that returns true or false:
In the example above, we called our Variable workflowInProgress and set it as false by default because, by default, Workflows are inactive. They are triggered by an event.
Then, you can add a display and hide action where you change the workflowInProgress Variable at the beginning and end of your Workflow.
Since it's a Boolean Variable with a default value of false, you could use the not no-code Formula as shown below:
Once that's setup, you can bind the display properties of the Elements you want to show or hide to that Variable 🙂
You'll notice we grouped the Variables related to conditional display in one folder. This helps us debug issues related to conditional display in our app but feel free to organize things differently on your side. Whatever works for you 🙂
Ok, on to another cool Element we released recently: the Calendar Element.
You'll find this in the Add > Add elements menu:
Once you've dragged and dropped it on the page, you'll be able to:
In WeWeb, you have three new date picker Elements:
Some things you can do with the new Date Picker Elements:
In the Add menu, you can now find two Progress bar Elements:
Both Elements are pretty intuitive.
In the example below, you can see a few design options for the donut Progress bar and how to bind the value and text of the Element to reflect the progress made:
That's it for now, we hope you have fun with these new features!
A quick reminder of what's just around the corner:
Need us to prioritize a new feature?
Suggest or upvote items on the WeWeb public roadmap.