13

The Back Office

In this chapter, we’ll talk about the Back Office of Betty Blocks. It’s very specific to the Betty Blocks platform, and it has a different URL than all the other parts of the Betty Blocks platform that we’ve seen before now. What is the Back Office exactly?

The Back Office is a simple create, read, update, and delete (CRUD) interface that allows you to interact with your data very easily in your data model. You can also view this as the administrator environment. In the previous chapter, we talked about data models but had no way to see the data inside them or add any data to our models.

That’s where the Back Office comes in. Of course, the platform also has the page builder, which allows you to do the same things as the Back Office and can be made more customer-facing. But the Back Office does these things faster, albeit with some limitations. By limitations, I mean that the way the Back Office looks is always the same. You have control over which models you want to add and in which order you would like to show your data and your properties, but you can’t make any changes to this layout. This allows you to set this up very quickly, and you have full control over the data but much less control over the way your pages look. But, for that, we have the page builder.

We’ll go over the following topics in this chapter:

• Adding your first model to the Back Office
• Adding a subview to your view

The topics covered in this chapter will help you understand how to use the Back Office and what it can offer you while building your application. Let’s get started.

Adding your first model to the Back Office

We’ll see an overview of the Back Office in this section, then we’ll start making some changes to the Back Office ourselves by adding a new view and a subview to it.

Exploring the Back Office

In this section, we’ll explore the Back Office. I’ll show you where to find it and what it is used for primarily.

So, where can you find the Back Office on the platform? In the builder bar, on the left, it’s the fourth icon from the top (see Figure 13.1):

Figure 13.1 – The Back Office icon in the builder bar

Click on the Back Office icon and it should take you to the Back Office. As you might notice, it opens a second tab in your browser and loads the Back Office in a different environment. The Back Office is one of the first parts that was built for the platform and is still in the platform’s Classic interface, which loads from a different URL. But no worries, everything that you’ve done in the new interface is also available here. Most features are being transferred to the new interface, but the Back Office hasn’t been transferred yet. That’s why we’ll use it in this interface. Your screen should look like Figure 13.2:

Figure 13.2 – The Back Office

Now that we are in the Back Office, let’s have a look around there. When you entered the Back Office, you landed on Manual, which by default is empty. We won’t use this Manual option, but it’s something that you could use to inform your users about the setup of your Back Office, for example.

We’ll discuss later how to edit Manual. If you click on Settings, two more options should appear. These options here are called views. A view represents a model that can show you the data inside the model from your data model. Let’s click on Users. As you might have noticed in the data model earlier, there were models called Users and Roles, which are present here too. These are default models that come with any new application and are also present in the Back Office by default. If you click on the Users view, you’ll see that the right part (the grid) of the screen changes. It should look like Figure 13.3:

Figure 13.3 – The Users view

The top part of the grid shows you the headers of all the columns of your grid. You’ll see there, for example, Name and E-mail address. This grid shows you all the users of your application. These users are your builder users, so they have access to the part of Betty Blocks where you can build applications. Of course, these users can also be used for your frontend, but we’ll get into that in the page builder chapter. Click on the first row of the grid, where it says your name and/or email address. This should open up the details of this record in a sliding pane on the right side of the screen (see Figure 13.4).

A record is a single entry in your database. This means that every time you input a new customer in your database, for example, you get a new record.

Figure 13.4 – The sliding pane opened after clicking on the record

Here, you can see the details of your record. At the top, you can also see a button for editing these details. The Back Office allows you to easily access all your data like this and make changes to it. So, let’s have a look at the most important feature of the Back Office, which is being able to add your own models to the Back Office, so you can add data to your models from the Back Office. Then, we’ll also learn step by step how you can use the rest of the Back Office.

Making changes to the Back Office

In order to make changes to the Back Office, we need to turn on Builder Mode. This can be done in two ways. You can click on the slider in the top-left corner with the wrench inside the slider, or you can press the E button on your keyboard. Both of these options also turn off Builder Mode. When using the E button, one thing is important: ensure you are not currently in any field where you can type. If you are, this won’t trigger Builder Mode. Once you’ve activated Builder Mode, you should see a yellow bar at the top of your screen saying BUILDERMODE (PRESS ‘E’ TO EXIT), as shown in Figure 13.5:

