Using Block Exercise

Table of Contents
Outline................................................................................................................................. 2
Scenario 2

How-To................................................................................................................................. 4
Modify the Employee Dashboard screen 4
List the Employee Details 9
Use a Block 17
Establish Link Between the Screen and Block 19
On Parameters Changed 36

[email protected] © 2024 by OutSystems. All rights reserved. OutSystems is a registered trademark of OutSystems. The information contained
herein is subject to change without notice. All terms and conditions for OutSystems products and services are set forth in the
www.outsystems.com agreements accompanying such products and services. Nothing herein should be construed as constituting an additional
warranty. OutSystems shall not be liable for technical or editorial errors or omissions contained herein.
 Outline
In this exercise, we will focus on using the block created in the previous exercise that
use input parameters. These tools will be used to help us on the following scenario:

● The On Parameters Changed event will allow to refresh the block information
whenever the parent changes an input parameter of the block.

Scenario
In this exercise, we'll start from an existing application with one module. Inside that
module we have six Screens, one of them is called Employee Dashboard, and also has a
Block, called EmployeeInfo.

Currently, the Employee Dashboard screen exhibits employee details in a table format.

www.outsystems.com • [email protected] 2
 In this exercise, our objective is to transform the layout to mirror the design presented
in the provided screenshot. The area on the right is where we'll place the Block created
in the previous exercise.

We'll then implement the On Parameters Changed event handler. This will allow
refreshing the information displayed inside the block, whenever the Employee selected
changes in the parent screen.

www.outsystems.com • [email protected] 3
 How-To
This section will show you how to do this exercise with a thorough step-by-step
description. If you already finished the exercise on your own, great! You don't need
to do it again. If you didn't complete the exercise, that's fine! We are here to help you.

Modify the Employee Dashboard screen

We'll enhance the Employee Dashboard screen by dividing it into two distinct sections.
On the left side, we'll have the list of employees along with their details.

Before we begin to use the EmployeeInfo block, let's first proceed by removing the
Table widget from the EmployeeDashboard screen and using the List widget to display
the employee details.

1) In the Interface tab, open the EmployeeDashboard screen.

2) Click on the Name header cell, hover over Header cell, and then right-click on
the Table.

www.outsystems.com • [email protected] 4
 3) Select Delete in the right-click menu. The table will be deleted.

www.outsystems.com • [email protected] 5
 4) While the EmployeeDashboard screen is open, proceed to the Widget Tree
within the Interface tab. You will use the Widget Tree to incorporate the
required widgets onto the screen.

5) Drag a Container to the MainContent in the Widget Tree.

6) Reduce the width of the Container to five columns.

www.outsystems.com • [email protected] 6
 7) Drag a List onto the newly added Container.

8) Set the value of the Source property in the List properties window to:

GetEmployees.List

9) Drag another Container onto the List widget.

10) Search for List Item Content and add it to the Container created in the
previous step.

Remember to clear the Search field after adding the widget.

www.outsystems.com • [email protected] 7
 11) Expand List Item Content to reveal four Placeholders.

12) Drag a Container onto the Right placeholder.

13) Add an Icon widget within the newly created Container.

www.outsystems.com • [email protected] 8
 14) Search and select the angle right icon in the Pick an Icon window.

15) Publish the module to save the latest changes.

With these steps, you have successfully modified the layout of the EmployeeDashboard
screen.

List the Employee Details

In this segment, we will fetch and list the employee name and the Job titles on the left
area of the screen.

1) Navigate to the Elements tab within the Interface section and expand the
EmployeeDashboard.

www.outsystems.com • [email protected] 9
 2) Open the GetEmployees aggregate through a double-click, and observe as the
Aggregate window reveals the employee data.

3) From the Data tab, drag the EmployeePicture entity to the Aggregate window.

4) Ensure that the With or Without condition is set for all joins.

5) Edit the name of the Aggregate to GetEmployees.

6) Return to the Interface tab, open EmployeeDashboard, and expand

