7.6x Web Blocks Exercise

Web Blocks Exercise
OutSystems Inc. 5
901 Peachtree Dunwoody Road, N.E. Building C, Suite 495, Atlanta, GA 30328 1
Table of Contents
Introduction 2
Table of Contents 3
Create a Web Block for Star Ratings 4
Add the Web Block to the Screen 12
Make the Stars in the Block Clickable 16
Make the Screen Handle Block Events 21
End of Lab 29
OutSystems Inc. 5
Introduction
In this Lab, we will introduce the concept of Web Blocks. These Blocks promote UI reusability,
since they can be defined once, and then used in multiple Screens (or other Blocks), just by
simply dragging and dropping them.
For this purpose, we will add the functionality of rating a movie, by clicking on stars in the
MovieDetail Screen. Also, on the same Screen we will display the average rating of the movie,
considering all the ratings given at that point to the movie.
To be used on both scenarios, the Web Block will display a certain number of stars, with the
specified “rating” amount filled in.
To help us design a rating based on stars, we will create a loop in the Preparation of the Web
Block, to determine which stars should be “painted” and which ones are not.
In summary, in this specific exercise lab, we will:
● Create reusable Web Blocks

● Learn how to trigger Events from a Web Block to its parent
● Define the logic to handle Events from Web Blocks
OutSystems Inc. 5
Create a Web Block for Star Ratings
In this part of the exercise, we will create a reusable Web Block, with some UI and functionality
that can be included in any Screen or Block (except itself). The Web Block will display a set
number of stars, with the specified “rating” amount filled in. In the M
ovieDetail Screen, it will
be used to display not only the current user’s rating, but also the average rating from all
OSMDb users.
The Web Block will display a list of consecutive stars that will be displayed horizontally. Some of
these stars will be filled (representing the rating given) and some hollowed. For example, a
rating of 3 out of 5 would have 3 filled stars and 2 hollow stars.
We will support this particular behavior by converting a n

umeric rating passed as Input
Parameter into a list of Booleans. This list will have a maximum rating number of elements. The
list will have the value TRUE until the numeric rating, and false from the numeric rating to the
maximum rating. Here are some examples::
● for a rating of 3 (out of 5), the list would be [TRUE, TRUE, TRUE, FALSE, FALSE]
● for a rating of 1 (out of 3), the list would be [TRUE, FALSE, FALSE]
In this scenario, we will start with a fixed maximum rating of 5, while the numeric rating will be
an Input Parameter of the Web Block.
1) Add a Web Block called StarDisplay t o the MainFlow. The Web Block should have an
Integer R
ating as Input Parameter, that represents the rating given. Also, we need a
Preparation that implements the logic of transforming a rating into a Boolean List,
described above, with a maximum rating of 5
. For that we need a Local Variable of type
Boolean List and to implement a loop. This loop will assign to the List a TRUE value on the
first elements until the Rating value, and FALSE from R
ating t o the maximum rating. H
int:
Use a Local Variable to help control the loop.
a) In the Interface tab, right-click the MainFlow and select A

dd Web Block. Set its
Name to StarDisplay.
OutSystems Inc. 5
b) Right-click the S
tarDisplay Block and select Add Input Parameter. Set its N
ame to
Rating a
nd Data Type to Integer.
c) Right-click the S
tarDisplay Block and select Add Preparation.
d) In the Preparation we want to convert the Rating to a List of Booleans. So, we

need to create a Local Variable RatingList, w
ith D
ata Type Boolean List, in the
Web Block.
NOTE: A Web Block, as any Screen, can have Input Parameters, Local Variables,
Preparation and Screen Actions.
e) Now, we need to implement a loop to help us fill the RatingList Variable with the
boolean values. To help control the loop and populate the list, we need a L
ocal
Variable Counter, of DataType Integer. This will be the “gatekeeper” to make sure
the loop stops, and to make sure new values are added to the list.
f) Drag and drop an I f to the Preparation’s Action flow. Set its condition to
Counter < 5
Here, the value 5 indicates the Max Rating allowed, meaning that a rating of a
movie can go as high as 5. This will be improved in later labs.
OutSystems Inc. 5
g) Drag and drop a Run Server Action s tatement to the right of the If.
h) In the Select Action dialog, type in L istAppend i n the S