Figure 13.5 – Builder mode activated

In the menu on the left-hand side, you’ll see three options:

• Add grid
• Add page
• Add dashboard

We’ll only focus on the first one. For the other two options, there are better ways of doing that now, so we’ll skip those in this book. We would like to add our new grid to our desktop. So, let’s click on DESKTOP in our menu, then click on the Add grid button (see Figure 13.6):

Figure 13.6 – Add grid in the DESKTOP section

Once you’ve clicked on the Add grid button, a dialog should open, as shown in Figure 13.7:

Figure 13.7 – The Add grid dialog

In this dialog, we can select a model and transform it into a grid or view. If you open up the model selector, you should see all the models that you’ve created. In this case, we’ll start by choosing the Customer model. As you can see, the name automatically changes to the model’s name as well. If you’ve used an English name, it should plurify the name automatically as well, in our case, to Customers.

The Section field is the section where the grid/view will appear, in the Back Office (Figure 13.8, for example). We’ll leave that desktop for now. The Role option is used for setting the permissions for this grid/view so that only users with that specific role can access the view. For our example, we’ll leave this option set to admin. The next field is called Use and it’s empty by default. The name of the option might be a bit strange, but this is the template for your grid/view. Once you’ve set up your first grid/view, you can reuse that grid/view again in another one with the same model, but with different permissions. So, we’ll leave this option set to New.

The filtering options can help you to set some default filter options for this grid/view. Right now, we don’t need that, so we’ll leave all of those fields empty. We’ll talk about filtering at the end of this chapter, so you’ll learn all about that then. The ordering options are to change the default ordering of your data in this grid/view. By default, it’s ordered on the ID of your records. For this example, we’ll leave it as the default.

Lastly, there is Icon in the Add grid dialog (see Figure 13.7). You can use this to set an icon for your grid/view. Choose one that you like for this grid/view. Once you are done, hit Save and your first grid/view should be created. Your menu should now look like Figure 13.8:

Figure 13.8 – The Customers grid/view has been added

Now, if we look at the grid itself on the right side, we’ll see that most of our properties have been added here. You might also have noticed that all the columns have a cog icon beside them that allows you to edit them. You can change the column name here and set them to allow ordering. Not only that, but you can also drag them into your own order. Right now, they are automatically ordered (see Figure 13.9):

Figure 13.9 – Initial ordering

Let’s drag Last name between the First name and Is active columns. Let’s make the order as follows: First name, Last name, Date of birth, Revenue last year, and Is active. After that, it should look like Figure 13.10:

Figure 13.10 – Reordered columns

This reordering allows you to display your data in such a way that it’s easy to find a user record. In the header of the grid, there is also a plus sign available for adding more columns to your grid. Since we only have five properties available, we don’t have to add any more columns. If you want to add additional columns, you can do that by clicking on the + sign (see the plus sign on the far right of Figure 13.10).

At the top of the page, in the left corner, we see a green New button. Let’s click on the New button and a sliding pane should open on the right. Here, we can find our form. With the form, we can not only create new records but also edit them. Because we are still in BUILDERMODE, all of the fields in our form are disabled (see Figure 13.11):

Figure 13.11 – The disabled form in BUILDERMODE

This also allows us to reorder our property fields in any order that we would like. Hover over one of the fields in your form. You should see an arrow shaped like a cross on the left side of the field. This arrow allows you to drag your field around. Grab the First name field and drag it to the top of the form, just above the Date of birth property. When the area above the First name property turns blue, release the mouse button and it should drop into that location (see Figure 13.12):

Figure 13.12 – The First name property placed on top

Let’s order all these properties in a logical order:

1. First name
2. Last name
3. Date of birth
4. Revenue last year
5. Is active

Now, we are all set to enter our first data into our customer model. Exit Builder Mode by clicking on the wrench slider in the top-right corner or pressing the E button on your keyboard. Once you’ve done that, your form should look like Figure 13.13:

Figure 13.13 – Your updated form

If you select the First name field and press Enter, you should see three error messages appear. The fields next to which there are error messages are mandatory, meaning we can’t save the form without filling those fields with information. Fill in all the fields in your form and hit the Save button to create your first record. After this, you should see your first record, as shown in Figure 13.14:

Figure 13.14 – Your first record in the grid view

