Storing and Displaying Data

Most apps need to store information between one visit and the next. This video will introduce you to Anvil’s Data Tables service, which lets you store data quickly and securely.

It will also show you how to display lists of data using Data Bindings and the RepeatingPanel.

In this video, we will build an online To-Do list app. Let’s get going.

Want to know more?

To learn more about Data Tables, read the Data Tables section of the Anvil reference manual.

You can also learn about making advanced queries on your Data Tables using anvil.tables.query.

Or perhaps read about Data Bindings and RepeatingPanel in the reference manual.

Next tutorial

In our next tutorial, we expand this app to support multiple users. Check it out!

Topics Covered

Data Tables | 0:28 - 1:31

We use Data Tables to store the reminders. Data Tables is an out-of-the-box option for data storage in Anvil, and it’s backed by PostgreSQL.

Our reminders are stored in a table with a Text column for the description, and a True/False column to mark which reminders are done.

For this app, we enable read/write access to our Reminders table from the client . The next tutorial describes how to precisely control Data Tables access via the server to meet security best-practice.

Displaying items as a list | 1:31 - 2:20

We want to display our reminders visually, so on our Form we need to create a list with one element per reminder. We do this using a RepeatingPanel. A RepeatingPanel repeats a UI template once for each item in a list.

We add a CheckBox to the template, which is sufficient to display each reminder.

Data Bindings | 2:20 - 3:14

Data Bindings bind a property of a component to a single Python expression. The ‘meaning’ of the property is defined in a single place, which can help prevent bugs.

We set the CheckBox’s text property to the ‘description’ column, and its checked property to the ‘done’ column.

Configuring the RepeatingPanel | 3:14 - 3:52

We make the RepeatingPanel show each item in the Reminders table:

To achieve this, we set the RepeatingPanel’s items to the list of rows from the Reminders table:

self.repeating_panel_1.items = app_tables.reminders.search()

The RepeatingPanel automatically creates an entry for each item in its items property.

Adding reminders | 3:52 - 5:22

We add a TextBox and Button to our GUI.

In the Button’s click event handler, we add a new row to the Data Table.

    new_row = app_tables.reminders.add_row(description=self.new_reminder_box.text)

Then we update the RepeatingPanel to reflect the changes in the Data Table. The display is updated automatically.

    self.repeating_panel_1.items = app_tables.reminders.search()

Deleting reminders | 5:22 - 6:42

We make each item deletable by adding a delete Link to the RepeatingPanel’s template. To make the delete happen, we add this code to the Link’s click event handler:

    self.item.delete()
    self.remove_from_parent()

Publishing | 6:42 - 6:58

We’ve tested it and it works, so it’s time to publish. We choose ‘Publish App’ in the Gear menu and copy-paste the private link. This is a random, unguessable URL that’s similar to a Google Docs sharing link.

Anvil apps can also be published at a more memorable URL, simply by clicking ‘Share via public link’.

Here’s the final app:

Try it for yourself

Build this app for yourself - Sign up and follow along, or watch more tutorials in the Anvil Learning Centre.

What next?

Next, we explore user authentication and data security in Multi-User Applications with Anvil.

You will then be able to build and publish multi-user data management apps with Anvil.

Head to the Anvil Learning Centre for more tutorials, or head to our examples page to learn how to build more complex apps in Anvil.