Let's create a page where you can

  • list books from database model.

  • add new books to the list.

Our book model is simple. We only have book name and its cover image.

IMPORTANT: Filed type for cover_image file is text. Because Code2 does not keep the actual file in this model field. It keeps file's ID here. The actual file is kept somewhere else.

Let's continue. We'll get back this at the end of the tutorial.

Now, let's create a data form from our book model.

(here, click on "create from model")

Now, let's create table component and connect our book model and book form.

(here, add columns from DataSource)

To connect this table to our book form we need to enable data operations:

We finished the setup to add books to our table. Let's add one record and configure how we display cover images in our table. Because avatar column is set up to display icons by default.

So, how do we display the cover image? Remember we said that Code2 saves only file's ID in the model? Here it is:

Other info such as file name and path is kept in system model called x_file. We won't get into technical details how this works in the background. We have cover image file's ID in x_book model. And we'll tell Code2 to display this cover image. That's it.

Let's click on "Cover Image" column in book table and change its avatar config:

  1. Change its type to image

  2. Click on update image and write sf2/{cover_image}

  3. Press enter

Now, our table displays the cover images too.

IMPORTANT: This is how we tell Code2 to get a file - sf2/{file_id}. In our case, we wrote sf2/{cover_image} because field cover_image contains the file ID.

That's it! In this tutorial, you learned how to

  • create a model

  • create table component

  • create a data form

  • connect data form to table component

  • upload images

  • display images in table component

Did this answer your question?