Finally, we have some data in our data model. As you can see, it’s actually quite easy to add a grid/view from a model. All the options you set on your model are taking effect on your Back Office as well, so you don’t have to worry about this anymore. Besides, after putting things in the right order, you’re good to enter your first data. Of course, there is much more to do and learn, but I hope this first step, which is adding a new view to your back office, felt easy. As you can also see in Figure 13.15, at the top of the record you can see 1:

Figure 13.15 – Your first record in your form

This is the ID of the record in the database; it’s automatically assigned and if you open up Record info by clicking on it, it should show you the Created at and Updated at properties. These properties are handled automatically as well, so you don’t have to worry about them.

Remember that we also had an address model that had a relationship with the customer. Let’s dive into that next. Because it’s not visible right now, we would like to add one or more addresses to our records as well.

Adding a subview to your view

First, we’ll discuss what a subview is and what it is used for in this section. Then, we’ll see how we can add subviews and what kind of options they have. We’ll also set up a view and then add data into a subview.

What is a subview?

What are subviews exactly? A subview is a view on top of your primary view that has a relationship with another model. This can be any kind of relationship. We have already added the Customer model as a view to our Back Office. So, in this case, we’ll consider that to be our primary model. Our Customer model has a relationship with Addresses. We want to be able to see and add addresses to our customers. This is where the subview comes in.

Adding a new subview

You can add subviews in the view of your customer when you activate Builder Mode (with the wrench icon or the E key) and open one of your customer records. On the right side of the slider that opens, a button called Add subview should appear. Click on this button and a dialog should open up, as shown in Figure 13.16:

Figure 13.16 – The subview dialog

As you probably noticed, this dialog has a lot of similarities with the dialog from when we created the view for the customer. That’s because they are basically the same, except that this one is to create a subview and shows relational properties only.

As we can see, it already shows Addresses in the first field. It’s sorted alphabetically, which is why Addresses is selected; if you click on the dropdown, you’ll also see the orders there. In the Name field, we can see Addresses; again, it has been plurified for us. Of course, you can change it to anything you like. In the Role field, you can set up the roles that have access to this subview. Each view or subview can have specific access based on its role. Next is the filter; with this filter, you can prefilter the data before it’s shown to the user. How can you use filtering in the platform? That’s something we’ll dive into in the next chapter about the Back Office. You can also set the ordering of your data by selecting the column that you want to be the default ordered column. Next is the icon selector; for a subview, you can also set the icon as you would for a normal view. The new field here is Visibility. This is another type of filter; it’s of the permission type, kind of like Role. In this case, you can show the subview based on data from either your user or the customer.

Add the subview, based on the address, the standard admin role, and your own chosen icon. Don’t change anything else right now. Let’s close Builder Mode. Your screen should look like Figure 13.17:

Figure 13.17 – The Customer view with the Addresses subview

After you click on the Save button, you should see a subview called Addresses on the right side of your Customer form.

Setting up the view

The 0 adjacent to Addresses means that there are currently no records in Addresses that have a relationship with the customer. Let’s add our first address to our customer by clicking on the plus sign adjacent to Addresses. As you will notice, two more sliding panes will open, one grid view for the addresses and the form for the new address. This is because we want to add a new address, so it is showing us the grid. Another thing you might notice is that all the form fields are in alphabetical order (see Figure 13.18). This isn’t very logical for an address, so let’s change that by turning on Builder Mode and putting it in the following order:

Figure 13.18 – Address in alphabetical order

As you can see, these are the fields from the preceding screenshot, in logical order:

1. Street
2. House number
3. Postcode
4. City

That leaves us with the Customer field—what is this field? It’s the field that connects the address to the customer. Right now, it has a number in it, which represents the ID that the customer has been given by the platform (you can also change this in the data model by changing the label option there). Because we created the address directly from a customer, it automatically connects the customer to the address by filling in the ID. But we don’t need to see this here. Of course, it could help you if you want to connect the address to another customer maybe, but that’s not the use case here. So, let’s remove the Customer field.

We can get rid of the Customer field in two ways. The easiest way is to drag it to the left. It will give us a popup asking whether we want to delete it. Another option is to click on the cog beside the Customer field. This will open a dialog showing us a lot of different options, which we’ll go over in a later chapter. There is also a Delete button at the bottom of the dialog. If you click on the Delete button, it should also remove the Customer field. After you’ve removed that field and turned off Builder Mode, your Address subview should look like Figure 13.19:

