3.5. Creating and Downloading An Employee Resume - en-US

Creating and Downloading an Employee Resume
Table of Contents
Outline................................................................................................................................. 2
Scenario 2
Generating a Resume 4
How-to................................................................................................................................. 7
Getting Started 7
Installing a Component from the Forge 7
Referencing the Component 9
Implementing the Download PDF Feature 11
Download Button 12
Resume Screen 17
Design the UI for the Employee's Details 23
Add Projects to the Resume 33
Logic to Create and Download the PDF 34
Wrapping up......................................................................................................................40
References 40
[email protected] © 2021 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 tutorial, you will continue to extend the Employee Directory application, this time
implementing a resource that will allow us to create a resume in a PDF file and
download it.
To implement this functionality we want to follow those requirements:
● Generate a resume based on the user's profile information.
● The resume should have the employee's personal information such as name,
biography, and email.
● The resume should also include the projects led by the employee.
Scenario
The Employee Directory app at this point should have five Screens:
● The Dashboard Screen, which has a list of the newest five newcomers, and a list
of the employee's birthdays of the current month. This is the current default
Screen of the application.
www.outsystems.com • [email protected] 2
● The Employees List, which has a list of employees with filters and pagination.
● The Edit Employee Screen, which allows us to edit the employee's data,
including the employee picture.
● The Project List, which has a list of projects with filters and pagination.
● The Edit Project Screen, which allow us to edit or create a project, defining the
Project Leader associated.
You will now expand this app with an extra Screen and functionality.
Generating a Resume
In this tutorial, you will create the logic and UI to allow the user to download a resume,
based on the employee's information displayed in the Edit Employee screen, including
the projects.
It will be your first contact with a Forge Component, and the process to define
dependencies in a project.
In the Employee Directory application, we will need to do three major steps to achieve
the objective:
● Add a Button in the EmployeeDetail Screen to download a pdf.
● Link the Button to a new Screen that will have the look and feel of the
employee's resume.
● Define the logic in the application to download the PDF with 2 simple drag-and-
drops, leveraging the Ultimate PDF component.
How-to
In this section, we'll show a thorough step-by-step description of how to implement the
scenario described in the previous section.
Getting Started
In this tutorial we are assuming that you have already followed the previous tutorials,
and have the five Screens and logic screens and logical.
In case you haven't yet created, it is important to go back to the previous tutorials, and
create the application.
To start this exercise, we need the Service Studio with the module EmployeeDirectory
opened. You should see the Screen below with the source of our application.
Installing a Component from the Forge

The OutSystems Forge is a repository of reusable, open code modules, connectors, UI
components, and business solutions to help speed up app delivery time. To generate
and download a PDF file, we will leverage the Ultimate PDF Forge component.
The first step is to then install it in your environment, so we can then use it in your app.
1) In Service Studio, click on the Forge tab located on the left-top.
2) On the search box type Ultimate PDF and click on Search. Click on the first
option to open the details of this component.
3) Click on Install... to start the installation process.
If by any chance you find some compatibility warnings at this stage, do not
worry. Sometimes we may have different versions from related components,
which may cause this incompatibility. So, assuming that it is an environment
created for learn purpose, you can click on Force Install.
This will take you back to the main applications' area in Service Studio. You will
see the app being installed. It takes a while to finish, be patient.
4) After the installation is finished, you will see the app available in the
environment.
Referencing the Component

Moving back to our application, the first thing that you want to do is to reference the
elements from the Ultimate PDF component that you will need in the Employee
Directory app. bring the references from the component to the application module.
1) Open the EmployeeDirectory module to go back to our application.
2) Click on the socket icon to open the Manage Dependencies box.
This option allows that we can reference any public elements from other
applications that exist in the environment. In this case, we will search and
reference the elements we want from the Ultimate PDF application.
3) With the toggle All selected (1), type UltimatePDF on the search box (2), and
click to open the dependencies options. Select PrintLayout and ScreenToPDF
(3).
These are visual elements that we will use to generate the PDF.
4) Still in the same dialog, roll down the mouse wheel, select
OnApplicationReady_UltimatePDF (1) and ScreenToPDF_OnInitialize (2). Click
Apply when it's done.
5) Publish the module to save the changes.
Implementing the Download PDF Feature

