Creating Block Exercise

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

How-To................................................................................................................................. 4
Create a Block 4

[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 creating a block that will use input parameters, and
trigger an event. These tools will be used to help us on the following scenarios:

● By creating a block, it will be easier to focus on how information is displayed in

Scenario
In this exercise, we will begin with an existing application featuring a single module.
Within this module, there are six Screens, one is named 'EmployeeDashboard,' which
includes an Aggregate responsible for fetching all employee data.

www.outsystems.com • [email protected] 2
 Upon completion of this exercise, you will have created a block designed to retrieve and
present detailed employee information from the database.

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.

Create a Block
In this section, we'll create and implement a Block to display the information of one
Employee. This block will then be used inside the Employees Dashboard screen to
display the information of the selected Employee.

1) Under the Interface tab, right-click the MainFlow and select Add Block.

2) Set the Name of the Block to EmployeeInfo.

www.outsystems.com • [email protected] 4
 3) Right-click the EmployeeInfo Block and select Add Input Parameter.

4) Set the Name of the Input Parameter to EmployeeId and make sure the Data
Type is set to Employee Identifier.

5) Right-click the Block, and select Fetch Data from Database.

www.outsystems.com • [email protected] 5
 6) Drag the EmployeeId input parameter of the Block and drop it inside the
Aggregate.

7) From the Data tab, drag the Department entity and drop it inside the
Aggregate.

8) Likewise, drag the EmployeePicture entity and drop it inside the Aggregate.

www.outsystems.com • [email protected] 6
 Observe that the JobTitle and OfficeLocation static entities have been
incorporated into the Aggregate, given their association with the Employee
entity.

9) Return to the Interface tab, and open the EmployeeInfo Block.

10) Drag a Container and drop it inside the Block canvas.

11) Click the Align Center icon on the toolbar.

www.outsystems.com • [email protected] 7
 12) Drag an Image and drop it inside the Container created before.

13) Change the Type property to Binary Data and then set the Image Content
property to:

GetEmployeeById.List.Current.EmployeePicture.Picture

14) Set the Default Image property to User, and the Style Classes property to:

"img-circle"

www.outsystems.com • [email protected] 8
 15) Expand the GetEmployeeById Aggregate, and locate the Email attribute under
Employee entity. Then, drag it and drop it below the Image created before.

16) Make sure that the email address appears below the picture.

17) Click the Align Center icon from the toolbar to center the Email.

18) Repeat the last two steps for the PhoneNumber attribute.

www.outsystems.com • [email protected] 9
 19) In the Widget Search box type separator, then drag the Separator pattern and
drop it below the Phone.

20) Drag a Container and drop it below the Separator. Don't forget to clear the
search box.

21) Drag a Label and drop it inside the Container created in the previous step.

22) Change the text inside the Label to Job Position.

23) Using the Widget breadcrumb at the bottom, select the Label that is
surrounding the Text, and inside the Container.

www.outsystems.com • [email protected] 10
 24) Resize the Label to two columns by dragging the square market to the right.

25) Select the Text tag and then press Ctrl + B to apply a bold format.

26) Drag the Label attribute that is under the JobTitle Entity of the
GetEmployeeById Aggregate, and drop it to the right of the Label.

27) Drag another Container and drop it at the bottom of the Block (below the Job
Position container).

28) Drag a Label widget and drop it inside the Container created in the previous
step.

29) Change the text to Department, then press Ctrl + B to apply a bold format.

www.outsystems.com • [email protected] 11
 30) Select the Label that surrounds the text and change it to 2 columns.

31) Drag the Name attribute of the Department entity from the GetEmployeeById
Aggregate and drop it to the right of the Department Label.

The block should resemble the layout depicted in the provided screenshot.

32) Publish the module to save the latest changes.

Congratulations! You've successfully created a block that will retrieve and present
detailed employee information from the database.

www.outsystems.com • [email protected] 12