In part one of this two-part tutorial we will cover the following: 

  • Build 3 data models and add properties from scratch

  • Build a user interface in the backoffice to manage the data inside of our application

In order to better help you there is a video at the end of this article that demonstrates every step in this tutorial.

Step 1: Build up the Datamodel to store data in

  • Open up the Datamodel section from your Builder Bar. The platform automatically creates a Role table, and also a User table. You should see something like this:

We are going to create 3 new data models: Expense, Report, and Employee

  • Create a new data model by pressing the New button in the upper left corner of the screen  

Before we add properties (or columns) to our newly created data models we are going to define the relationships  

Note: The reason why we are defining the relationships first for this applications is because the properties we will create in the next steps are associated with the parent / child records 

Let’s create our first relationship for Employee

  • In order to do this you’ll need to hover with your cursor over the Employee datamodel. When you do this you’ll see an arrow appear. Grab the arrow with your cursor and drag it over to the Report datamodel and release it once you’re hovering over the Report datamodel

  • They’ll be a popup screen that will appear that asks you to choose the relationship type 

  • Since an employee will have many reports this will be a one-to-many relationship. Read the 3 options and choose the option the reflects the one-to-many relationship described above 

Note: Records and objects are the same thing in BettyBlocks. From here on out I will intermittently use records or objects to describe records in a datamodel 

  • After pressing save the new relationship is now defined. 

Note: Some of you who have a database background will ask where is the foreign key defined. In Betty Blocks, developers don’t interact with foreign keys. This is automatically configured in the background. This may be difficult in the beginning to comprehend but try and not think about foreign keys.  

Now create another relationship between the report and expense datamodel. One report will have many expenses. 

Note: Technically we could create a third relationship between the expense and employee datamodel however this is unnecessary because the expense datamodel is already connect to the employee datamodel through the report datamodel.

Let’s now add some properties to the datamodels 

  • Click on the Employee datamodel and on the right hand side you’ll see Properties. You can either click on the Properties box and then click the new button that appears on the top in the view or you can click the plus button to the right of properties. 

Since this is the first datamodel we are creating we will go a little bit more into detail on how to accomplish things in Betty Blocks. After we create this datamodel, please refer to these steps for creating the next datamodels. 

We will create the following properties for employee: 

first_name, last_name, full_name, email, phone_number 

  • For first_name , last_name, and phone_number  make it type = Text (single line). For email  make it type = Email Address

Shortcut: In order to “Save and Create Another Property” in this screen simply hold shift and press enter at the same time. This action will save the property and go to the create new property screen

  • For full_name  make type = Text expression (single line) 

A text expression is a calculated field that gets calculated in real time whenever the object is initiated (accessed) by the user. In order to learn more about expressions read this article

For full_name  we will simply concatenate the first_name  plus a space plus the last_name .

In order to build this expression we will insert some values into the expression box.

  • Notice the Insert variables button at the bottom of the expression box. Click on that button and now a new popup screen will appear. Click on record in the Property subsection of this window. 

By clicking on property we are able to select other properties that are associated with this record

  • Select First Name and then press select in the bottom right corner of the popup screen. Once you do this the window closes and now you see var:record.first_name  in the expression box. 

  • Now we must add a space because there must be a space between the first_name  and last_name . We do this by adding a plus sign and two quotations with a space between the quotes. 

  • Now we must add the last_name  to this expression by repeating the same steps above. 

The final expression should look like this:

Note: Creating an expression is more simple then as described above however we went through step by step just incase this concept is new for some users.

Lastly we will create two properties called total_reports  and total_expenses . Both properties will be used to count the child objects that are associated with the employee object.

  • When creating total_reports  choose type Count. Notice there is an option called Collection. 

Note: A collection is defined in Betty Blocks as a group of one or more objects. Similar to arrays in other programming languages. 

  • When you click the collection button a new popup screen appears with all the properties listed on the left. Select Report  and then press Select in the bottom right. The value of this property will now be equal to the number of report objects that are associated with the employee 

For total_expenses  property repeat the same steps above however this time select Report  and then select Expense

  • Press Select in the bottom right. The value of this property will now be equal to the total number of expenses that are associated with all the reports that are associated with a particular employee. 

Example: If John Doe has 3 reports and each report has 5 expenses then total_expenses would be 15 for John Doe, and total_reports will be equal to 3. 

We are now done with the employee datamodel.

We will now add properties to the expense  datamodel
description (text single line), receipt (file), date (date), price (price)  

The value in the parentheses is the property type. Configure each property setting how you deem necessary.

We will now add properties to the report  datamodel
name (text single line), items (count), start_date (date), end_date (date), total (price expression) 

  • For items select the expense collections (has many) 

  • For the total  property we will create a price expression using the expressions: sum() 

