Become a Rapid Developer

Module 6
From Mendix Studio to Mendix Studio Pro
6. From Mendix Studio to Mendix
Studio Pro
6.1 Studio and Studio Pro
Now that the planning phase of the app development process is complete, it’s time to start thinking about
development. We will soon jump into Mendix Studio Pro to continue working on Jimmy’s app, but where do
these two tools stand in relation to each other? You understand by now that the Mendix low-code platform is
designed to bridge the gap between business-oriented people and more traditional programmers. These two
development tools are positioned at different points along that bridge.

Mendix Studio is a lightweight, web based “What You See Is What You Get” (WYSIWYG) editor. That means
that as you drag and drop UI elements to build your app, the editor will show exactly what your app would look
like if you were to deploy it, always! That’s quite a difference from traditional code. It can also run on any
computer with a modern internet browser as long as you sign into the Mendix Developer Portal.

Mendix Studio is aimed at the business side of the development process. It allows very fast development and
prototyping of beautiful user interfaces and data structures and doesn’t require intimate knowledge of the more
technical workings of the Mendix platform. That’s where Studio Pro comes in.

6.2 Mendix Studio Pro

So far, you’ve learned how to build pages, create your domain model, build microflows, and add navigation to
your app using Mendix Studio. You could have built everything using Mendix Studio Pro as well.
Mendix Studio is aimed at the business side of the development process. It allows very fast development and
prototyping of beautiful user interfaces and data structures and doesn’t require intimate knowledge of the more
technical workings of the Mendix platform. That’s where Studio Pro comes in.

Mendix Studio Pro packages the full functionality of the Mendix platform into a single downloadable program.
This editor runs on your local Windows machine and is designed to enable more in-depth development. It has
features that allow more granular control over custom logic, security, integration with outside services, and a
host of other features. It also allows writing custom code if that is something your app needs. You can even
preview your pages using Design mode. This is will put the page editor in Studio Pro into WYSIWYG mode.
This is the same editor as the one in Studio. So where Studio IS a WYSIWYG editor, Studio Pro HAS a design
(WYSIWYG) mode and a structure mode. Anything that can be accomplished with Mendix can be done with
Studio Pro.

From this point on in the learning path, you will learn how to work with the more advanced features of Mendix.
Time to switch to Mendix Studio Pro to access these features!

In this module you will learn:

• What Mendix Studio Pro looks like
• How the Team Server helps you work together with your team
• How to switch from Mendix Studio to Mendix Studio Pro
• How to synchronize with the Team Server
• What information entities are
• How you can extend your domain model
• How to nest data

In this lecture, you can find an up-to-date version of the LearnNow app. In the last lecture of this module, you
will find instructions on how to use that version. That will allow you to go ahead with the assignments even if
you didn’t complete every assignment in the previous module.

6.2.1 Exploring Mendix Studio Pro

Go to the Developer Portal and open the Edit App drop-down menu. Now, instead of clicking Edit in Mendix
Studio, click Edit in Mendix Studio Pro.

If you have Mendix Studio Pro installed already, it will open and immediately start downloading the app from
the Team Server (the Team Server is the online environment where all the Mendix apps are stored). In a few
moments, you should be able to see the domain model, pages, and microflows of your app inside Mendix
Studio Pro. If your app isn’t entirely up to date when it opens, you can force it to download the latest changes
by going to Version Control and clicking Update.

However, if you don’t have Mendix Studio Pro installed, a window will appear allowing you to download and
install it. Please proceed, and when finished, open your app in Mendix Studio Pro as detailed above.
Let’s now take a look at this editor, because Mendix Studio Pro looks somewhat different than Mendix Studio.
Remember, Mendix Studio Pro is not a WYSIWYG editor, so creating pages looks different than it does in
Mendix Studio. However, the same basic principles apply, and your app will look the same no matter in which
Studio you create it.

To make sure you have the same Mendix Studio Pro layout as the one used in this course, click View and then
Reset layout.

