Image Galley Slideshow
For this example we'll use the default Movie database app that you can generate in Buzzy using the third 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 third default prompt that starts with "Create a simple movie repository app...". Click through the steps in the app creation wizard to generate the brief and data model, select the "mint" 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.
Add the code widget field to the Movie table
Firstly we need to add a code widget field to the Movie table. To do that enter this prompt:
Add a code widget field to the Movie table called "slideshow".
You will be asked to confirm this change, click Yes and wait for the update to be completed.
The assistant should have added the code widget to Movie table and may also have placed it at the bottom of the Movie Details screen. Navigate to the Movie Details screen by clicking on Get Started on the landing screen, and then clicking on one of the sample movies.
If the slideshow field is not on the form, enter the prompt below and then navigate back to the Movie Details screen once it completes:
Add the slideshow field as the last field on the form.
Generate the slideshow code
To generate the slideshow code, switch to edit mode in the editor (using the mode toggle at the top of the screen) and then click on the blank space under the "slideshow" heading. You'll see a large blue selection, this is the code widget, but it has no code in it yet.
To generate the code, enter this prompt:
Generate code to show the images from the image stills field as a slideshow, complete with back and forward navigation, and navigation to each image directly through a row of thumbnails at the bottom. Use the Poppins font for any text and all icons and text should be white. The slides should fill be 100% width, and there should be no padding or margins around the slideshow. Leave some space at the bottom for the thumbnail strip and make sure it is centered vertically and horizontally in that space.
Confirm the change. This will take some time to generate and when the app reloads you'll need to navigate back to the Movie Details screen. If you're still in edit mode, you can hold down cmd (on a Mac) or ctrl (on Windows) when you click.
Scroll to the bottom of the screen and you should see a slideshow of the movie image gallery. If you are not already in preview mode, switch to preview to test out your new slideshow widget.
Other steps you may want to do now are to remove the image gallery field, hide the heading above the slideshow, move the slideshow to a different location on the form, etc. These can all be performed using the assistant by selecting the appropriate parts of the screen and asking the assistant to make the changes.
The last step you may want to do is remove the image gallery field that is no longer necessary. Switch to edit mode again, select the image gallery field, and enter the prompt:
Remove this field from the screen
This will also take some time to complete, and you'll need to navigate back to the Move Details screen again to see the result.
This concept of using a code widget field to build a custom display can be applied to any field type, and can be used to combined multiple field into a single display widget.
Last updated