Now that we have everything that we need, it's time to implement the feature to
download the PDF.
Download Button
1) Double click on EmployeeDetail Screen to open the edition mode.
2) Drag a Button element from the left sidebar and drop it into the Action
placeholder of the EmployeeDetail Screen.
3) Select the Text inside the Button and replace it by Download.
4) Drag an Icon from the left sidebar and drop it right before the Download text,
inside the Button.
5) In the new dialog that appears we can select the type of icon we want. Type
download and select the download icon that appears.
6) In the right sidebar, look at the Icon properties and change the Size to Font size
This property controls the size of the icon, and the Font size option puts the icon
with the same size of the text.
7) Still on the Icon's properties, switch to the Styles tab, and define the padding
value to 5px, to create some margin around the icon.
As you may notice, Service Studio is displaying an error. If you double-click on
the error message, you will be guided to the missing property that you still
need to define.
8) We are now on the Button we just added before. On the right sidebar, let's
switch to the Properties of the Button. The On Click property is missing. Set the
On Click property to New Screen.
The On Click property of the button is mandatory, since the button is a clickable
element, and defines the behavior the button will have when the button is
clicked by the user. In this case, we will navigate to a new Screen, which will
have the layout we want for our PDF.
9) Create an Empty Screen with the name EmployeeDetailPDF.
Resume Screen
You just created a new empty Screen that will have the information that we want to
have in the PDF file. So, we will now build the Screen with a layout that is PDF friendly,
with the help of the elements referenced from the Ultimate PDF component.
1) Open the widget tree of the new Screen and delete Layouts\LayoutsTopMenu
Every Screen is created with a default layout, that we can always change or
delete. In this case, we will use a layout from the Ultimate PDF component.
2) On the top right section of Service Studio, you will find a Search option.
3) Type ScreenToPDF in the search, find the element under the Interface section,
drag it and drop it on the Screen.
You'll see something like the image below
4) We can see now the widget tree of the new Screen with the ScreentoPDF
element. Expand it until you find a Container and delete it.
This Container has some instructions of usage, so we can delete it to clean up

the Screen. And now you have the layout you need to generate the PDF.
5) Back to the elements tree on the right, expand the EmployeeDetail Screen and
copy the input parameter EmployeeId and the GetEmployeeById and
GetProjectsByProjectLeader Aggregates.
6) Paste the elements on the EmployeeDetailPDF Screen since they can be
reused.
After this step, Service Studio will display an error. Since the new Screen now
has an Input parameter, the Download button must pass a value for that
parameter. Let's fix it!
7) On the bottom left in Service Studio, click on the tab that indicates that an error
exists. Double-click the error message to open the Button properties, in the
EmployeeDetail Screen.
8) On the right sidebar, in the Button properties, set the EmployeeId value to
GetEmployeeById.List.Current.Employee.Id. If you don't see the property, scroll
down in the area and you will find it.
This way, we make sure that the Id of the employee whose information is being
displayed on the Screen, is actually the Id passed to the new Screen for the
resume.
9) Publish the module to save the latest changes.
Design the UI for the Employee's Details

Now it's time to actually design the UI for the resume. Don't forget how the resume
should look like.
1) Double-click the EmployeeDetailPDF Screen to open it.
2) Drag a Container from the left sidebar and drop it on the Screen.
3) Go back to the Search menu on the top right of Service Studio, search for
ColumnSmallLeft, drag it, and drop it on the Container created on the previous
step.
This element automatically divides the Screen in two columns, with a smaller
column on the left.
4) On the widget tree, right-click on the Column1 element. Click on Insert Widget
and then in Image.
5) On the properties section of the Image, change the Type to Binary Data and the
Image Content to GetEmployeeById.List.Current.EmployeePicture.Picture.
This ties the Image visual element with the employee's picture saved in the
database.
6) Still on the Image properties, switch to the Styles tab and change the image
width to 60px and the image classes to img-circle.
7) Back on the Screen, drag an Expression element from the left sidebar and drop
it into the Column2 section of the ColumnSmallLeft element. Set the
expression's Value to GetEmployeeById.List.Current.Employee.Name.
This expression will have the employee's name.
8) Right-click on the expression and click on Enclose in Container.
9) In the properties of the Container, Style Classes to "heading2".
10) Drag a new Expression and drop it under the Container. Set its Value to
GetEmployeeById.List.Current.Employee.JobPosition. Enclose it in a Container as
well.
We now have an expression for the job position.
11) Drag a Container from the left sidebar and drop it under the elements created
before. Set the Style Classes of this container to "padding-base".
12) Drag a new Expression and drop it in the new Container. Set its Value to
GetEmployeeById.List.Current.Employee.Bio.
And with this, the resume will have an expression to display the employee's
biography.
13) Go again to the Search tool on the top right of Service Studio, search for the
Columns3 element, drag it, and drop into the main page under all the elements
created before.
14) Drag an Expression and drop it in the first column of the Columns3 element.
Set its Value to GetEmployeeById.List.Current.Employee.Email.
15) Repeat the previous step with a new Expression and drop it on the second
column. Set its Value to GetEmployeeById.List.Current.Employee.Phone.
16) For the last column, use a new Expression and set its Value to "Hired on: " +
FormatDateTime(GetEmployeeById.List.Current.Employee.HiringDate,"dd/MM/yy")
Now we have three columns, with the email, phone and hiring date. The
FormatDateTime Function allows defining the format we want for a date, in this
case the format day/month/year.
Add Projects to the Resume
At this point, you're only missing the projects. To add that part, you will leverage the UI
from the EmployeeDetail Screen.
1) In the right sidebar, switch to the Elements tab.
2) Double-click the EmployeeDetail Screen and switch to the Widget Tree tab.
Expand the MainContent, select the Container and List elements and copy
them.
3) Switch back to the Elements tab, double-click the EmployeeDetailPDF Screen to
open it and switch back again to the Widget Tree of that Screen.
4) Paste the elements in the MainContent placeholder. You should have the new
elements right after the other elements added in the previous steps.
5) Publish the module to save the latest changes. You're almost done!
Logic to Create and Download the PDF

