April 11, 2022
Push in production
Lines of code
Hey there 👋
We're back once,
We're back twice,
We're back until the iterator stops 🙌
Yep, that's right, last week we released an iterator action in the no-code workflows.
There is a new action in the workflows: the Iterator.
Also called a "For Loop"
This allows you to loop through an array of items and do something with every item in the list.
For example, let's say you want to let users type in cities they would like to visit and display those cities on a map.
In that case, to display the cities on the Map element in WeWeb, you would need to loop through the list of cities typed in by the user and get the coordinates from another API.
Here's one way you could do it 👇
When a user types in a city name, add it to the list.
Keep in mind that the Iterator expects an array, even if there's only one item in the array:
To get the coordinates of each city, we used the OpenCageData API because it accepts client-side requests.
Spoiler alert: you'll soon be able to make server-side requests in WeWeb as well. Stay tuned 😉
In the screenshot below, you can see:
Here, we are adding the results from action 3 to an Array variable named "coordinates":
Finally, you can add an action to stop the Iterator:
Once you've setup this workflow, you can trigger it On Page Load:
Back on the Map element, you can bind the markers to the "results" in the "coordinates" variable and bind the markers fields to the correct paths:
The reason we are binding to the "results" is because that's where the API we're using is putting the information we need (i.e. the latitude and longitude coordinates).
If you're using a different API, keep in mind you need to bind the markers to the data that stores the values for the name, latitude, and longitude fields.
Ok then, next item on the agenda this week.
It's done. You can no longer add a lookup depth to an Airtable Collection in WeWeb.
Wait wait wait, it's a good thing! Promise 🤗
The result: heavy pages that performed poorly.
The result: lighter pages that perform much better with only the relevant data loaded onto the page 🚀
Assuming you have added the Chart plugin in the "Plugins" menu, you can drag and drop a chart template on the Canvas from the "Add menu":
Now, those elements have two settings: "Guided" and "Advanced".
To use the "Advanced" mode, we recommend you read the Chart.js documentation to understand what data the library expects.
Otherwise, you can try out our brand new "Guided" mode. You will be invited to bind an array and choose what field you want as your X axis (horizontal):
Binding the Y axis (vertical) is optional. By default, it will count the number of categories on the X axis.
In the "Plugins" > "Tools" menu, you can now add the Download data as CSV plugin:
When you add this to your WeWeb project, you will unlock access to the "Download data as CSV" Action in Workflows:
The "Data" field in the "Download data as CSV" Action expects an Array of items, even if there's only one item in the list.
Ok then, that's it for now.
We'll be back (very) soon with two new exciting announcements…
Until then, have a great week! 😀