The basis of the application will be made in the datamodel, as it defines the structure of how the data is saved and how everything is connected to each other. After we have made the datamodel, we’re going to generate so-called Views, which gives us the possibility of showing, creating, updating and removing our data. Then we will add actions to the application to implement some workflows. At last, we're creating a webpage in which we can show the Employees' data.

1: Create the Datamodel

  • 1.1. Opening the Datamodel
  • 1.2. Creating the required Models and basic properties
  • 1.3. Creating the required relations
  • 1.4. Creating Advanced properties: Expressions

2: Generate Views based on the models we created

  • 2.1. Opening the Backoffice
  • 2.2. Adding a grid
  • 2.3. Select a Model
  • 2.4. Add components to the form
  • 2.5. Create data
  • 2.6. Add Subviews to the forms

3: Create Actions

  • 3.1. Opening the Action overview
  • 3.2. Create an action
  • 3.3. Add an event: Create Contact moment
  • 3.4. Add an event: Send email to Employee

4: Create webpage to show all employees

  • 4.1. Opening the Web module
  • 4.2. Create UI builder page: employees
  • 4.3. Add Dynamic table component

1: Create the Datamodel

1.1. Opening the Datamodel

When opening the application, you’ll start off in an empty Backoffice because we haven’t altered anything to the application yet. Make sure the Builder Bar is visible by pressing the ‘B’ key on your keyboard. In the Builder Bar (dark blue bar on the left), click on the 4th button from the top saying Datamodel.

The application's data is defined and stored in the datamodel so we can use it for other application elements, for example actions and webpages. No technical knowledge of databases is needed like writing queries. The datamodel is built visually (drag and drop), we are taking care of the underlying database. All information (you need to know) about models can be found here: What are Models and Properties?

1.2. Creating the required Models and basic properties

After opening the Datamodel, you’ll notice there will be 2 models available; User and Roles. They are used for storing the users you've added to the application and the roles that were given to them. We will not use them right now, so you can leave them for what they are (seriously, just ignore them) and create a new model by clicking + New  (top left corner). This will open a tab to enter a modelname and to create properties and relations within and between them. By default every model comes with 3 properties; id, created_at and updated_at. These values are automatically set when a record is created or updated. In this assignment we will not be actively using these properties, but we are going to create some new ones. Find out how to create properties here; HowTo create properties.

Below is an overview of the models and properties to create.

Employee

Team

Contactmoment

* The List property contact_type in Contactmoment needs 3 values:

  • Meeting
  • Email
  • Telephone call

1.3. Creating the required relations

After setting up the models with all their properties, we need to connect them. Just as how we created the properties, we can create relations by clicking through the subview on the model or by dragging the line between models in the overview.
Hover the cursor on the border of a model and an arrow will appear. Click and hold to drag the arrow to another model and a popup will show, looking something like this.

More information on creating relations between models can be found here: HowTo create model relations

We need the following relations:

  • Employee Has Many Contact moments 
  • Employee Belongs to Team

If everything worked out as planned, your datamodel should look something like this;

1.4. Creating Advanced properties: Expressions

After setting up the relations, you can create more advanced properties in your models, where values are calculated based on other values. In some cases even based on the connection between said models! These properties are called expression properties. These are the properties that are automatically calculated by the platform whenever one of the dependent items is altered. For example, your Employee model has a full_name property, which is made up as a combination of the employee's first_name and last_name properties. If the value in last_name changes, the full_name property's value will also change. It is not possible to manually change its value and is read-only in the Backoffice. More information about expression properties can be found here: Expression properties

We're going to create 2 expression properties:

  • Number of employees (Team)
  • Fullname (Employee)

Head on down to the Team model and add a new property. Choose Number expression as type and enter number_of_employees as name. 

Pro-tip: use the Insert variable button to prevent spelling mistakes when including variables to an expression. Other values like expressions and quotations for correct syntax need to be entered manually.

Now enter the following value as expression to calculate the amount of employees within a team:

count(var:record.employees)

Then go to the Employee model. We're adding an extra expression property to display the Employee's full name easily by combining its first and last name. Choose Text expression (single line) as type and enter full_name as name. Now enter the following value as expression to combine the first and last name:

var:record.first_name + " " + var:record.last_name

Did you notice the + " " + part? That's actually pretty important for this property. As the first name doesn't naturally have a blank space at the end and the last name doesn't start with one, we have to "force" a blank space between them. If we wouldn't do that, the names would parsed as RobinMulder or ThomasKorf, instead of Robin Mulder and Thomas Korf, respectively.

With the properties above in place, set a Label property for each model. This can be done in the settings on the model itself, like this:

This means when a record of this model is shown somewhere, the chosen property is its default display value. Set the following properties as Label properties:

  • Employee: full_name
  • Team: team_name
  • Contactmoment: remarks

2: Generate Views based on the models we created

2.1. Opening the Backoffice