EmployeeDashboard > GetEmployees > Employee.

www.outsystems.com • [email protected] 10
 7) Drag the FirstName attribute to the Title segment of the List Item Content
widget.

8) Select the displayed First Name and click on Expression.

9) Set the Value property of the Expression to:

GetEmployees.List.Current.Employee.FirstName + " " +

GetEmployees.List.Current.Employee.LastName

www.outsystems.com • [email protected] 11
 10) Drag the Name attribute of the Department entity onto the Content
placeholder.

11) In the Widget Tree, select the Container within the List and set its Style class
property to:

"card padding-m margin-bottom-s"

www.outsystems.com • [email protected] 12
www.outsystems.com • [email protected] 13
 This will effectively segment each employee in the List by applying padding and
margin to each individual card.

www.outsystems.com • [email protected] 14
 12) Right-click the employee name in the List and select Link to >
MainFlow\EmployeeDetails.

13) Set the EmployeeId input parameter in the Link properties to:

GetEmployees.List.Current.Employee.Id

www.outsystems.com • [email protected] 15
 This configuration enables users to navigate to the EmployeeDetails screen,
allowing them to update the details of the selected employee.

14) Publish the module to save the changes.

15) Open the application in the browser.

www.outsystems.com • [email protected] 16
 16) Log in with the Alice Manager user (Username: demployee, Password: outsystems
).

17) The Employee Dashboard screen presents employee data in a list format.
Clicking on any employee allows you to navigate to the Employee Details page,
facilitating the review and update of the selected employee's information as
needed.

Use a Block
In this section, we'll use the Block that was created in the previous section. This Block
will be used inside the EmployeeDashboard Screen to display the information of an
Employee.

1) In the Interface tab, confirm that the EmployeeDashboard Screen is displayed.

www.outsystems.com • [email protected] 17
 2) Drag a Container onto the right side of the screen.

3) Drag the EmployeeInfo Block and drop it within the previously added
Container.

4) Right-click on EmployeeDashboard, and choose Add Local Variable. This

variable is intended to store the employee ID of the currently selected
employee.

www.outsystems.com • [email protected] 18
 5) Define the Name of the variable as SelectedEmployeeId, and ensure the Data
Type is set to Employee Identifier in the Local Variable properties window.

6) Select the In the properties of the instance of the Block and set the EmployeeId
input parameter to SelectedEmployeeId.

7) Publish the module and then open it in the browser.

8) Log in with the Alice Manager user (Username: amanager, Password: outsystems).

Observe that the block is not showing employee information as there is

currently no established communication link between the employee details on
the left and the block. Furthermore, the functionality of the right button is
currently non-operational.

Establish Link Between the Screen and Block

In this segment, we will establish a communication link between the screen content

www.outsystems.com • [email protected] 19
 and the block. This linkage ensures that upon clicking the right arrow, relevant
information about the currently selected employee appears in the EmployeeInfo Block.

1) Return to the Service Studio and open the EmployeeDashboard screen.

2) In the Interface tab, open the Widget Tree.

3) Right-click the Container in the Right node, and select Enclose If.

4) Set the condition to:

SelectedEmployeeId <> GetEmployees.List.Current.Employee.Id

www.outsystems.com • [email protected] 20
 5) If the condition described above is met, the interface should feature a right
arrow. Expand the If > True > Container section and confirm that the True
condition is associated with the display of the angle-right icon.

6) In the event of the condition being false, that is when the block is displaying the
selected employee details, showcase a left arrow. Add an Icon widget into the
False condition.

www.outsystems.com • [email protected] 21
 7) Select the angle left icon within the Pick an Icon window.

www.outsystems.com • [email protected] 22
 8) When the right arrow is clicked, the corresponding details of the employee
should display on the Block. To accomplish this, select the Container within the
List and set the Event property to onclick.

www.outsystems.com • [email protected] 23
 9) In the Handler property, select New Client Action from the drop-down menu.

10) Set the Name of the action to ShowEmployeeInfo.