earch Actions filter and
double-click ListAppend to select it.
i) On the L
istAppend properties, set L
ist to RatingList and set the E
lement to the
expression Counter < Rating.
This step adds an element to the end of the RatingList. This operation only runs if
the Counter Variable is smaller than 5 (maximum rating), and adds the result of
the Boolean Condition: T
rue i f the Counter is smaller than the Rating; False i f the
Counter is equal or greater than the Rating. This gives us the desired behavior.
j) Drag a second outbound connector from the If to the L

istAppend. This connector
will have the T
rue l abel.
OutSystems Inc. 5
k) Drag and drop an A
ssign under the L
istAppend. Connect the L
istAppend to the
Assign statement, and the Assign statement back to the If statement, to close the
loop.
l) Add the following assignment to the Assign statement
Counter = Counter + 1
This will guarantee that the Counter variable increases in each iteration of the
loop. Otherwise, the If Condition would never fail and it would cause an infinite
loop.
m) The Web Block’s Preparation should look like this
2) The S
tarDisplay Web Block must use the R
atingList Variable as a source to a L
ist
Records. The List Records will display a filled, or hollowed, star icon, depending on the
value of each of the list’s items: if it is True, then a filled star appears, otherwise a
hollowed star appears.
OutSystems Inc. 5
a) Open the StarDisplay Web Block in the canvas.
b) Drag and drop a List Records into the StarDisplay Block’s main display area. Set
its N
ame to S
tarIterator. Set its S
ource Record List to RatingList and its L
ine
Separator to None.
c) Click on the magnifying glass, to the right of the module tabs, to expand the
Search Box.
d) Type I con i n the Search Box. All the elements inside the current module with that
substring in their name will appear.
e) Hover the mouse over the dots on the left of the Icon element. Notice that the
cursor turns into a hand, indicating it can be grabbed.
OutSystems Inc. 5
f) Drag and drop the Icon inside the List Records Widget.
NOTE: The results of a search can also be double-clicked instead of drag and
dropped. This will move the focus of Service Studio to where that element is
defined. This is an invaluable tool to locate elements in a complex module.
g) As you want your Icon to be a star, in its properties, set its N

ame (second)
property to star u
sing the drop down.
h) Right-click the Icon and select Enclose in If. This will move the (filled) star to the
True branch of the I f Widget.
i) Drag and drop another I con into the False branch of the If. On this one, set its
(second) N
ame to star_o (a hollow star).
j) To determine if the star is filled (i.e. less than or equal to the rating) or hollow, set
the Condition property for the If to:
StarIterator.List.Current
OutSystems Inc. 5
NOTE: To recap what was achieved in the steps above: the Preparation has a
loop that produces a list of Booleans, that are True all the way up to the
specified Rating and False from there on.
The L
ist Records is using that list as source and iterates over it: on each
element in the list, a star icon is displayed – filled if the element is true, hollow
if it is not.
The C
urrentRowNumber of the List Records indicates the row number, so
while the row number is smaller than the Rating, the star will be filled. The
Rating will depend on the star we clicked.
3) Add a Placeholder called S

uffix, after the List Records, so that Screens that use this Web
Block can optionally add other content into the Block.
a) Drag a Placeholder immediately after the List Records and set its Name to Suffix.
b) In the Styles Editor of the Placeholder and set the W

idth t o Fill.
OutSystems Inc. 5
NOTE: A Placeholder allows the developer to define an area (a “hole”) in a Web
Block, that can (optionally) receive Screen content from where it is being used.
When a Block is used, its Placeholders will be highlighted with the specified
Name and occupy the specified W
idth, even if the parent Screen doesn’t
specify any content to be injected on them. By setting the Placeholder’s Width
to Fill, the Suffix Placeholder will use the available space on the parent.
c) Ensure that the S

uffix Placeholder is really after the List Records, and not inside.
The full S
tarDisplay Block should have the following structure
OutSystems Inc. 5
Add the Web Block to the Screen
A new instance of a Web Block is created when it’s placed in the parent Screen or Block. Here,
we will add the new Web Block to the MovieDetail Screen. This block instance will be for the
purpose of showing the average movie star rating.
1) Add a new row to the M