This is the part where in just a few clicks we set up the entire interface for our application.

We need to go back to our Backoffice, which can be done by pressing the Play button in the top left corner. At this point, there will be only 2 sections; Desktop and Settings. Within Desktop, there’s an empty page called Manual. Press E on your keyboard or the UI Builder button in the Builder Bar to switch to Builder Mode. This allows you to make structural changes to your backoffice interface, like adding grids and moving columns.

2.2. Add grid

Press the + Add grid button as shown in the image below and a popup will appear.

2.3. Select a Model

As seen below, the settings will be pre-filled with the first model it finds. The Use options refers to a layout in which the columns are arranged. If this is the first time adding a grid for that specific model, stick to - New - and click Save .

After pressing Save , a grid is automatically generated including all available columns in alphabetical order. Feel free to click and drag the columns in the order of your liking.

2.4. Add components to the Form

You’ll also notice there is a + New  button available, which allows you to create new records. A form is opened on the right side of the screen, containing all properties to enter data. Same goes for the form; feel free to adjust the form by clicking and dragging the components in order. By placing the component outside of the form, the component is discarded. Don’t worry, you can always add it again by clicking the blue + Add component  button on your form while in Builder mode.

Pro-tip: When adding a Belongs to relation to a form, the Id of the related model is shown by default. The id value isn't useful within a form, as you can't recognize a record by that value. Click the gear icon on the component to open its settings and select a different, more distinguishable property in the Path setting.

Repeat this process for the other models as well, so Teams and Contactmoments have their own grids and forms to enter and view data.

To give you an idea of how a grid + form could look like, see image below.

2.5. Create data

Now we've created a big part of the interface of our app, it's time to enter some testdata. This is crucial for continuing this tutorial. 

This is done by creating records. Records provide a practical way to store and retrieve data from the database. Each record can have different kinds of data, and thus a single row could have several types of information. The properties we created earlier will hold a value for each record we're going to create.

To create records, stop Builder mode by clicking the E key on your keyboard or click the Play button when in the Backoffice. Just make sure the yellow bar on top of your forms are gone! Create at least 3 employees, 2 teams and 2 contactmoments. Make sure the data is connected, so all employees are assigned to a team and all contactmoments are connected to an employee!

2.6. Add Subviews

We created grids and forms for our models and added some data. To make this data more cohesive and more insightful, we’re going to make related data accessible from the record we are working on. This also makes adding data much more dynamic and create a more efficient workflow. 

For example; create a subview on the Employee form, showing all contactmoments and giving us the option to add contactmoments related to this employee. 

Note: This is not the same as creating relations between models. Relations connect the models on a database level. Subviews are only used for displaying the data we have entered earlier!

Open the form of an existing Employee record and turn on Builder Mode again by pressing E on your keyboard. On the right side, 3 options appear to add extra views related to the form.

In this case, click + Add subview .

The popup shows more of the same options as when we created the grid for Employee or any of the other models, but only contains the models which are available through a relation from the parent record. So in this case Employee has 2 relations; Contact moments and Team. Therefor, only these 2 are available when adding a subview. You’ll also notice you can use the same grid layouts you created earlier at the Use option.

After saving, you can open the subview and create a new record or view the existing record if this relation was already connected. Do this for the following cases:

That's about everything you were going to learn about the Backoffice in this tutorial. Let's continue to actions!

3: Create Actions

3.1. Opening the Action overview

Actions are the best! Actions provide a way to interact on a complex (or very simple) level with your data. By combining different types of events, you can design workflows which can be initiated by the simple press of a button. For example, instead of gathering all data from a record, parsing it to an email and sending it manually to an employee, you could create an Action for it. Guess what? We're gonna.

Open the Builder bar by pressing B and click the Action icon. This is the 5th button from the top in the Builder bar saying Actions.

3.2. Create an action

Because we haven’t created an action before, this view is empty and you're welcomed by Chris Obdam himself! 

Click + New  in the top left corner and a new tab opens. A lot of options will appear, but only a few are necessary to create your action. Below is a list of what to enter where.

  • Description: Create Contact moment
  • Model: Employee
  • Triggers: Manual
  • Background: true/checked
  • Show notifications when executing: Yes
  • Execute: Without limits
  • Debug action and events: true/checked
  • Log execution of action: true/checked

These options should be set when creating this action. The last two options aren’t required but really helpful. They will track your action when executing, showing you step by step how the action performed and what the results were.

You can see these logs by clicking the Logs button in the Builder bar.

The action should look like this: 

Also, add an Input variable called contact_moment to the action under the Variables section of the action. An Input variable is a variable that requires input from the user or action and isn't automatically set by a predefined value. Choose Date time as Kind and make it required. This will prompt the user to enter a date time value when executing the action. The image below shows the input variable.

After saving the action an action flow will open, showing you the Start and End markers. Between them is a + sign to add events.

3.3. Add an event: Create Contact moment

