Guide to your first CRUD application

Create and configure a basic 'create, read, update, and delete' application.

After reading this article you’ll know how to:

• Build your first basic CRUD application

• Create and manage users

• Configure roles & permissions

• Test and finalize your application

Building applications on Betty Blocks doesn't require extensive knowledge of coding. As a builder, you just have to understand the desired outcome and what an average application consists of.

When you first enter the platform environment, you may grapple with questions such as: Where do I begin? What should be the sequence of building? How can I ensure an efficient and user-friendly implementation? How do I ensure the app's security?

While Betty Blocks is mostly user-friendly, transitioning from one stage to the next may sometimes require assistance. No worries, we've got you covered! This article will illustrate a universal approach to building from scratch. We'll progress step-by-step from the fundamental internal authentication functionality (which is readily available) to front-end pages with role-based access control.

What are we building?

What we are going to build here is a small Employee management solution as an example. This application will include the following items:

• Employee model with essential properties such as Full name, Department, Profile image, etc. This model will serve as the foundation for storing and managing employee information within our application.

• Internal authentication system to add and manage users. The new authentication setup is straightforward to set up as it is pre-configured. In such a use case as this, you can leave the default Betty Blocks account for each page we are about to create.

• Admin - Employees interface created via the Back office template. This page will provide the admin with the capability to manage employees efficiently, including adding, updating, and deleting employee records

• Employee overview page, based on the Overview, card and list view template, where admin and user can view the details of added employees

• Home page with navigation (based on the Home page, inspirational template)

• Roles and permissions:

  • Admin user by default of the template. This role has all the access to add new employees, manage users, or assign roles

  • User role with access to viewing and editing the employee data

  • Visitors can register from My Betty Blocks (via email) and they won’t see any other data

Getting started

Let’s start by creating a new application in My Betty Blocks from your organization's environment. Choose the ‘Start from scratch’ option and fill in the name for your application.

After creating the application, open it from the same overview, and get started.

Data model

You can start building your application by creating the front-end parts (pages), models, authentication profiles, etc. Here we chose to start with creating a new model. Go to the data model and create a new one with several properties. In our example, we’ve created the Employee model with the added properties: Full name, Department, Email, Introduction, Password, Position, and Profile image.

Building pages

It's time to look into what the page builder has to offer. By default, you’ll have:

• Admin pages (Admin - Roles & Admin - User management) that can be used to manage application users and assign roles from the front end (compiled pages)

• Error pages that will be used to display lack of access (403), missing page (404), and internal server error (500).

Admin - Employee

Let’s create a new page based on the back office template. It will contain an overview of all company employees that the user/admin would be able to manage. Go to Pages > New > Back office template.

Our back office is based on the Employee model and has all the properties we’ve added.

This page enables us to create, update, and delete employees. The corresponding actions and the Back office template will be added to your application. Each action has its flow and permissions which you can update if necessary.

Check this video if you want to know how to create these actions yourself:

Employee overview and home page

Add some more pages using templates. The first is the Employee overview page based on the Card and list view template.

Go to Pages > New > Overview, card and list view. It is configured like any other page template. Choose the model and corresponding properties and see in the preview how they would look on the overview page:

Now we will create a home page using the Home page, inspirational template. This is the only public page in this application that will direct an admin/user in the right direction. Go to Pages > New > Home page, inspirational template. Follow the configuration steps.

The home page will be publicly accessible, so we won’t choose any authentication profile for it. To tackle this, set the type of the page to public before pressing Save. You can also do the same after creating the page, by reaching the page settings tab.

After all pages have been created, you have practically endless possibilities to stylize and edit your front end. We won’t go into detail about designing pages and UI/UX best practices here. Instead, you can dive into those on your own:

• Setting up your page explains the use of the most common components needed to build the front end of your application’s page

• With the Navigation on your pages, you can dive into organizing a proper website journey for users

• Working with the navigation bar & Creating and using partials will help to figure out how to deal with partials - navigation bars/sidebars in our case

• Styling best practices & Using the theme builder articles are going to help you keep the app design consistent and stylish

Note: If you want your users to be redirected to an external page to register their Betty Blocks account, use the open page button component which has this option:

Application management

After you’ve set up the application’s pages to your liking, we can proceed to the management part of the workflow. In this section, we are going to add some new users, add and assign roles, and make sure the permissions are configured properly.

Adding new users

The first user by default is a builder with all possible permissions. It means you can add new users, and select roles for them, as well as view and edit all pages, models, etc.

Add new users to your application through the Users management tab in My Betty Blocks. Go to Account > My Betty Blocks > Users management. Invitation flow is executed via the email address. By default, the newly invited will be users, but once you change them to low-code developers, business technologists, or citizen developers, they will become builders too.

Note: Mentioned above works if you are the admin on the organization level. If that is not the case, then you can be invited by someone with this permission. More about different levels of roles and permissions is here.

Roles & permissions

Let’s proceed to add new roles to our application. Go to Tools > Roles and permissions. You’ll see two roles by default: admin and public. Add another role (e.g. ‘user’) by pressing the Add button.

Leave all the permissions to admins, but block all of them for the public as our application is only for internal use and all website visitors will first need to register their Betty Blocks accounts and then be invited to the application to use its functionality. As the user role is intended to view employees only, tick Employee model access for it.

To manage permissions for actions, go to Actions > Back office - create employee > Settings, choose the configuration that suits your requirements, and don’t forget to choose Betty Blocks account as an authentication profile

Note: Repeat the same process for the Back office - update employee and Back office - delete employee actions if you want to restrict the user role from editing and deleting data within the Employee model.

Wrapping up

All basic configurations are done, and we need to test if the application is working according to how it was planned. Let’s compile our last edited page, and check out some of the flows we’ve created.

• Admin flow. As an administrator, one can access all the features of the application. Pressing the Admin space button will lead them to

Note: As an admin, you can also edit and assign roles from the User management and Roles pages.

• User flow. As a user, one will be able to access only the features connected to viewing, editing, and deleting the Employee model data

• Public visitor flow. The home page is accessible publicly (as well as for any role, of course), but visitors will only be able to register their accounts by pressing the Register account button.

This is how you can begin creating a basic CRUD application using Betty Blocks. While achieving smoother functionality may require additional time and more advanced platform expertise, we have you supported. Use all the no-code might to your advantage and dive into the world of fast and adaptable app-building. Good luck!