Become a Rapid Developer

Module 4
Add Data to your App

1
4. Add Data to Your App
4.1 Add Dynamic Data to Pages
After creating pages and linking to them using buttons, the next step in the process is to fill the pages
with actual data, as the new overview pages aren’t showing any information. On each of these pages,
Jimmy would like to see a list with the corresponding information in his system. For example,
under Course Overview, he would like to see a list with all the existing courses. As those courses
are often changing, he wants to be able to add them himself, instead of having them as static text in
the app.

List view
Because you created the pages with the List Default page template in the previous module, there is
already a header and an empty list view on the page.
A list view is a widget used to display information in a vertical list. The list view usually gets its
information from the database, which is the storage system of your app. The database consists of
database tables that contain all the information, so in other words, the database is the storage system
of your app. A list view can also have different data sources, such as a microflow, an XPath
expression, or an association. For now, you will use the database as your data source. Later in this
learning path, you will learn more about the other data sources.

2
4.2 Entities and Attributes
Before showing data in your app, you first need to understand two basic principles:
• Entities - To show data in your app, you need to connect the list view to an entity. An example of an
entity for the LearnNow app would be Course. The entity will be filled with attributes.
• Attributes - Attributes determine what kind of information regarding the courses you can see and add
(for example, a title and description). Each attribute has a data type. This property defines the type of
data that can be stored in the attribute, just like you format the cells of an Excel sheet.
In other words: An Entity is the Data that is displayed, and the attribute defines the format of that
Data.

The following Attribute types are available, each with their possible values:

Type Possible values

3
 Automatically generated positive or negative whole number. The default value of the attribute
AutoNumber determines the first number that will be generated. Each object created of the same type will
have an AutoNumber that is one greater than the previous one.

Binary Binary data (for example, an entire file).

Boolean True or false.

Decimal A positive or negative number that can have digits after the decimal point.

DateTime A point in time that consists of a date and time component, accurate up to the millisecond.

Enumeration A list of predefined values.

The string will be stored after it is hashed (encrypted). This type can be used to store a
HashString password, for example. Hash values are generated using the hash algorithm that is chosen in
the Project Settings.

Integer A (small) whole number that can be positive.

Long A (big) whole number that can be positive.

String A text containing letters, spaces, numbers, and other characters.

Example
Take a look at the following image of a jar of strawberry jam. The jar would be the entity in this
example, but can you think of a couple of attributes and their types for this jar?

4
Perhaps you came up with something like this:
• The name of the product in the jar (Strawberry Jam). This could be the Name attribute, type String,
because it's text.
• The price of the jar (€ 1,99). This would be a Price attribute, type Decimal, because it's a number with
digits after the decimal point.
• The expiration date (09/2019). This would be a DateAndTime attribute called Expiration Date, because
it's a date value.
• Whether the seal is broken or not would be a Boolean attribute type, because it's a question you can
answer with True (Yes) or False (No).
• The material of the jar could be either glass, plastic, or metal. This would be translated into the Material
attribute, which would become an Enumeration, because it's a fixed list of options.

