Event Locations Map
Last updated
Last updated
For this example we'll use the default Events app that you can generate in Buzzy using the second default prompt and add a slideshow widget to it.
Create this app using the Create New App button in the Buzzy workspace and selecting the second default prompt that starts with "Create an event planning app...". Click through the steps in the app creation wizard to generate the brief and data model, select the "dark" theme, and then wait for the screens and sample data to be generated.
After the app is created, click on "Edit app" to open the AI assisted app editor.
Firstly we need to add a new table to hold the code widget field. To do that enter this prompt:
Add a table called "Event Map" with a code widget field called "eventLocations". Set the field dimensions to 1 by 1.
You will be asked to confirm this change, click Yes and wait for the update to be completed.
The assistant should have added the table and code widget. Navigate to the Event List screen by clicking on See Events on the landing screen.
Add the code widget in it's own section on the screen which is where the map will be built:
Add a code widget section to this screen showing the eventLocations code widget from the Event Map table. Make it the first section on the screen.
To generate the map code, navigate back to the Event List screen, make sure you are in edit mode and click on the blank space at the top of the screen under the header bar. You'll see a blue selection, which is the code widget field, but it has no code in it yet. To generate the code, enter this prompt:
Generate code to show all events on a map. There should be a pin in the map for each event with the name of the event in a label next to it. Clicking on a pin should show a popup with the event image on the left and the name and address on the right, using the Nunito font for the text. Clicking on the popup should open the detail screen for an event. Make sure the map is zoomed appropriately on loading up to show all the event pins, with up to 50 shown at once. And also make sure that changes to events, or new events, show up immediately on the map, but don't pan or zoom the map when these updates occur.
Confirm the change. This will take some time to generate and when the app reloads you'll need to navigate back to the Event List screen. Switch back to preview mode to test out your new map widget. You can drag the map around, zoom with the +/- buttons, click on pins to see the event details, and click on the popup to open the event. Note that scroll to zoon was purposely disabled as to not get in the way of scrolling the screen. You could ask the AI to re-enable scroll to zoom, or to use ctrl+scroll instead.
This type of widget configuration on a separate table allows for top level table data to be summarised (as there is no parent table in this case). It also allows for the combining data from multiple tables, and to use other fields in the table as settings for the code. Multiple rows in the table could represent different maps for example, and a view component could then be used to show these maps in a list to be opened and viewed separately.