You can read more on the different types of expressions in this article

  • The expression will be: sum(var:record.expenses.price) 

The value of this expression will be equal to the sum of all the expenses that are associated with the report object. This value is calculated whenever we access the record. So one day it might $5 and the next day it might be $10.  

Note: The type Sum in the property type (under type) is not the same as the sum() expression (under price expression) 

Step 2: Build a few views in the back office 

The backoffice is a great way to manage the data inside of our data models. All aspects of a typical expense management application can be configured here in the back office such as:

  • CRUD operations of records: Employees, Reports, Expenses

  • Setting permissions on who can see which data 

  • Creating workflows 

  • To learn more about how to use the back office read this article

For this tutorial we use the back office as an administrative portal. The users of our application will interact with the data via front-end web pages.

In order to get to the backoffice access the builder bar on the left and click the UI Builder. Make sure you're in the backoffice module and not the web.

Create Three Grids
Let's start by creating 3 grids for the 3 different data models we created in step one: Employee, Report, and Expense.

In order to do this you must be in builder mode. You can toggle builder mode on/off by simply pressing “E” on your keyboard. You can confirm you're in buildermode by seeing a yellow bar near the top of your screen. 

Note: Buildermode is how we construct how are grid, views, forms, and pages look inside of the backoffice. Only users who have the role of developer are able to enable builder mode.

  • In order to create a new grid press the “Add grid” button      

  • When the prompt window comes up give it a name based upon the datamodel you are selecting. All of the other options you can leave to their default settings

  • Repeat this process for all three data models 

Now that you have three views set up you’ll probably notice that the order of the columns of layout are not configured in a meaningful way. You can reorder / change / delete these columns by simply clicking the gear box next to the name

Important: You must be in builder mode in order to edit any of the columns. All changes are saved automatically. There is no save button to press. If you see a prompt come up that states you will lose unsaved changes it’s referring to the creation of the record and not the configuring of the layout.

Note: When you delete columns from this view you are not deleting the columns from the actual data model. The only way to delete properties in a data model is to do it in the datamodel section of Betty Blocks.

Once you’ve configure the order of your columns, while still in buildermode, press the new button in the upper left hand portion of the screen. It doesn’t matter which view you’re in because you’ll end up repeating these steps for all three views 

  • Notice how a form now slides in from the right side of the screen. We now will configure the fields and layout of the from

Once again, you’ll notice the order of the different input boxes is not in a meaningful way. Reorder the input properties in a way that makes sense to you. In a more advanced tutorial we’ll get into how to further customize the forms appearance.

On the report  and expense  form you’ll notice a single column used to identify the parent object. For expense form it will be called “Report” and in the report form it will be called “Employee”. These fields are used on how our user associates the child object with the parent object. 

BettyBlocks will choose a default field that it thinks is unique. It’s usually something like email , name , or id

We can change this value by clicking the gear box next to the input field. Notice a new window pops up called “Edit component”

Here there are many things settings we can modify but for now we are just going to focus in on two. 

  • The first is “Kind”. This can either by auto complete or select. Auto complete will allow the user search for the parent record by typing in the text box and having suggestions appear. Select will allow for the user to see a dropdown menu off all of the possible parent records and be able to select it that way.

  • The second option is “Path”. Path allows us to change the field of the parent object that the user is searching for. This can be any field you would like it to be. 

Note: For database developers, This is the closest feature to a foreign key Betty Blocks offers. By modifying this field you are not changing any underlying database foreign key. You are just changing the way the user interacts with the form. 

Once you’ve configured you’re 3 views columns and forms you’ll want to exit builder mode (press E) and start adding data to your data models.

  • First add a few employees in the Employee view. This can be done by simply pressing the new button and adding the values of each field 

Note: In order to quickly add employees press “Shift + Enter” to save and add a new record

  • Now that we have a few employees let’s quickly create some reports and associate them with our employees. 

  • Finally add a number of expenses for each report. You don’t have to add a lot, just enough to see that our data models and forms are set up properly. 

Optional Views

In a different tutorial we’ll get into more complex functionality of the backoffice but for now let’s do one extra thing. Add a subview to the employee view. You can do this by going back into builder mode and clicking the “Add subview” when viewing or creating an employee record.                            

A subview is a way of seeing data that is associated with that record. So for employee a subview will be the reports that belong to that employee. Now we can see a single view of all reports belonging to Employee A from within the same view. 

  • You can then add a subview for reports and show all of the expenses belonging to that report

We are now done with the first part of this tutorial. In the next part we’ll set up our web pages where employees can securely login and view reports and expenses that are associated with them.

Did this answer your question?