After reading this article you’ll know:

What CRUD is and how it’s applied in this particular template
How to add your existing data model to a new table and choose its properties
How to create, edit and view records using a slide-out panel

Description

The CRUD acronym stands for Create, Read, Update and Delete. Accordingly, this template is used to create, read, update and delete a set of records from a specific or chosen model. While creating a page, you can select a data model (data source) and the properties that will be displayed. View and manage them on the page or by using a slide-out panel.

Use of template

The CRUD with a slide-out template allows you to arrange your data providing easy access to sorting by property. For example, you can sort data by an id, a name, date of creation, end date, or any other properties you have added to your data model.

A slide-out panel has 3 types of views:

Detail view: see the details of each record
Create view: create a new record within a table
Update view: edit each record in a table

Main features

Create a data table and records

With this template, you can create a table of data that will be visible to the users of your website. As a data source for the table, you can use one of the existing data models and select which properties (data fields) you would like to be displayed.

After the table is created you can quickly check how it looks with the help of compiling your app with a play button.

(When selecting properties make sure that at least one editable property is selected. All properties except for Id, Created at, and Updated at are editable)

Once the table is created, you will be able to add new records by means of a slide-out panel. Fill in all the details to be shown in the table itself and in the view mode.

View data table and record details

Everyone can easily navigate through the data by sorting properties in the data table. A logged-in user can edit the table, whereas an unauthorized webuser is only able to view it.

Only the properties that were chosen to be displayed in the pre-setting will be visible within a data table. Once you click on the ⓘ icon, the details of a single record will appear in a slide-out panel. It might include a broader description, images, links, etc.

Update data table

Once the table has been created and released, it can always be updated. As a user you can update the data in the table:

Create a new record and fill its fields with new data
Update details of a single record
Delete each single record

Getting started with a CRUD with slide-out panel template

Create new page

Note: Before you start working with this template, make sure to create a model in your application. Otherwise, you will not be able to fill the table with data.

1) Once you open your application’s dashboard, go to the Pages section and choose the '+' button to add a new page.

2) The next thing you will see is the “Choose a page template" menu. Here you need to find the “CRUD with slide-out panel” template and click on the 'Use' button or 'Preview' if you want to see the interactive example of use.

3) Now fill in the name and edit the page path to your liking (use underscore instead of a dash, for example).

4) As you’ve entered a page name, you will need to configure its components. Choose the model you need to use and pick up the properties you would like to be shown within your data table by clicking '+' beside them. Mind the order of these properties, because this is the way they are going to be displayed in the data table.

Below the table, you'll see the "Create and update form". This form uses the same properties as the data table by default. Change that by removing the tick.

5) Once you remove the tick, a new table will open. There you can choose different input fields to be displayed in the "Create and update form". Follow the same principle mentioned in the previous step. Click on 'Save'.

Congratulations, your page has been created.

Update data table

1) Once you have your page compiled, you will be able to update some details. Click on the edit button on the particular record.

2) Update the needed fields in a slide-out panel "Update". Don’t forget to click the 'Update' button in the bottom right corner to save the record. Cancel it to return back to the table.

3) To delete a single record use the 'Delete' button next to edit.

4) Confirm or cancel the action in a pop-up window.

Create new record

1) Add a new record (row) to your table by clicking on the button in the top right corner of your table. By default, it is called 'New'.

2) Fill in all the fields you need. Click the save button to create a new record. Cancel to return to the table.

Model reference

Working with shortcut options

Back office template

Using a bridge model in your page builder forms

Guide to your first CRUD application