5
 • The production number (#014698). That's a bit of a tricky one. It could be a regular number, which
means it would be an Integer. But take into consideration that the production number would have to go
up by one for every newly created jar. This can be easily achieved by making it an AutoNumber
attribute.

4.2.1 Define attribute types

Jimmy has provided you with a list of what information he would like to be able to see and add to the
system. Can you come up with an example for each attribute? What type would each attribute be?

Entity: Course
Attributes Example Attribute type
Title Rapid Developer String
Description
Duration (in days)
Price

Entity: Location
Attributes Example Attribute type
Name
Address

Entity: Teacher
Attributes Example Attribute type
Name
Email address

Entity: Trainee
Attributes Example Attribute type
Name
Address
Email address

6
4.3 Display dynamic data
Now that you know what Entities and Attributes are, you can start to actually show dynamic data to a
page. As mentioned before, to do that, you need to add an entity to a page. In the course overview
page of the LearnNow app, you want to show an overview of all the courses that Jimmy will add to
the app. To do that, you need to add the Course entity to the page. To also display some details,
such as the location of each course or the trainer, you also need to select those attributes.

For the LearnNow app, Jimmy needs to be able to add new courses, edit locations, and keep his app
up to date.
You can do that by following three simple steps:

• Step 1: Set up the page

• Step 2: Adjust the layout of the list view
• Step 3: Add the attributes
You will get a step-by-step explanation of how you can do that in the following assignment!

4.3.1 Create and Connect Entities

In this assignment, you will make sure that all the overview pages that you created in the previous module
display relevant data.

1. Let’s start with adjusting the overview page for the Courses! Open the Course Overview page.
Change the title and subtitle in the header so that they reflect what kind of page this is and what the
user will be able to see on this page.
2. Now select the list view by clicking it. The list view is going to be connected to one specific entity and
show a list of all the data belonging to that entity (for example, a list of all the courses in the system). In
the Properties pane, click Select an entity and create a new entity. Name the entity Course. Entity
names should always be singular and self-explanatory.
3. Back to the list view! We don’t need an image here, so delete the image and the container it is nested
in to clear out the list view. The text you see in the list view is just there as an example of how you
could stylize your list view. The text that was already in the list view is going to be replaced by the
different attributes of the Course entity.
4. Remember the information that Jimmy wanted to add to the courses? That was
o a course title
o a description
o the duration
o the price

A description of a course can be quite a bit of text, so it’s probably not a good idea to show that on an overview
page like this. However, the other three attributes are very relevant and would fit nicely.

5. Click on Title and in the Properties pane, remove the caption Title (if you don’t remove the caption,
Title it will appear as static text in your app) and click Add attribute (this button is in the Content box,

7
which is the top-most input field in the Properties pane). Click New Attribute and name it Title. Then,
set the Type to String, as the title will consist of text.

8
Naming attributes
When you create entities or attributes that have more than one word in their name (for example, email
address), use Upper CamelCase. This means you use no white-spaces or underscores (“_”) and start each
new word with an upper-case letter. Mendix will understand this, and everywhere the name of the entity or
attribute needs to be shown, Mendix will output it as separate words and make those upper-case letters lower-
case again. For example, “Email address” written in CamelCase is “EmailAddress.”

6. Repeat this process for the other attributes that you want to show (in this case, duration and price). The
words in between the braces (like {Title}) will be replaced by the values in the database in the app.

7. Once you are happy with the result, repeat the same steps for the rest of the overview pages.

9
4.4 Previewing Your App
Now that you have created all the overview pages, linked them and have added data to them, is a
nice moment to preview your app and see what it looks like. You can preview your app right in
Mendix Studio. The app will be published on the Mendix Cloud, and you can actually use it! In the
application lifecycle, this is the deployment phase.

During the development of your app, you can preview it whenever you like. As long as nobody is
using the app yet, this is perfectly safe to do. Once the app is “in production” (meaning, it is being
used by end-users), be careful to only publish the app once a feature is built completely. Otherwise,
your end-users could be confronted with incomplete functionalities.

10
Studio Pro will not allow you to preview while there are errors in your app, so you can’t accidentally
break an app that’s running in production.

11
4.4.1 Previewing your App

This may be a nice moment to preview your app and see what those overview pages look like now.

To preview your app, click Preview on the top right corner of Mendix Studio. The first time you
preview your app it may take a while, so why don’t you take a quick break and stretch your legs for a
little bit?

When your app get is up and running, click around and see how your pages look! Try clicking the
green Add buttons. They don’t do anything yet, do they? We want them to create new Courses,
Locations, Teachers, and Students, but didn’t you already create those entities? The Add button isn’t
meant to create entities; it creates instances of entities. We call these instances Objects.

12
4.5 Objects
In the previous assignment, you found that the Add buttons don’t yet perform any function. You will
need to tell each button whether it should create a new Course, Location, Teacher, or Trainee Object.
To solve this, we need to know what an Object is.

An Object is a single instance of an Entity, consisting of Attributes. You can create multiple Objects
based on one entity. These Objects can be stored in the database. You can see the Entity and its
Attributes combined as a blueprint of the information you can add to your app. So, each Course in the
system is an Object, and when you create a new Course, you create a new Object of the type (entity)
Course.

If you think back to the jar example, the Entity and Attributes are like the blueprint of the jar, handed
to the manufacturer so he knows what the jar should look like when he makes it. Once he starts
producing the jars, each jar that is created is an Object. The database would be like a shelf where
you store all the created jars.

13
4.5.1 Link buttons to entities

Now that you know what an Object is, you can tell the buttons which Objects to create.

1. Open the Course Overview page and select the green Add button. In the Properties pane,
change the On Click Action to ‘Page’. Flip the switch Create Object to on. Some fields
appear below. Click on Entity and select the correct entity for the button.

2. Repeat the same for the rest of the buttons!

4.5.2 Create Detail Pages

Up until now, you’ve built pages that allow Jimmy to see the information in his system, but you
haven’t created any pages yet where he can add or edit information (a detail page). We will need a
detail page for each overview page. Having beautiful overview pages is nice, but if Jimmy can’t add
information (objects) to the app, the app won’t be of much use to him.

14
1. Previously, you created a new page, and then linked it to the button. Let’s do that the other way around
now. Create a new page from within the page selection. That has certain advantages, such as the
option to prefill the page with data from the previous page.

15
2. Highlight the Add button on the Course Overview page, from the Properties pane, under Page click
Select page to select the page to which this button will go. Right now, you can only choose the
homepage or one of the overview pages, but that is not what you need. You need a detail page, where
you can input or edit the details of a course. This page doesn’t exist yet, so click New page to create it.
3. Following the Mendix naming conventions, a good name for this page would be Course NewEdit. This
is because the page is going to be used for filling out the details of new course objects AND changing
the details of existing courses.

When you create a page, you have to make a couple of choices:

• What is the navigation layout of the page going to be? Will it have the menu at the top of the page
or in a sidebar? Will the page be a full screen page or a pop-up window?
• Are you going to create the page from scratch or will you use one of the Mendix templates?

1. Take a look at the wireframe for this task. It is a page with a couple of input widgets (an example of an
input widget is a text box or a date picker). It looks a bit like a form, doesn’t it? In Mendix Studio, you
can choose between three types of form templates, so go ahead and select the Forms templates and
from there, choose Form Vertical template.
2. Because this page is a detail page and it isn’t going to be very big (remember, the Course entity only
needed to contain a Title, Description, Price, and Duration), it is a good idea to use

16
 the PopupLayout layout. This will make the detail page open on top of the overview page as a pop-up
window.
3. Do you see that check box that says “Pre-fill page contents based on the Course entity”? You can use
this functionality to create the page really fast, because it will generate an input widget for each attribute
in the Course entity! Go ahead and check it!

4. Click the blue Create button. You will jump to the newly created detail page, which has fields
for Title, Duration, and Price already in place.

17
 5. There is no field for Description yet, however. Let’s add it to the detail page! The fields that have been
generated by Mendix Studio are called text boxes, and they are perfect for entering single lines of text.
The description is most likely going to include more text than just that one line, so Jimmy will need a
bigger input field for that. In the Toolbox pane, search for the Text area widget and place it on the
page underneath the Title field.
6. The newly added Text area immediately gives you the possibility to input values! Under Attribute, click
Select an attribute to connect the text box to the right attribute. Do you see how the select page only
shows the Title attribute and not Duration or Price? This is because the text box widget only allows
attributes with type String. There is no Description attribute in the list, because you haven’t created
that attribute yet, as you didn’t need it on the overview page. Being able to add and see more
information about a course is very useful, because it will give Jimmy and the teachers a better
understanding of what each course is about.
7. Click New Attribute to create the description attribute now. Give it a name and select a type, then click
Create.
Tip: Always keep the user experience in mind when creating pages. What information is useful for the
user and what isn’t? And if the information is useful, on which page(s) does it add the most value?

8. Create the detail pages for all the overview pages. Remember that some attributes (like Address) will
work better with a text area than a text box, because they need to contain multiple lines. Make sure to
change this where necessary!
9. When you’ve created all four detail pages, go back to each overview page and link the ‘Details’ buttons
to their respective NewEdit pages. You can do it in the same way you linked the Add buttons, but make
sure the “Create New Object” switch is off. This will allow you to edit existing objects in your database
using your NewEdit pages!

18
4.5.3 Preview

1. Preview your app to see the results.

2. You can select different devices for previewing the app. For example, that's how it would look
like if you select Phone preview:

19
 3. Take some time to add a couple of courses, locations, teachers, and trainees to the system. Also, set
the story to Done in the Developer Portal.

4.6 Work with Feedback

Once you have solved the errors and published your app, it is a good time to let your team preview
the app to add their feedback and ideas.

When collaborating with your team, it’s a good practice to document planned work, add comments
and feedback to current tasks, or else – so everyone knows what’s going on. This can be done via
feedback.

4.6. Feedback Item

20
When collaborating with your team, it’s a good practice to document planned work, add comments
and feedback to current tasks, or else – so everyone knows what’s going on. This can be done via
feedback.

If you decide to go this way, this can be done by using the feedback function. The floating feedback
bar will give you a possibility to comment on the app.

All comments then will be visible on Mendix Developer Portal, on the Feedback page.

21
4.6.2 Create the navigation menu
Before we move further, let’s create navigation menu.

1. Open the Navigation Document (which you can access by using the navigation menu on the
left side of Mendix Studio). You see that there is already one navigation item, the homepage.
Let’s add a couple more!

2. You can add main navigation items and sub-items using the green plus icons:

3. Create a navigation item for each overview page. For each navigation item, you will have to specify
which page they are going to open. Also, you can give them a nice caption, which will tell the end-user
which page they can expect to go to when they click the navigation item. Last but not least, you can
select an icon for the navigation item. Selecting the same icons as the ones you used on the homepage
buttons will make the navigation even more user-friendly!
4. Preview your app and check out your new navigation menu.

22
 5. Finally, set the story to Done.

4.7 The Domain Model

Congratulations! You have completed your first user story and improved your app by fixing a feedback
item. Awesome job, you are already starting to get the hang of this!

Jimmy is quite pleased with the work you have done. He can start adding his data to the system, which is really
helpful for LearnNow. Let’s have a look on how your data is structured so far! To do this, we'll have a look at
the Domain Model.

How Are Entities Shown on the Domain Model

1. Open the domain model called MyFirstModule.
Here, you will see how the entities and attributes you created are visually represented. The blue
rectangles represent the entities that you have created. Each entity that is present in the domain
model will be created in the database as a table. Each attribute inside that entity will become a
column in the database table. In fact, if you want to change your database structure, you need to do
that from within the domain model.

Extending the Domain Model

23
The next feature that would be useful for Jimmy is the capability to schedule training events. With this feature,
Jimmy can do all his planning in the app, and the teachers can see in the app when and where they have to
host a course.

The training events are a new piece of data. In order for dynamic data (which is data that a user like Jimmy can add
to the system) to be available in the app, it needs to be in the domain model. Up until now you have created entities
by first creating a page and then creating the entity there. You can also directly add a new entity to the domain
model. Adding entities or attributes to the domain model is something we call extending the domain model.

The Database
The structure of the domain model determines what the database will look like. Each entity will become a database
table, and each attribute will become a column in the database. Every object you store in the database (for example,
a course) becomes a row in the corresponding database table. This also means that if something is not in the
domain model, you also can’t add that information to the database.

24
This is what the database table for the Course entity looks like:

You see that ID column? That isn't an attribute. So how did it end up in the database table? This is
something Mendix does automatically for you, because every object always needs a unique identifier (an ID) so that
the system knows which object it is.

You can change the domain model as often as you like, and the database will synchronize when you publish the
app again. Also, when you change the name of an entity or attribute, your app will still work, because Mendix Studio
will automatically apply these changes everywhere.

25
4.7.1 Add a new entity to the domain model

In this assignment, you are going to enable Jimmy to schedule training events in his app!

1. Go to the Developer Portal and set the following story to running: “As an administrator, I want to be able
to schedule a training event, so that the teachers can see their schedule even from their phone.”

Jimmy added the following description to the story: “When scheduling a training event, a location and course will
need to be selected along with which teacher is going to host the event. This way, the teacher can see which course
they will have to teach and where. I should also be able to select a start and end date for the course, so the
teachers can see on which days the course will occur.”

2. Open the domain model MyFirstModule and drag a new entity from the Toolbox onto the domain model.
Enter TrainingEvent for the name for this entity. Use CamelCase for the name. Also, remember that entity
names should always be singular! This is because the entity is the blueprint of the object, not a list of
objects.

Jimmy said that he wants a training event to have a start date and an end date.
3. So, let's add two attributes to the TrainingEvent entity. You can probably guess which attribute type these
attributes should have: DateAndTime!

Excellent! You have a new entity to your domain model. Your domain model should now look like this:

4. Rearrange the entities in your domain model so that they don’t overlap. Use the image to check
whether you selected the correct type for each attribute. Made a mistake? No worries! Just click the
attribute and select the correct Type in the Properties pane.

26
4.8 Associations in the Domain Model
In the Domain Model, the various entities need to be connected to each other so they can
interact. For instance, you need to be able to store in the system what course will be given, where it
will be hosted, and who will teach it. A training event will always be for only one course, at one
location, and hosted by one teacher. However, over time, a course will be scheduled more than once,
locations will be used more than once, and teachers will host several training events. These
connections are called associations. When you create an association between two entities, you
create the possibility to, for example, connect a course to a training event.

For each association that you add to your domain model, a new database table will be created. This
table will store data on which objects are connected to each other.

In Mendix Studio, you can choose between three types of associations, which we are going to explain
by using football as an example. In football, you have teams, players, stadiums, and leagues. The
possible associations are described below.

One-to-Many Association (1–*)

This is the most commonly used association. In the example, this is the association between a player
and a team. One player always plays for one specific team, but a team has multiple (many) players.

One-to-One Association (1–1)

This is the association where two objects can only be associated to each other and not to any other
objects at the same time. In the football example, this is shown in the association between a team
and a stadium. A team can have only one home stadium, and a stadium can have only one home
team.

Reference Set (*–*)

This is also called a many-to-many association. In the case of the football example, a league is
played by many teams, but a team can also compete in multiple leagues.

Let’s take another look at the description Jimmy added to the user story: “When scheduling a training
event, a location and course will need to be selected along with which teacher is going to host the
event.”

Before you can start thinking about registrations, you first need to be able to add training events to
your schedule. So, for this user story, you will focus on that functionality, and in the next user story,
you will look into adding registrations to the training events.

27
4.8.1 Add Associations
Let’s put this into practice! The training event needs to have a connection to a course, location, and
trainer. This way, you can store in the system what course will be given, where it will be hosted, and
who will teach it. A training event will always be for only one course, at one location, and hosted by
one teacher. However, over time, a course will be scheduled more than once, locations will be used
more than once, and teachers will host several training events.

1. Open the MyFirstModule domain model and select the TrainingEvent entity.
2. Click the arrow button next to the New attribute button underneath the entity.
3. Now, select the entity you want to create the association with (for example, Course). The
association will be created as a one-to-many association by default. To change the association
type, just click the association and select a different type in the Properties pane.

The associations have names too! The name of the association is TrainingEvent_Course. And this
is the naming convention for associations: Entity1_Entity2. You can make the association name
more descriptive if you want, but the underscore that shows that where one entity ends and the other
begins is really important!

4. Go ahead and create all the associations according to the description that Jimmy provided. Make sure
to rearrange your domain model (if necessary), so that all the association labels are easy to read.

28
 5. Here is the outcome:

Tip: Did you accidentally create the association in the wrong direction? No worries, in Mendix
Studio you can change the direction of the association with one click!

29
4.8.2 Use Drop Down Widget
Now that you've extended the domain model, it's time to create the pages for the training events. You
will do this, by using a Drop Down widget, which will allow you to select an associated object (in
other words, create a connection)

1. Go ahead and create an overview page and a detail page for your training events. Don’t forget
to add these pages to the navigation menu. Need some inspiration? Take a look at the
following designs.

2. If you don’t remember exactly how to create the pages, take a look at Module 3: Start
Building Your App. You will need to add a new row in the layout grid on your Home page so
that you can fit the new button in. Note that when choosing to pre-fill with data from the
TrainingEvent entity, Mendix Studio doesn't automatically generate fields for the course,
teacher, and location, because these are associations. However, it is very important that you
can set these connections; otherwise, your teachers won't know which course they have to
teach and where!
3. Open the detail page of the TrainingEvent, which should be called TrainingEvent_NewEdit.
You will see that is has a date picker there for the start date and the end date of the course.
This is because these are attributes of the TrainingEvent entity, so the fields were created
automatically.

30
 4. Go to the Toolbox pane and search for the Drop Down widget, which will allow the user to
select an associated object (in other words, create a connection).
5. Drag the widget onto the page, right above the Start date field.
6. Switch to the Properties pane and click Select an attribute.
7. You are going to create the selector for the Course. At this point, you always have to ask
yourself the following question: " Which attribute will make it easiest for my end-user to make
their selection?" In other words, you want the attribute that says the most about the Course
entity. In this case, that is the Title attribute. Go ahead and look for it in the selection window.

Did you notice how the name of the attribute was written? It’s written
as TrainingEvent_Course/Course/Title. That is because the Web Modeler shows the entire path
from TrainingEvent (which is the context of the page you are currently on) to the Course Title. It
goes from TrainingEvent, over the association TrainingEvent_Course into the Course entity and
then finds the Title attribute.

8. Repeat this process for the Location selector and the Teacher selector. Your end result
should look like this:

9. Preview your app and schedule some training events. Now you will be able to select all necessary
information!
10. When you are done, go to the Developer Portal and set the user story to Done.

31
4.8.3 Adding Training Events from the Homepage
Jimmy is very pleased with the new functionality; it really helps him in his day-to-day job. He does find that it
takes a lot of time to schedule a training event while on the go. It would be convenient for him to have a button
on the homepage that allows him to quickly schedule a training event. So together with Jimmy you have written
the following user story:

As an administrator, I want to be able to schedule a training event more efficiently, so I spend as little
time as possible on this.

1. Find the user story in the Developer Portal and set it to Running.
2. First you need to add a new button to the homepage.
• In the Toolbox, search for the Card Action building block, and drag and drop it in the
column next to the Training Events button.
• Select a nice icon for the button. That will make it clear to the end user that they will add
a training event to the system. In that Properties, select the Plus icon.
• Change the caption of the button to Add a Training Event.
3. Next, configure the button so when the user clicks on it, they can add a new training event.
• Select the icon of the new button and change the properties:
o Change the On click action to Create Object
o Set the Entity to MyFirstModule.TrainingEvent
o Set the On click page to MyFirstModule.TrainingEvent_NewEdit
• Repeat these steps for the caption of the button.

32
Congratulations! With the new button you just created, Jimmy can now schedule new training events directly
from the homepage of his app.

4.9 Summary
Congratulations! You now have a perfectly functioning app!

Here is what you learned while building it:

• What dynamic data is
• What entities are
• What attributes are and what are the different attribute types
• How to connect entities to your pages
• How to publish your app
• What objects are
• How to solve errors in the web modeler
• How to preview your app on your mobile phone
• How to give and implement feedback from within the developer portal
• How to create a navigation menu for your app
• What the Domain Model is
• How to add entities to your domain model
• What associations are
• How to add associations between entities
• How you can extend your domain model
In the following modules, you will see how you can automate some processes within your app, and
help Jimmy save some time!

33
4.10 Knowledge check
1. A list view is a widget used to:
a) Display dynamic data
b) Display static text
c) Display bullet points
d) Change text from horizontal to vertical view