Figure 13.19 – The Address form after removing the Customer field

Adding data to the subview

Now that we have the subview ready for use, let’s add an address. Fill all the fields with an address of your choice. After saving the address, let’s go back to our Customer view. You should see that it shows 1 now, beside Addresses. This means it has one address attached to it. You can add a few more addresses and you’ll see that it keeps adding them nicely, while also allowing you to see all the addresses connected to this customer:

Figure 13.20 – Customer with one address

Click once more on the + sign beside Addresses and add another address. Just make an address up so we’ll have two addresses. If you go to the grid view of Addresses (see Figure 13.21), you’ll see that the order of the columns doesn’t make sense here, either. Let’s change it so it makes more sense. Enable Builder Mode to change the order. You can change the order in any way that you like; also you can make the House number and Postcode columns a little less wide so they take up less space and it’s easier to see all the data:

Figure 13.21 – The Addresses grid view with two records

Adding an extra property

Now that we have two addresses, we’ll notice that one thing is missing. There is no real distinction between types of addresses, so we wouldn’t really know what each address is for.

To solve this, we’ll need to add a new property that can identify exactly which type of address it is. There are two ways of doing this. We can go back to the data model and go to the address model and add a new property, but there is also a quicker way of doing this. In Builder Mode, click on the + sign at the end of one of your columns. This + sign allows you to add new properties to your columns, but of course, we don’t have this property yet.

In the new dialog that opens, there is also a shortcut for adding new properties to our model, as shown in Figure 13.22. Using the plus sign highlighted with a red border, we can quickly add a new property to our address model:

Figure 13.22 – The grid view with the plus sign highlighted

Once you’ve clicked on the plus sign on the right side of the dialog, a screen should appear that allows you to add a new property to your model:

Figure 13.23 – Add property to column dialog with the add property (+) icon highlighted

Let’s select the List type here. With this property, we can create a list of options for the user to choose from. In this case, we want our users to be able to choose what kind of address they are going to input into the record. Let’s name this property Address type.

It should automatically fill in the label for us. As you might have noticed, this looks a little different from the previous screen that we’ve used for creating a new property. As mentioned before, this is the old interface for the platform, but it works basically the same as before. Now, we need to add some values to our list that our users can choose from.

Click on the Add button in the values, and let’s add Home and Work here. This will allow users to choose between an address being identified as a home or work address. For now, to keep it simple, we’ll just add these two values. Let’s scroll down a little and also check the Validate presence option. This will make the List property mandatory to fill in for the users. That’s all we need for this new property, so let’s click on the Save button. Now, on the left side of the dialog, in the list of our properties, we should see the Address type property appear (see Figure 13.24). Let’s select it and click on the Select button to add it to our grid view columns. Let’s put it at the beginning of our columns.

Figure 13.24 – The Address type option added as a property

The column will appear empty at this point because it’s a new property for all of our records and nothing has been set yet. So, we need to set Address type on all of our addresses as well. Since we only have two right now, we can do this manually. Let’s open up one of our records. You’ll notice that the address type is not yet visible in the form for our address, but luckily that is an easy fix. If you still have Builder Mode on, click on the Add component button in the Address section (see Figure 13.25):

Figure 13.25 – The Add component button in the Address section

In the dialog that opens up after clicking on the Add component button, select Address type and press the Select button. This should add the Address type property to your form. Let’s put the Address type property at the top of our form as well, so it’s the first thing someone needs to select.

Now, you have two models inserted into the Back Office, using which you can insert data, edit the data, and view the data. Without writing a line of code, it’s just the first step, because there is a lot more that you can do, but we’re taking it one step at a time. Feel free to add the two other models, Order and Order line, to the Back Office now as well. You’ll get an even better idea of how it works from this.

Summary

In this chapter, we have learned how to turn our models into Back Office views. This allows you to quickly turn your models into screens where you can add, edit, view, and delete the records in your models.

Also, you’ve learned how you can use relationships to create a subview between your models. This allows you to quickly add information for your customers, such as an address or even multiple addresses. Also, you’ve seen that you can quickly add a new property to your model and view without leaving the Back Office. This makes making quick changes very easy.