ovieDetail Form, to contain an instance of the StarDisplay W
eb
Block. Make it match the layout of the rows created via scaffolding.
a) Open the MovieDetail Screen.
b) Drag and drop a Container into the MovieForm, between the rows containing
the Title and the Y
ear Inputs. Set the M
argin-top to 10px.
c) Drag and drop a Label i nside the new Container. Set its V
alue to Average Rating.
d) Adjust the W
idth of the Label so that it is 4 col.
e) Drag and drop the StarDisplay Block to the right of the Label, inside the
Container.
OutSystems Inc. 5
f) Right-click the S
tarDisplay Block instance in the Screen and select Enclose in
Container. Set the new Container’s Width to 6 col and make sure the Margin-left
is set to (Auto). This will make the StarDisplay Block horizontally aligned with the
other inputs.
g) Set the new Container’s Name to AverageRatingContainer.
h) The top part of the Screen’s MainContent should have the following structure
2) Add a new A
ggregate to the MovieDetail Screen Preparation, that determines the
average rating, as well as the total number of reviews, for the current movie. Pass the
average rating to the S
tarDisplay Block, as an Input Parameter, and display the total
number of reviews in the S
uffix Placeholder of the Block.
a) Open the MovieDetail Screen Preparation.
OutSystems Inc. 5
b) Drag and drop the UserMovieRating E
ntity, just before the End statement, to
create an A
ggregate to get all the ratings. Set its Name t o GetAverageRating.
c) Open the GetAverageRating Aggregate and add the following filter:
UserMovieRating.MovieId = MovieId
d) From the R
ating attribute context menu, select Average to create a new
aggregated column named RatingAvg.
e) From the R
ating attribute context menu, select Count to create a new aggregated
column named Count.
f) The Aggregate should look something like this
g) Open the MovieDetail Screen and select the S

tarDisplay Block added in the
previous steps.
h) The S
tarDisplay Block expects an Input Parameter R
ating. Select the average
calculated in the GetAverageRating Aggregate, by setting the Rating argument
to GetAverageRating.List.Current.RatingAvg.
i) In the StarDisplay Block’s Suffix Placeholder, add an E

xpression with the
following Value
"out of " + GetAverageRating.List.Current.Count + " ratings"
OutSystems Inc. 5
j) This section of MovieDetail should look like this
k) Click the 1-Click Publish b

utton to publish the application, and access it using
your browser.
l) Navigate to the M
ovieDetail Screen, by selecting an existing movie. The Screen
should look like this
OutSystems Inc. 5
Make the Stars in the Block Clickable
Now that we have used the Web Block to display the Average Rating, it’s time to actually allow
the user to rate a movie. For that, we will need to add a new instance of the Web Block to the
Screen. However, the StarDisplay Web Block needs to be modified to allow the stars to be
clickable, so that users can rate the movies. Let’s do this, before we add a new instance of the
Web Block to the Screen.
1) Make each of the stars in the StarDisplay Web Block clickable, to allow setting the rating
selected. Use an Input Parameter to determine if the clickable behavior is applicable.
a) In the Interface tab, right-click the S

tarDisplay Block and A
dd Input Parameter. Set
its N
ame to A
llowClicking and make sure its Data Type is Boolean.
b) With the StarDisplay Block opened, right-click the f illed star icon, select L ink to
and choose ( New Screen Action).
c) Rename the new Screen Action to StarClicked.
d) Right-click the hollow star and link it to the same Screen Action.
OutSystems Inc. 5
e) In both Links, set the E
nabled property to A
llowClicking, and the M
ethod to Ajax
Submit. In OutSystems, we can select multiple elements and configure common
properties. So, in this step we can select both links in the Widget Tree and then
set up the needed properties.
NOTE: Setting the E