www.outsystems.com • [email protected] 24
 11) Drag If and drop it between Start and End.

12) Label If as SelectedEmployeeId = employee id? and set the condition to:

SelectedEmployeeId = GetEmployees.List.Current.Employee.Id

13) Drag an Assign beside If and set its properties as follows:

● Label: SelectedEmployeeId = True

● Variable: SelectedEmployeeId

www.outsystems.com • [email protected] 25
 ● Value: NullIdentifier()

14) Create the True connector between If and Assign.

15) Drag another Assign onto the False connector and set its properties as follows:

● Label: SelectedEmployeeId = False

● Variable: SelectedEmployeeId

www.outsystems.com • [email protected] 26
 ● Value: GetEmployees.List.Current.Employee.Id

www.outsystems.com • [email protected] 27
 16) As the SelectedEmployeeId variable should have an outgoing connector, drag
an End node beside the Assign of the True condition.

17) Drag a connector between Assign and End.

www.outsystems.com • [email protected] 28
 18) Navigate to the Widget Tree within the Interface tab, expand the Container
that includes the Block.

19) Right-click on MainFlow\EmployeeInfo and select Enclose If.

20) Set the condition to

SelectedEmployeeId <> NullIdentifier()

www.outsystems.com • [email protected] 29
 When the SelectedEmployeeId has a non-null value, the Block will showcase the
details of the corresponding selected employee.

21) Drag a Container onto the True node.

www.outsystems.com • [email protected] 30
 22) Move MainFlow\EmployeeInfo to inside the previously created Container.

Within the False section, we will design the following content to be showcased
when no employee is selected.

23) Place two Containers within the False node.

24) Drag the Icon widget onto the first Container, and select the Search icon in the
Pick an Icon window.

www.outsystems.com • [email protected] 31
 25) Set the Size of the icon to 4x font size in the Icon properties window.

www.outsystems.com • [email protected] 32
 26) With the Search icon selected on the screen, click Align center in the toolbar.

27) Place a Text widget within the second Container in the False node.

www.outsystems.com • [email protected] 33
 28) Set the Text property of the widget to Select an Employee from the left, and align
it to the enter.

29) Drag a Container onto the False node and move the above two created
Containers within this Container.

30) Set the Style Classes property of the newly added Container to:

"heading4 text-neutral-6 - margin-top-xl"

www.outsystems.com • [email protected] 34
 31) Publish the module to save the latest changes.

32) Open the application in the browser and log in with the Alice Manager user (
Username: amanager, Password: outsystems).

33) In the Employee Dashboard, select Deloria Mclnility from the list to the left.
Notice that on the right, the Block is displayed.

www.outsystems.com • [email protected] 35
 Clicking on another Employee on the list to the left does not refresh the
displayed information. This is happening because the handler for On
Parameters Changed event of the EmployeeInfo block was not defined yet.

On Parameters Changed
In this section, we'll implement the On Parameters Changed event handler. This will
improve the usability of our application, by allowing clicking the Employees on the list
to the left and updating the information on the right inside the Block.

1) Return to Service Studio, go to the Elements tab, and select the EmployeeInfo
Block.

www.outsystems.com • [email protected] 36
 2) Within the Block properties, open the dropdown of Event property, and select
the On Parameter Changed event.

www.outsystems.com • [email protected] 37
 3) Rename the newly created client action from OnParametersChanged to Refresh.

4) Drag the GetEmployeeById aggregate and position it between the Start and
End.

5) Publish the module and retest the application.

6) Select one Employee, then click on another one. Witness the Employee
information being dynamically updated as expected.

Congratulations on the successful implementation of the following features:

● Integration of the EmployeeInfo Block within the Screen, allowing for the
retrieval and display of information on the screen.

www.outsystems.com • [email protected] 38
 ● Implementation of the Parameters Changed event, ensuring the seamless
refresh of block information whenever there is a modification in the input
parameters by the parent.

www.outsystems.com • [email protected] 39