1. First of all, at the top of Mendix Studio Pro is the control bar. These are the menus and buttons, from
left to right:
• File – open and close documents and projects
• Edit – all the options related to editing files, finding things in your project, and setting your
preferences
• View – from here, you can open all available tool windows
• Project – functions related to your project directory and deployment packages
• Run – run and preview your app
• Version Control – all the functions related to working with Team Server (more about this later on)
• Language – manage the language settings and access to language operations
• Help – quick access to help environments
• Run Locally – deploy your app in the cloud or locally
 • View – preview your app
• A button for opening your app in Mendix Studio
• A button for opening the app’s Project Dashboard in the Developer Portal
• A button that will take you to the Mendix App Store
• The last dropdown menu provides access to all your apps, the Developer Portal, your profile, and
the sign out button

2. At the top-left of Mendix Studio Pro, you see the Project Explorer (underneath the control bar). From
here, you can access all the resources of the app (pages, microflows, and navigation, for example).
The center of Mendix Studio Pro is the editor. This is where you will build all your resources.
3. On the right is the Properties, Toolbox, and Connector panes. You already know the first two. You
can use the Connector to quickly connect an attribute to a widget or an entity to a list view.
4. At the bottom, you will find the Stories, Changes, and Errors tab. Here you can see the stories in your
current sprint (and change their status). You can also see all the resources you have added or changed
to the project and whether you have errors (and where they are).

6.3 The Team Server

The Mendix Team Server is a Mendix-hosted environment that contains all your Team Server apps. It allows you
to collaborate with your team and use versioning. What's that? Have you ever heard of Subversion or GitHub?
How about Dropbox or Google Docs? That's exactly what the Mendix Team Server is as well, only then for apps
instead of files.

When you create a new app from within the Developer Portal, Team Server is automatically enabled. You can
also create apps directly from within Mendix Studio Pro, and then using the Team Server is optional. You can
do this when you want to quickly test something and you don't need to collaborate. Another reason to not enable
Team Server is when you want to start working on a project while working remotely and you don't have an
internet connection. But usually, you will need the Team Server to be enabled so you can collaborate with your
team. It's also possible to enable the Team Server later on, so no worries if you don’t enable it at first and then
need to collaborate on an app later.

Repositories
For every Team Server app, there is an online repository that contains both the model and all the app’s
resources. You could compare the Team Server to a filing cabinet of an architecture company that has a folder
for every building project (like the repository for every app). Inside those folders are the building plans for each
project, which the supervisors can use as a resource so they know what the building should become (like each
app model and its resources).

Team Server Access

There are two prerequisites for accessing a Team Server project:
• You must be a team member of the app project
 • You must have a role with permission to edit the model (by default, this is the SCRUM Master or the
Business Engineer role)
If you want to refresh your memory on how to invite team members and assign project roles, have a look at
lecture 2.5 of this learning path.

Only when you have access to the Team Server can you actually open the app in Mendix Studio Pro and
change it. The first time you open your app in Mendix Studio Pro, it grabs the latest revision (or version) of your
app on the Team Server and downloads it onto your hard drive. The app is now available on your computer as
a working copy.

Working Copy
A working copy is a local copy of the project. This local copy is what you work on and where you make all your
changes. When you start working on your local copy, it starts to deviate from the original, which is stored in the
repository on the Team Server. Working on your local copy has no effect on the repository. Once you are done
with the changes, you can commit them, resulting in a new revision in the repository.
6.4 Status and Changes
The status of your project is a summary of all the changes in your working copy compared to the latest version
on the Team Server. When you work in Mendix Studio, everything you change is automatically committed to
the Team Server.

When you work in Mendix Studio Pro, the changes are made locally and they show up in the Changes pane
(discussed briefly earlier). From there on you can commit these changes to the Team Server, so the changes
become available to everyone in the project that uses Mendix Studio Pro.

Mendix Studio Pro shows the status both in the Project Explorer as well as in the Changes pane.