nabled property to the value of the Input Parameter
AllowClicking allows disabling or enabling the Links based on the value of the
parameter received. We can now control the logic of the application, when we
allow the stars to be clickable.
f) Your TrueChange tab will show the following error
g) By double-clicking the error, Service Studio opens the MovieDetail Screen and
selects the instance of the StarDisplay Web Block with the error.
OutSystems Inc. 5
h) Set the value of the Input Parameter AllowClicking. I n this instance, s et it to
False, as the clicking is not applicable.
NOTE: In this case, we are showing the Average Rating for a movie, and
therefore we do not want the stars to be clickable. Later, we will reuse this
Web Block to allow the user to rate movies, with clickable stars.
2) When a star icon is clicked, we need to send a notification to the parent page, containing
the selected rating. Since a Web Block does not have the context of the parent and
vice-versa, the Screen does not know in which star the user clicked. We need to inform
the Screen, by triggering an Event in the Block, that needs to be handled in the Screen.
a) Right-click the StarDisplay, select A

dd Event and name it StarClickedEvent. Set the
Is Mandatory property to N
o.
b) Right-click on the S
tarClickedEvent and add an I nput Parameter with the name
StarClicked and make sure its Data Type is an Integer.
OutSystems Inc. 5
c) Double-click the StarClicked S
creen Action and drag the StarClickedEvent into
the flow and set the StarClicked parameter to
StarIterator.List.CurrentRowNumber + 1

NOTE: When you add an Event to the logic inside a Block (in this case, the
StarClicked Action), you need to catch and handle the StarClickedEvent
wherever the Block is instantiated. This allows Web Blocks to communicate
upward in the hierarchy to their parents.
OutSystems Inc. 5
Make the Screen Handle Block Events
Here, we will add a new instance of the StarDisplay Web Block. This will allow the user to rate
movies, as well as see his own rating.
1) Add a new instance of the existing S

tarDisplay Web Block to the M
ovieDetail Screen.
a) Open the Preparation of the M

ovieDetail Screen.
b) Drag and drop the UserMovieRating E

ntity, just before the End statement of the
Preparation flow to produce an A
ggregate. Set its N
ame t o GetUserMovieRating.
c) Double-click the Aggregate and add two filters
UserMovieRating.MovieId = MovieId
UserMovieRating.UserId = GetUserId()
d) In the MovieDetail Screen, drag a new Container and drop it above the
comments pane on the right, but still inside the SideBar Container.
e) Set the Name of the Container to UserRatingContainer.
f) Drag the StarDisplay Web Block inside the Container created.
g) Set the Rating parameter to

GetUserMovieRating.List.Current.UserMovieRating.Rating a
nd the AllowClicking to
True.
OutSystems Inc. 5
h) Under Events, set the H
andler p
roperty to (New Screen Action). OnRatingEvent and
the StarClicked p
arameter to StarClicked.
This creates a new Screen Action called StarDisplayStarClickedEvent. Rename it

to OnRatingEvent.
NOTE: Since this instance of the Web Block is the one that the end-user will
interact with, to choose the movie rating, we need to define an Handler for the
Event triggered within the Block, so that on the Screen we know which star was
clicked on. Remember that since the stars are defined inside the Block, the
Screen itself does not know which star was clicked on, since it does not have
access to the scope of the Block.
i) Confirm that the OnRatingEvent Action has an Input Parameter called StarClicked.
This will make sure the Handler will have access to the star that was clicked on by
the user.
OutSystems Inc. 5
j) We now have an error on the instance of the StarDisplay Block. The error is
related to the input parameter introduced in the previous step. To fix it, we need
to pass a value to the OnRatingEvent. In the dropdown, select the StarClicked
value.
This is the actual value passed by the Event when triggered (its Input Parameter).
k) Add an If Widget on the left of the StarDisplay Web Block. This If will show
different information, taking into consideration if the user already rated the
movie or not.
l) Set the Condition property of the If Widget to
GetUserMovieRating.List.Empty
OutSystems Inc. 5
m) In the True branch of the If Widget, add the following text Rate this movie:, as no
Rating was given yet. In the False branch type Y
our rating:.
2) Create the logic to create or update the user rating, and refresh only the parts of the
Web Screen related to movie ratings.
a) Open the OnRatingEvent Screen Action in the M

ovieDetail Screen.
b) Add an Assign statement and set the following assignments to define the rating
to the movie, given by the user currently logged in.
GetUserMovieRating.List.Current.UserMovieRating.UserId = GetUserId()
GetUserMovieRating.List.Current.UserMovieRating.MovieId = MovieId
GetUserMovieRating.List.Current.UserMovieRating.Rating = StarClicked
NOTE: The first two assignments are necessary, when creating a new rating, to
get the user logged in and to assign the movie that the user is rating. When
updating, the user and movie are already known. The third assignment gets
the star that was clicked and assigns it to the Rating given to the movie. This
way, we have the UserMovieRating record ready to be added to the database.
c) After the Assign statement, add the C

