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
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
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
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
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
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
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
2) Update the needed fields in a slide-out panel "Update". Don’t forget to click the
3) To delete a single record use the
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
2) Fill in all the fields you need. Click the