Ratings Average and Distribution

For this example we'll use the default Recipes database and review app that you can generate in Buzzy using the first 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 first default prompt that starts with "Create a recipe review app...". Click through the steps in the app creation wizard to generate the brief and data model, select the "light" 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 Recipe 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 Recipe table called "ratingsSummary". Set the field dimensions to 100% wide by 200px high.

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 Recipe table and it may have also placed it at the bottom of the Recipe Details screen. Navigate to the Recipe Details screen by clicking on Explore Recipes on the landing screen, and then clicking on one of the sample recipes.

If the ratings summary field is not already on the screen, then enter the prompt below and then navigate back to the Recipe Details screen once it completes:

Add the ratingsSummary field as the first field on the form.

If it has been added but isn't at the top of the form, then toggle to edit mode (if not already in edit mode) and select the ratings summary. Enter the prompt:

Move this field to the top of the form.

Once again, you'll need to navigate back to the Recipe Detais screen after this completes and there should be an empty ratings summary field at the top of the form.

Generate the slideshow code

To generate the slideshow code, make sure you are in edit mode and click on the blank space under the "Ratings Summary" heading. 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 a rating average and breakdown for the review ratings subtable. Use the Roboto font and make all the text black. Use stars for the visualisation. Don't insert any headings or borders, just present the rating information.

Confirm the change. This will take some time to generate and when the app reloads you'll need to navigate back to the Recipe Details screen. If you're still in edit mode, you can hold down cmd (on a Mac) or ctrl (on Windows) when you click.

Ratings summary - note that your generated widget may look different than this example

This concept of using a code widget field to summarise child table information can be applied in many situations and to many different field types. You could count the children, add up a number field across the children, count groups of children like ratings in this example, etc. This information can then be presented in many ways, from averages and counts like the ratings, to graphs, maps, etc.