reateOrUpdateUserMovieRating Entity
Action. Set the S
ource property to G
etUserMovieRating.List.Current, to create or
update the rating in the database.
d) Add a Refresh Data statement to the Action flow just before the End statement,
and set the D
ata Source to GetUserMovieRating, to re-execute the query and
return the rating to be updated, if it exists.
e) Add an Ajax Refresh statement, and select U

serRatingContainer as the Widget to
be refreshed, to display the new rating on the Screen.
f) Add another Refresh Data statement and select GetAverageRating as the Data
Source, to recalculate the average rating with the new rating.
OutSystems Inc. 5
g) After this last statement, add an A
jax Refresh statement, and set the Widget
property to AverageRatingContainer, to display the new average.
h) Set the Animation Effect to Highlight, to provide visual feedback.
OutSystems Inc. 5
i) The O
nRatingEvent Screen Action should look like this
j) Click the 1-Click Publish b

utton to publish the application, and access it using
your browser.
k) Navigate to the M
ovieDetail Screen, by selecting an existing movie. Rate the
movie by clicking the stars in the right sidebar.
OutSystems Inc. 5
l) Notice that the rating did not change. This was e
xpected, since the logic needs
some extra steps to make this operation work properly.
To understand why, we need to analyze how the Screen is structured and also the
lifecycle of traditional web applications. When we navigate to the Screen for the
first time, the RatingList a
nd the Counter Local Variables are set to their default
values (all-False list and 0 respectively). When the Web Block is built in the Screen,
its Preparation runs and the loop is executed. When the Preparation runs, the
Counter Variable is now 5
. Now, when the end-user clicks on a star to give a
rating, using the Ajax Submit method, the Preparation of the Block runs again,
but the state of the variables are kept. So, as the Counter is still at 5, the loop in
the Preparation does not run, since the If condition will be evaluated to False, and
the RatingList is not updated. To solve this issue, the Preparation needs to begin
with the Counter being reset to zero.
Also, we have another problem to fix. The ListAppend Action always adds an
element to the end of the List. On a second rating, we would add five more stars
next to the already existing 5, resulting in 10 stars, and so on. To avoid this issue,
we need to reset the List as well, by clearing all its values, before a new Rating is
given. That needs also to be done in the Web Block’s Preparation.
3) Reset the Counter and RatingList, before a new Rating is calculated and the new stars
are built.
a) Open the Preparation of the S

tarDisplay W
eb Block.
OutSystems Inc. 5
b) Drag and drop a Run Server Action statement before the If statement.
c) In the Select Action dialog, choose the ListClear A

ction. This Action removes all
elements from a List.
d) In the List p
roperty of the Action, select the RatingList Local Variable.
e) Drag and drop a new A

ssign statement, right after the ListClear and before the If.
Set its L
abel t o Reset Counter.
f) Add the following assignment, to reset the Counter:
Counter = 0
g) Set the Label o

f the other Assign to Increment Counter.
OutSystems Inc. 5
h) The Preparation should look like this:
i) Publish the module and open the application in the browser. Make sure that the
ratings work properly.
OutSystems Inc. 5
End of Lab
In this Lab, we created a reusable Web Block and learned that Web Blocks can be instantiated
multiple times in the same Web Screen. In our case, it was used not only to allow a user to rate
a movie, but also to display the average rating from all of the ratings made.
In one of the instances of the Block, the stars were clickable, to allow a user to rate, while in the
other part, the stars were only for displaying purpose (average rating).
We also covered how to send notifications from a Web Block to its parent using Events. Finally,
we also determined how the parent of a Web Block handles the events triggered, using Screen
Actions as Event Handlers, to make sure that the parent had a proper answer to the Event.
OutSystems Inc. 5

7.6x Web Blocks Exercise

Uploaded by

Document Informationclick to expand document information

Copyright:

Available Formats

7.6x Web Blocks Exercise

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

7.6x Web Blocks Exercise

