Templates
      Back to home
      1. Betty Blocks Documentation
      2. Building your application
      3. Templates

      CRUD with slide-out panel template

      Ready-to-use data table with possibilities to create, display (read), update and delete records.

      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.