Now that you defined the UI for the resume, you now need to define some logic to
make sure the user is able to create and downloads the file.
The functionality for downloading the PDF has a small trick. When the user clicks on the
Download button, we don't want to have the user navigating to a new Screen, even if
right now that's what would happen. The functionality we want is that when the user
clicks on the Download button, the PDF is generated and downloaded. Let's build that
functionality.
1) Exit from the Widget Tree and switch to the Elements tab.
2) On the properties tab of the EmployeeDetailPDF Screen, select the

OnInitialize event.
Every Screen has a couple of events that trigger some logic automatically. In
this case, when the Screen is being initialized, this Action will run. In this case,
we want to leverage one of the Ultimate PDF's Actions, to generate and
download the PDF. Let's implement that logic.
3) Inside the Action flow, drag a Run Client Action from the left sidebar and drop it
to the Action flow.
4) Type ScreenToPDF_OnInitialize on the search box and select the Action that
appears.
This is the Action that will do the heavy lifting and it will allow you to download
the PDF file, with the layout defined on the Screen, when you click on the
Download button. But, we have some properties that we need to fill.
5) In the properties of the recently dragged Client Action, we have an error in the
Filename. To download a file, we need to define a name for it. Let's set the
Filename to "EmployeeDetail.pdf".
6) To close this logic, switch to the Logic tab on the right sidebar of Service Studio.
Right-click on the Client Action folder and click on Add Systems Event. Select
On Application Ready.
This is a system event that runs automatically when the applications gets ready
for the user to use it in the browser. We can leverage to run some logic. In this
case, we will again leverage an Action from the Ultimate PDF component that
"activates" the Ultimate PDF component to be used in the app.
7) Drag and drop a Run Client Action to the flow of the Action that was just
created.
8) Select the OnApplicationReady_UltimatePDF Action.
9) And you're done. Publish the application and test it in the browser. Navigate to
the details of an Employee and try to download the resume.
Wrapping up
Congratulations on finishing this tutorial. With this exercise, you had the chance to see
a component from the Forge in action, as well as building some of the UI on your own.
References
If you want to deep dive into the subjects that we have seen in this exercise, we have
prepared some useful links for you:
1) Understand Strong and Weak Dependencies
2) How to install or update dependencies
3) OutSystems UI and all its UI components
4) Ultimate PDF
You're done! Thanks for following this first tutorial! See you around!

3.5. Creating and Downloading An Employee Resume - en-US

Uploaded by

Copyright:

Available Formats

3.5. Creating and Downloading An Employee Resume - en-US

Uploaded by

Document Information

Original Title

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

3.5. Creating and Downloading An Employee Resume - en-US

Uploaded by

Copyright:

Available Formats

Creating and Downloading an Employee Resume

To implement this functionality we want to follow those requirements:

● Generate a resume based on the user's profile information.

● Add a Button in the EmployeeDetail Screen to download a pdf.

Installing a Component from the Forge

1) In Service Studio, click on the Forge tab located on the left-top.

3) Click on Install... to start the installation process.

Referencing the Component

1) Open the EmployeeDirectory module to go back to our application.

2) Click on the socket icon to open the Manage Dependencies box.

5) Publish the module to save the changes.

Implementing the Download PDF Feature

3) Select the Text inside the Button and replace it by Download.

This Container has some instructions of usage, so we can delete it to clean up

9) Publish the module to save the latest changes.

Design the UI for the Employee's Details

1) Double-click the EmployeeDetailPDF Screen to open it.

This expression will have the employee's name.

8) Right-click on the expression and click on Enclose in Container.

9) In the properties of the Container, Style Classes to "heading2".

We now have an expression for the job position.

1) In the right sidebar, switch to the Elements tab.

Logic to Create and Download the PDF

2) On the properties tab of the EmployeeDetailPDF Screen, select the

8) Select the OnApplicationReady_UltimatePDF Action.

1) Understand Strong and Weak Dependencies

2) How to install or update dependencies

3) OutSystems UI and all its UI components

You might also like