First, let’s create a Create event, like this:

As you can see, we connected the input variable var:contact_moment to the Contact moment property and connected var:record (the Employee record on which we are executing the action on) as the related Employee. The As option declares the variable in which our created contactmoment record will be available through in the rest of the action.

3.4. Add an event: Send email to Employee

Next, set up a Send Mail event. In this mail event we're going to send the chosen employee a confirmation email which includes data from the recently created contactmoment.

When creating the event, choose  - New - for the Template options. Then you can rename the template to Invite employee. It’s important to connect the variables from the action to our template variables so the values will be included in the actual mail we are sending.

Within the template, set the following content;

Hi {{record.full_name}},

{{current_user.name}} invited you for a contact moment on {{contactmoment.contact_moment}}.

Please let him/her know if you're not available.

With regards,

The HR team.

The {{  and }}  define the syntax we use for our templating language to parse variables. More information about our templating language can be found here: Templating Language Reference.

The email's subject will be filled with a Text expression variable. Create a Text expression variable at the bottom of the page and call it subject. Enter the following value in the Text option as expression.

"Contactmoment: " + var:new_contactmoment.contact_type + " | " + var:new_contactmoment.contact_moment + " | " + var:current_user.name

With this variable, a set of values are combined to make up a subject for the email. Select it in the Subject option of the Send mail event.

At last, set the From email option to *yourappurl*@bettyblocks.com
Of course, replace the *yourappurl*  part with the url of your own app. Also set the From name option to your own app name.

This ensures the mail being sent, as the Betty Blocks domain is verified in our mailserver.

If every step is followed correctly, your event looks like this:

Which should leave your action looking like this:

These 2 action events are just the beginning. We understand you want to get know about all the other events, but save that spirit for another time. It's time to create some webpages! More information about Action Events can be found here: Action Event reference.

4: Create webpage to show all employees

4.1. Opening the Web module

In this task we are going to create a webpage to show our employees by using the UI Builder. The UI Builder enables you to create webpages without typing a single line of code.

To start off, switch your Module from Backoffice to Web (hovering will show the Web button)

4.2. Create UI builder page

After clicking the Web button, a new screen will appear showing all webpages in your application. You can click on + New page  in the top-left corner to create a new one. We are going to create our page in the UI Builder. Therefor, choose UI builder.

To get a simple but dashing look, choose Header, footer, left nav as Layout.  

Choose Blank page as Content.

Finally, enter employees as Path value. This means the webpage will be shown when going to https://*yourapp*.bettywebblocks.com/employees . The *yourapp*  part needs to be replaced with your own app url, of course.

Click Finish in the bottom-right corner and you've got yourself your first page!

The page will generate, showing you 2 main components of the UI Builder;
The Palette and the Canvas. As if we’re painting. 

The Palette holds your paint; all components provided by Betty Blocks for you to configure your pages and even components you can build yourself.

The Canvas shows you the beauty you’re creating; all components you applied to the page, showing the structure of your page.

4.3. Add Dynamic table component

We're going to create a table where some of the employees' properties are included.

First, go to the Data tab and create a Collection variable to collect all employee records. Click on + New variable.

Leave Context on Normal, choose Collection as Kind, name the variable employees and choose Employee as Model.
That's all there is to it. This will collect all employees in a collection to use in our webpage. Click Save to save the variable.

Go back the Design tab (first one) in the Pallete and search for "dynamic table".
We need the second one from the image below.

Drag the Dynamic table component to your canvas and make sure it sticks. A blue line in the Page container should show. 

Release the component to see 2 columns appear in the Dynamic table component.
Open the Object Tree (fourth and last tab in the Pallette). 

Double-click on Dynamic table to open its settings. Click on the Data icon and click on the blue variable button (chain-link icon) to select a variable for the Dynamic table.

Choose the employees variable we created earlier and click Select. We're not using any relations or nested collections yet.

By doing these last steps, we've set the employees collection as content for the table. Now we need to sort the data so each piece of information is shown in the correct place.

Each object within the Dynamic table has been made available through the employees_item variable. Therefore, we're using that variable in each Dynamic table column.

Click on the first [select a variable] to set one of the properties as content in the fourth tab of the component. 

A variable browser opens with the employees_item variable pre-selected. You just need to choose one of the properties. Click on full_name and then Select.

Add an extra column to the dynamic table by clicking the dynamic table in the Object Tree and adding a child component. This is done by clicking the + button.

Add enough columns to at least show the following properties (besides full_name):

  • date_of_birth
  • phone_number
  • team_name (property in relation team)

After adding the columns, it should look like this:

Time to try it out now! By clicking the Play button, a preview of the page is loaded. With the received data parsed correctly, this should be the desired outcome:

That’s how easy you can create a webpage and show some basic data.

Feel free to try something out for yourself in the UI Builder and make sure to take a look in our documentation for further information or ask one of us!

Did this answer your question?