Uploaded by

Copyright:

Available Formats

Web Blocks Exercise

Create a Web Block for Star Ratings 4

Add the Web Block to the Screen 12

Make the Stars in the Block Clickable 16

Make the Screen Handle Block Events 21

In summary, in this specific exercise lab, we will:

● Create reusable Web Blocks

We will support this particular behavior by converting a n

a) In the ​Interface​ tab, right-click the ​MainFlow​ and select A

d) In the Preparation we want to convert the Rating to a List of Booleans. So, we

h) In the ​Select Action​ dialog, type in L​ istAppend i​ n the S

j) Drag a second outbound connector from the If​ ​to the L

l) Add the following assignment to the Assign statement

m) The Web Block’s Preparation should look like this

g) As you want your Icon to be a star, in its properties, set its N

3) Add a ​Placeholder​ called S

b) In the ​Styles Editor​ of the Placeholder and set the W

c) Ensure that the S

1) Add a new row to the M

a) Open the ​MovieDetail​ Screen.

g) Set the new Container’s ​Name​ to ​AverageRatingContainer​.

a) Open the ​MovieDetail​ Screen Preparation.

c) Open the ​GetAverageRating​ Aggregate and add the following filter:

f) The Aggregate should look something like this

g) Open the ​MovieDetail​ Screen and select the S

i) In the ​StarDisplay​ Block’s ​Suffix​ Placeholder, add an E

"out of "​ + GetAverageRating.List.Current.Count + "​ ratings"

k) Click the ​1-Click Publish b

a) In the Interface tab, right-click the S

c) Rename the new Screen Action to ​StarClicked​.

NOTE:​ Setting the E

f) Your ​TrueChange​ tab will show the following error

a) Right-click the StarDisplay, select A

1) Add a new instance of the existing S

a) Open the Preparation of the M

b) Drag and drop the ​UserMovieRating E

c) Double-click the ​Aggregate​ and add two filters

e) Set the ​Name​ of the Container to ​UserRatingContainer​.

f) Drag the ​StarDisplay​ Web Block inside the Container created.

g) Set the ​Rating​ parameter to

This creates a new Screen Action called ​StarDisplayStarClickedEvent​. Rename it

l) Set the ​Condition​ property of the If Widget to

a) Open the ​OnRatingEvent​ Screen Action in the M

c) After the Assign statement, add the C

e) Add an ​Ajax Refresh​ statement, and select U

h) Set the ​Animation Effect​ to ​Highlight​, to provide visual feedback.

j) Click the ​1-Click Publish b

a) Open the Preparation of the S

c) In the ​Select Action​ dialog, choose the ​ListClear A

e) Drag and drop a new A

f) Add the following assignment, to reset the Counter:

g) Set the ​Label o

You might also like

a) In the Interface tab, right-click the MainFlow and select A

h) In the Select Action dialog, type in L istAppend i n the S

j) Drag a second outbound connector from the If to the L

3) Add a Placeholder called S

b) In the Styles Editor of the Placeholder and set the W

a) Open the MovieDetail Screen.

g) Set the new Container’s Name to AverageRatingContainer.

a) Open the MovieDetail Screen Preparation.

c) Open the GetAverageRating Aggregate and add the following filter:

g) Open the MovieDetail Screen and select the S

i) In the StarDisplay Block’s Suffix Placeholder, add an E

"out of " + GetAverageRating.List.Current.Count + " ratings"

k) Click the 1-Click Publish b

c) Rename the new Screen Action to StarClicked.

NOTE: Setting the E

f) Your TrueChange tab will show the following error

b) Drag and drop the UserMovieRating E

c) Double-click the Aggregate and add two filters

e) Set the Name of the Container to UserRatingContainer.

f) Drag the StarDisplay Web Block inside the Container created.

g) Set the Rating parameter to

This creates a new Screen Action called StarDisplayStarClickedEvent. Rename it

l) Set the Condition property of the If Widget to

a) Open the OnRatingEvent Screen Action in the M

e) Add an Ajax Refresh statement, and select U

h) Set the Animation Effect to Highlight, to provide visual feedback.

j) Click the 1-Click Publish b

c) In the Select Action dialog, choose the ListClear A

g) Set the Label o