Table of Contents

Outline 1

Hands-on 4
Add Cast / Crew to a Movie 4
Build the Screen 4
Styles 5
Creating the new Record in the Database 6
List the Production Talent and Cast / Crew 7
Production Talent 7
Cast and Crew 9
Add the Genre Field to the Movie Form 10

Outline
In this exercise, we will extend our UI functionality. First, we will add the chance to add cast /
crew to a movie. For that, we will require:

● A new Screen where we can add a person with a certain role to a movie.
● A link on the MovieDetail Screen to the new Screen, to allow adding a cast and crew to
that movie.
● This link should be the only way to get to that Screen when navigating in the application.

The new Screen should look like this:

1
Then, in the second part of the exercise, we want to display the following information in the
MovieDetail Screen:

● A List with the Production Talent involved in the movie (Directors and Producers).
● A List with the cast and crew of the movie, with the total number of the cast and crew
members in the section title.

Also, we want to add a new field to the MovieDetail Form to allow a user to select a genre for
the movie.

The MovieDetail Screen at the end should look like this:

2
3
Hands-on
In this exercise, we will extend the UI of our application to allow an end-user to add cast and
crew members to a movie. Later, we want that information to be displayed next to the movie
details in the MovieDetail Screen. Let’s start with the adding cast / crew part.

Add Cast and Crew to a Movie

Before we start, it’s important to understand where the end-user will be able to actually add a
member of the cast / crew to a movie. That will only be possible when the end-user is in the
MovieDetail Screen of a particular movie.

Build the Screen

With that in mind, let’s create a new E

​ mpty Screen​, call it A
​ ddCastAndCrew​ and set it as
Anonymous. ​Since we’re coming from the MovieDetail Screen, where we already know the
MovieId, we can leverage that by passing that information to this new Screen, via input
parameter.

In this new Screen, we want to add a new person, with a certain role, to a movie. Translating
that to our data model, we want to add a new record to the PersonMovieRole Entity. Since we
already have the identifier of the movie, we just need the end-user to select the person and the
role. The Screen should look like the following screenshots:

4
Styles

To help separate the widgets on the Screen, or to add margins between them, we can use
Containers. These properties are set in the Styles area of a Container, where we can define
margins, change the size and color of the content inside, set the width, etc.

Some of the widgets already have some Containers enclosing them. We can see that by clicking
on the widget and looking at the widget breadcrumb at the bottom of the Screen.

5
If the widgets do not have any Container enclosing them, it is easy to add that by
double-clicking on the widget and selecting the correct option.

Creating the new Record in the Database

Since we’re in a scenario of creating new records for the PersonMovieRole, with no updates, it is
not relevant to fetch data from the PersonMovieRole Entity. So, we can use a​ Local Variable​ of
PersonMovieRole data type to help us save the info (person and role) that the user selected.

6
However, we still need to fetch some data from the database to help us. We need to fetch more
info about the movie for the Title of the Screen and we need to get the list of people and list of
roles in the database to populate both dropdowns. ​Challenge:​ Can we make the full name of
the person to appear in the dropdown, instead of just the first name? :)

So, now that we’re done with the UI, we need to handle the logic to actually save the
PersonMovieRole record in the database. As before, the PersonMovieRole Entity is exposed as
read-only, so we know what we have to do! H
​ int:​ Don’t forget to assign the movie identifier to
the PersonMovieRole record before calling the Server Action.

NOTE:​ The Form only has an input field for the person and for the role, however the
PersonMovieRole Entity has three reference attributes: P
​ ersonId​, ​MovieId a
​ nd ​PersonRoleId​. So,
we need to explicitly assign the identifier of the movie to the PersonMovieRole MovieId
attribute. This is very common when the Form does not have fields for all the attributes of an
Entity, and we need to programmatically assign it to a proper value before adding the record to
the database, to avoid errors in the database.

Just like in a previous exercise, we’re at a point where we can’t navigate to this new Screen. To
solve that, we need to go back to the MovieDetail Screen and create a link to this new Screen.

7
List the Production Talent and Cast / Crew

Production Talent
Now that we can add cast / crew members to a movie, we can display that information in the
MovieDetail Screen.

Below the Form, we want to list the directors and producers that worked in the movie, using a
List, with the information appearing as: ​Name (Role)​.

To get the Production Talent section of the Screen to look like this, we need to do some UI
tweaks. Below the Form, we can add the static text ​Production Talent​, enclose it in a C
​ ontainer
and then apply the ​“heading2” S
​ tyle Class​. For margins, we should switch to the​ Styles Editor
of the Container and add​ 20 px​ to the upper margin and ​10 px​ to the lower margin.

8
For the List, we need to now fetch all the People, whose Role is Director or Producer, and that
had participated in this movie. We can call that Aggregate, G
​ etProductionTalent​.

Before we finish, make sure that every member of the production talent has a link to its
PersonDetail Screen.

Don’t forget that we need to add some directors and producers to a movie, to test the Screen!

Cast and Crew

Now, for the Cast and Crew, let’s follow the same strategy and add a new List to display the
actors and crew members involved in the movie.

9
Here, we want to display the total number of cast and crew members in the section title, under
parenthesis. Other than that, you should follow the same strategy as for the production talent,
but this time for actors and crew members. Also add a link to each member of the cast and
crew to its respective PersonDetail Screen.

Add the Genre Field to the Movie Form

In the last exercise, we added the GenreId attribute to the Movie Entity. So now, it’s time to
allow the end-user to set a genre to a movie.

10
11