Different kinds of changes are visualized with the following icons:

Icon Meaning
Nothing happened to this item. It is unchanged with respect to the original.

You modified this item (meaning, a document, folder, or module).

You added this item.

You moved this item to another position in the project tree.

You deleted this item.

You and somebody else made conflicting changes to this item.

The Project Explorer shows an icon in front of the items that have been changed in some way. There is only
room for one icon. If a document has been both modified and moved, it is shown as modified.

The Changes pane shows a line for each change to an item. If a document has been both modified and
moved, there are two lines for that document. The pane also shows items that were deleted, which is
something the Project Explorer cannot do. Click the Show all button in the top-right corner of the pane to filter
the item list on Status.

6.5 Committing Changes

Sending changes to the repository is called committing. The idea is that you commit small, consistent pieces of
work to the repository (for example, implementing a new feature and fixing a bug). Mendix Studio Pro
automatically checks your app for anything you may have missed (for example, a button which refers to a page
that you haven't connected yet) and reminds you to check and fix these before committing. In Mendix, these
are referred to as errors, but you can see them as handy hints. Naturally, it is not recommended to commit
while there are errors in your project. It is good practice to ensure that revisions in the repository are error-
free.

Committing results in a new revision in the repository. You can add a commit message and select the related
user stories. The commit message should describe the changes you’ve made. Selecting the related user
stories is very important. Doing this adds links to the stories in the commit message in the Developer Portal, so
you can easily find an old user story again if you need to.

Mendix recommends keeping commits small, and only relating to one story at a time. Mendix Studio Pro only
shows stories that are currently running or to-do, and it will not change the state of the story. Setting the status
to Done is the responsibility of the team and depends on the team's definition of ‘done’.

Mendix Studio Pro also attaches some information automatically:

• The author (the user who committed)
• The date and time of the commit
• The list of changed content (documents/folder/modules), along with the type of the change (modify,
add, delete, etc.)
• The version of Mendix Studio Pro that was used to commit

Update
Committing is only possible when your working copy is up to date with the repository. If someone else
committed a change since the last time you updated, your local copy must be made current before its changes
can be shared. The reason for this is that the revision you create with the commit should incorporate both your
changes and the changes done by the other developer. Luckily for you, Mendix automatically folds the Update
process into the Commit process. Simply clicking Commit will initiate an update if Mendix detects that any
changes have occurred on the Team Server.

When you work in a team and one of your teammates builds an awesome feature and commits this to the
Team Server, you can also update your local working copy to get that feature in your local version of the app.
That way you can incorporate into whatever you are currently building.

Note that when you want to do a commit, you don't have to manually update your app first. This will happen
automatically when you try to commit your changes to the Team Server.

Let's get all your hard work into Mendix Studio Pro so you can continue on with the LearnNow app!
6.5.1 Return to the LearnNow App
Time to get back to building the LearnNow app. Do you remember what you have to do next? In the Developer
Portal, find the user story you are currently working on (which should be, "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.") and click 3
Tasks to see the related tasks.

Set the first two tasks to Done by checking their checkbox. The third task is “automatically calculating the end-
date of a training event, based on the start-date of that training event and the duration of the course”. A task
only has two statuses, To-do and Done. So, leave the task on To-do and go back to Mendix Studio Pro.

After you’ve built the last task for this user story (in Module 7), you will learn how to commit your work to the
Team Server.

6.6 Get the Latest Version of the LearnNow App

In the next module, you are going to learn how to build microflows in Mendix Studio Pro. If everything is
working well for you so far, you can mark this activity as Completed and continue to the next module.

Otherwise, on this page, you can find a small gift from us: the latest version of the LearnNow App! From now
on, you can also find the latest version of the LearnNow App in the first lecture of each module.

if you’re not sure whether the app you were creating is 100% functional and you’re worried about possible
errors, or simply you just wanted to start at this point and you don’t have your own app - you can download an
already-build, functional project package of the LearnApp and use it! It contains all the required
development content up to this point. Follow the steps below to import the project package.

Import the Project Package

If you’re starting from scratch, follow the instructions below to prepare the training project and content.
Import the Project Package
We’ve provided a project package that you can use to create a new project. It contains all the required
development content up to this point.

1. Download the Project package from the Resources tab.

 2. In Mendix Studio Pro, select File > Import Project Package.
3. Select the downloaded package.
4. Select a Location on your drive to store the project files.
5. On the Import Project Package dialog box, select Team Server and upload to a New repository.
6. Enter LearnNow Management for the App name, and click OK.

Import the User Stories

1. Download the User stories from the Resources tab in the training environment.
2. In Mendix Studio Pro, click Project Dashboard to go to your project’s dashboard in the Developer
Portal.
3. Select Collaborate > Stories in the sidebar menu.
4. Click More.
5. Select Import/Export.
6. Select Update stories from Excel and then click Browse.
7. Select the User stories Excel file and click Import.
8. Click Next to import the sprint and user stories:
9. Click Develop > Planning in the sidebar menu.
10. Mark the Get started sprint as completed.

6.6.1 Test your app

Time to test your app! There are two ways to run your app from within Mendix Studio Pro:
• Run deploys the app to the cloud environment, just like Publish in Mendix Studio.
• Run Locally creates a local running version of your app, which exists only on your computer.

1. Click Run Locally to quickly deploy the app. This is faster than using Run to deploy it in the cloud, so
when developing you always want to use Run Locally.
The first time you use Run Locally, you will see the following screen:

2. The local running version of your app uses its own database. The first time you use Run Locally, this
database doesn't exist yet, so you have to create it. Click Yes and wait for the app to deploy. Once you
see the confirmation that the deployment is complete, click View to preview your app.
 3. Because this is a new database, it is completely empty. Go ahead and create a couple of courses,
locations, teachers and trainees.

That’s it! You’re all set to do the assignments. Proceed to the next section.

6.7 Information Entity

In Module 4, you built the functionality to schedule training events and you learned about the domain model and
associations. You created connections between TrainingEvent, Course, Location and Teacher. Did you notice
that Trainee isn't connected to another entity yet? The next user story will change that!

Jimmy wants to be able to register Trainees to a Training Event. This means that they will need to be connected.
The two entities need an association between them! A training event can have multiple Trainees attending, and
a Trainee can attend multiple training events. So, this looks like it will be a many-to-many association, also known
as the reference set. However, Jimmy would like to be able to add some information to this association (for
example, when the Trainee was registered, he would like to register the registration number and whether the
Trainee showed up). But you can't store anything in the association, apart from the connection itself.

What you need is a different approach than just a regular many-to-many association. You need an entity in
between Trainee and TrainingEvent that says something about the connection between the two. This is called
an information entity.
Because you already have Domain Modeling experience in Mendix Studio, you’re going to add your
information entity using Studio Pro! If it isn’t still running, go open your app in Studio Pro 8.6.0.
6.7.1 Extend the Domain Model
1. Go to the Stories tab and set the following user story to Running: “As an administrator, I want to be
able to add registrations to a training event, so that my teachers know who their students will be.”
2. It is time to add this information entity to your app! Find the Domain Model in your Project Explorer and
open it. Place a new entity between TrainingEvent and Trainee.
3. Edit your new entity’s properties by right clicking on it and selecting Properties, or by double clicking
on it. Name this entity Registration and add the following attributes:

• Number (This is going to be an AutoNumber attribute, so it will auto-increment with each newly
created Registration, which means each Registration will automatically get a unique registration
number)
• Date (This obviously is of course going to be a DateAndTime attribute, but wouldn't it be nice if the
date was automatically set to the moment that the Registration was created? You can do this by
setting a default value. First, create the attribute and then use the Properties pane to set the
default value to Default to current date and time)
• Attended. (This will say whether someone showed up or not, so it will be a Boolean attribute.)

3. Now it's time to add the associations. A Trainee can have many Registrations, but a Registration
always belongs to one specific Trainee. A TrainingEvent can have many Registrations, but a
 Registration always belongs to one specific TrainingEvent. You create associations in Studio Pro by
either clicking and dragging arrows on the Domain Model, or in the Associations tab in the Entity’s
properties.

Congrats! You extended your domain model and created an information entity! Now you can store more
information about the connection between Trainee and TrainingEvent.
6.8 Nested Data
Now you need to think of a way to manage the Registrations in the app. Managing them from the TrainingEvent
Overview page makes sense, because the Registrations will belong to a specific training event.

Now, if you want to look at the Registrations of a particular TrainingEvent, you need to nest a Registration list
view inside a TrainingEvent data view. This way, Mendix Studio can use the context of the data view (a particular
training event), to only show those registrations that belong to this training event.

For that, you need to:

• Create a new button in the Training Event Overview page
• Create a new page for the overview of the registrations and link the button you just created to that
page.
• Add a List View inside a Data view, so that only the registrations for that specific training event are
displayed. This is called nesting data!
• Create a new button and a detail page to allow the user to create a new registration for that specific
training event.

In the next assignment you will see how you can do that step-by-step!
6.8.1 Create new button and page
1. Go to the TrainingEvent Overview page.
2. Select the Details button in the list view. Look for the Open Page button in the Toolbox. Drop it above
the Details button to place it on the left of the Details button.

3. The page selection screen will open. The Registrations page doesn’t exist yet, so click New to create it
now.

• A good name for this page could be TrainingEvent_Registration_Overview.

• Since you are going to create this page from scratch, select the Blank template.
• Make sure to use the Atlas_Default navigation layout.
• Click OK.
 4. Change the new button’s caption to Registrations.
5. The new button looks very similar to the Details button, so let's give it a different style so it stands out
more. With the Registrations button selected, in the Properties pane, look for the Button style selector
and set it to Info.

6. Right-click the finished Registrations button and click Go to on click page

(MyFirstModule.TrainingEvent_Registration_Overview).

In the next lecture you will edit the Registration overview page, so it becomes functional. You will learn how to
nest data and use existing data as a context.
6.8.2 Nest Data
You are now in the Training Event Registration Overview Page you just created. The page only has an empty
column on it, and the first thing you need to do is add a data view inside that column. The data view widget
allows you to look at and change the information of one specific object. All the detail pages you have created
so far contain data views. The data view is the context of the page, the starting point, so to say. In this case,
that is the TrainingEvent object.

1. Add a data view widget to the column (which you can find in the Toolbox) and connect it to
the TrainingEvent entity in its properties.
• Do not automatically fill the contents of the page. Click No.
• Double-click the data view to open its properties. This data view doesn’t need Save and
Cancel buttons, so set Show footer to No. Click OK.
2. Let's add a header (page title) to the page, so that the end-user knows which training event’s
registrations they are looking at. Look for the Pageheader Controls building block in the
Toolbox and place it inside the data view. Think of a descriptive title, using attributes:
something like Registrations for the {Course Title} on {StartDate}.
• Curly braces denote attributes in Studio Pro. You can edit the captions and attributes in
the text widget’s properties. Type {} with a number inside to represent where you want
to show an attribute, then choose the attributes in the Parameters section.
3. Finally, delete the subtitle and the Edit and Delete buttons; we won’t be needing them.
Now, if you want to look at the Registrations of a particular TrainingEvent (or manage them), you need to nest
a Registration list view inside a TrainingEvent data view. This way, Mendix Studio can use the context of the
data view (a particular training event), to only show those registrations that belong to this training event.

1. Add a new full width row to the page. (Add it to the outer layout grid by clicking on the grey bar
on the side.) Then drag a new data view into the new row and connect this data view to the
TrainingEvent entity.
2. Look for the List 2 building block in the Toolbox and place it inside the new data view. Go to
the Connector pane and find the Registration entity. The Connector is a helpful pane that allows
you to easily and quickly connect page elements to dynamic data.
 Do you see how the Registration entity is in that screen twice? Selecting Registration
(MyFirstModule) will show all the Registrations in the system. It won't use the context of the
TrainingEvent to only show the registrations that belong to this training event.

Selecting Registration from the TrainingEvent collapsible, via Registration_TrainingEvent will use
the context of the TrainingEvent. This is called using an object as a constraint. It will filter down the list
of Registrations to show only those that belong to this particular training event. This is the option you
want on this page! Go ahead and connect it to the list view by double clicking.

3. Use the following settings for the data source options of the list view:

These settings mean that the information will come from the database and that the association to the
current TrainingEvent is used as a constraint.

4. Make the list view show the registration number and the name of the Trainee to which
the Registration belongs.

5. Last but not least, your users will need a way to get back to the TrainingEvent_Overview page.
• Place a Close Page button (which you can find in the Toolbox) inside the footer. A nice caption
for this button could be Back or Back to training events.
 • A Menu left icon will make the button even more user-friendly, because it visualizes what the
button will do. Change the style to Inverse.

This is what your page should look like now:

This is what your page should look like now:
6.8.3 Create details page
Now it's time to add the functionality to be able to add and edit Registrations.

1. You won’t be needing the Edit or Delete buttons in the header. Go ahead and delete them.
2. Make the Add button and the > button functional. Change the Add button’s On-click action to Create
Object. Now choose the entity. Find the correct Registration entity and click Select. When selecting the
Registration entity, remember to use the TrainingEvent as a constraint! Also create a new page
where you’ll edit new Registrations. Call your page Registration_NewEdit, and use the Popup layout
and Form Vertical.
3. Also link the > button to your new page, but don’t create a new object. Use the Show a page On click
option instead.
4. Open the Registration_NewEdit page you just created. This Registration needs to belong to someone;
otherwise, the teachers won't know who is going to show up, just that somebody is. Make sure that the
first thing Jimmy can do on that page is select a Trainee. Also, this is probably the most important
information of the Registration, so it should be the first editable field. Move the Trainee selection widget
above the Date selection widget.

5. Go ahead and run your app locally. Congratulations, you have finished another user story! Go to the
Developer Portal and set the story to Done.
6.9 Summary
In this module you learned:

• What Mendix Studio Pro is and what it consists of

• What the Team Server is and how it helps you collaborate with your team
• How you can switch from Mendix Studio to Mendix Studio Pro
• How to import a project as your starting point
• What information entities are
• How to nest data

Looking forward to start working with Mendix Studio Pro? Then, follow the next module to learn how you can
do that!
6.10 Knowledge Check
1. Mendix Studio Pro is a WYSIWYG editor.
a) True
b) False

2. In Mendix Studio Pro, you can access the Domain Model of your app from:
a) The Project Explorer
b) The Project Dashboard
c) The Connector
d) The Domain Model tab

3. Only users with the SCRUM Master role have access to the Team Server.
a) True
b) False

4. You downloaded the latest version of the project from the Team Server, and did some changes to the
app. What do you need to do next for your team members to be able to view your changes?
a) Commit your changes to the Team Server
b) Publish your app to the cloud
c) Update the user story from Running to Done
d) Synchronize with the Team Server

5. Which of the following statements is true for Studio Pro and not to Studio?
a) It has a direct link with the Developer Portal
b) It can run off-line without Internet connection
c) It allows to create custom logic using microflows
d) It allows to add data to your app

6. How would you implement an information entity in your domain model?

a) Replace the many-to-many association with 1-to-1 associations
b) Replace the 1-to-many association with 1-to-1 association
c) Replace the many-to-many association with 1-to-many associations
d) Replace the 1-to-many association with a many-to-many association

Answers:
1-b, 2-a, 3-b, 4-a, 5-b, 6-c;
 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

30