2. The value 1.23 could be stored in an attribute of the type:

a) AutoNumber
b) Integer
c) Decimal
d) Long

3. The Attribute type Enumeration is used to store:

a) Automatically generated positive or negative whole number
b) A list of predefined values
c) A whole number that can only be positive
d) A positive or negative number

4. A connection between two entities in Mendix is called:

a. An attribute
b. An intersection
c. An association
d. A relationship
5. Which name should you use for an entity representing a maintenance report?
a. MaintenanceReport
b. Maintenance_Report
c. Maintenance Report
d. Maintenance-Report
6. When configuring an ‘Add’ button that goes to a new edit page, what must you be sure to do?
a. Change its color
b. Move it to the top right of the page
c. Turn on the Create Object switch
d. Set the On-click action to Add

34
 35
1-a, 2-c, 3-b, 4-c, 5-a, 6-c
Answers:
 Mendix is the fastest and easiest platform to build and
continuously improve mobile and web applications at scale.
Recognized as a market leader by leading analysts, we help our
customers digitally transform their organizations and industries by
building, managing, and improving apps at unprecedented speed
and scale. More than 4,000 forward-thinking enterprises, including
Kuehne + Nagel, KLM, Philips and North Carolina State University
use our platform to build business applications to delight their
customers and improve operational efficiency.

Learn more at Mendix.com

36