7.5x-Input Validation Exercise
7.5x-Input Validation Exercise
7.5x-Input Validation Exercise
Input Validation 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
OutSystems Inc. 5
901 Peachtree Dunwoody Road, N.E. Building C, Suite 495, Atlanta, GA 30328 2
Introduction
At this point, we already have full functional Screens and Logic in our application. Three of our
Screens expect inputs submitted by end-users of the application. Considering the MovieDetail
and PersonDetail Screens, there is a Form where users can submit a new movie / person, or
edit an existing one.
In such applications, it is important to consider that users make mistakes. They can submit
wrong data, miss required fields, etc. So, it is important to define some rules that are validated
before the data is submitted to the database.
In this lab, we will start by experimenting the OutSystems built-in validations (mandatory fields
and correct data types), by adding examples of wrong data, using the Server and Client & Server
validation methods.
Then, we will define our own rules, by implementing custom server-side validations. On the
Save Actions of both Screens, we will modify the logic to assess if the data meets some
requirements, before the movies and people are added to the database. Also, we will make
sure that the application informs the end-user accordingly, if there is some wrong data being
submitted, or if there is data missing.
OutSystems Inc. 5
901 Peachtree Dunwoody Road, N.E. Building C, Suite 495, Atlanta, GA 30328 3
1) Let’s create a new Person in the application, with empty mandatory fields and wrong
data types, to test the built-in validations. We will do it first with Server and then with the
Client & Server option.
a) Open the application in the browser, navigate to the People Screen and click on
the Link N
ew Person.
NOTE: As the logic of the Save Action does not have any behavior for the
validations implemented, a new Person is added to the database with the
default values in the Surname and the Date of Birth attributes.
OutSystems Inc. 5
901 Peachtree Dunwoody Road, N.E. Building C, Suite 495, Atlanta, GA 30328 4
e) Publish the module and open the OSMDb application in the browser.
f) Open the PersonDetail Screen for Karren and try to edit its information, keeping
the Name as Karren, no Surname, and the Date of Birth as Walker. Note that the
built-in validations for the M
andatory fields and Data Types are now working.
NOTE: The client-side validations verify the Mandatory inputs and valid Data
Types, b
efore even the request is sent to the server. As opposed to the Server
Validation option, the C
lient & Server option does not allow the record to be
added to the database, verifying automatically if the Form is valid or not.
2) Let’s start the Debugger in Service Studio, and look closely in detail to what is happening
during the Server validations. We will do this with the Server option first and then with
Client & Server. Make sure you look at the Valid properties of the Inputs and Form.
OutSystems Inc. 5
901 Peachtree Dunwoody Road, N.E. Building C, Suite 495, Atlanta, GA 30328 5
d) Open the application in the browser and try to edit the record with Name K
arren,
with the same wrong information.
e) Back in Service Studio, the execution of the application should have stopped at
the Breakpoint we added. You can move on step-by-step by selecting the S
tep
Over option in the D
ebugger tab.
OutSystems Inc. 5
901 Peachtree Dunwoody Road, N.E. Building C, Suite 495, Atlanta, GA 30328 6
g) Remove the Breakpoint from the Action, when the Debug is done.
3) Change the Validation Method of the Save Button to Client & Server, in the
AddMovieParticipant Screen, for enabling the c
lient-side validations. This will solve the
problem of the foreign key violation error, we have seen in the Lab: Data Queries and
Widgets II, when we tried to add a Person to a movie with a certain Role, without filling
all the mandatory fields. With Client & Server, since the built-in validations are checked
on the client-side, we get an error before the request is sent, and we need to guarantee
all mandatory fields are filled.
OutSystems Inc. 5
901 Peachtree Dunwoody Road, N.E. Building C, Suite 495, Atlanta, GA 30328 7
c) Notice that the outward connector from the If to the CreateOrUpdateMovie h
as
the label False. This means that the condition we specify in the If needs to check
if the Input has errors. If it does not have errors, then the flow of the Action will
continue normally.
OutSystems Inc. 5
901 Peachtree Dunwoody Road, N.E. Building C, Suite 495, Atlanta, GA 30328 8
This condition checks if the Gross Takings Amount is different than zero, when
the movie Year is bigger than the Current Date (if the movie is still to be released).
If this is True, it means it will fail our custom validation. If this is False, it means it
passed the validation and will proceed to the CreateOrUpdateMovie Action.
NOTE: Notice the use of the built-in functions Year() and CurrDate() in the
condition. These, and many others, can be found in the Scope tree (of the
Expression Editor), under the B
uilt-In Functions folder.
OutSystems Inc. 5
901 Peachtree Dunwoody Road, N.E. Building C, Suite 495, Atlanta, GA 30328 9
f) Notice that the new outward connector from the If to the Assign has the label
True. Considering how the condition was made, the code will follow this path if
there are problems with the Input values.
NOTE: Once this second connector is created, the TrueChange error related to
the If statement disappears. This is because the If, unlike most other
statements, requires t wo connectors that indicate the alternate paths to take
depending on the Condition being True or False.
If it ever feels more natural to write the inverse of the If condition (e.g. write
the condition as C
heckOk instead of n
ot CheckOk), we can swap the True/False
connectors on the If. The quickest way to do so is to right-click the If statement
and select S
wap Connectors from the pop up menu.
This Assign sets that the Gross Takings Amount input is not valid, and the
appropriate message to appear on the page (when the input is not valid). This is
done here, since this will be the flow that will be followed when the If Condition is
evaluated to True, meaning that it failed our custom validation.
NOTE: The invalidation of inputs normally follows the pattern above: set its
Valid property to false and its V
alidationMessage to the explanation of the
problem detected. It’s important to emphasize that, while detecting a
validation problem normally involves looking at the Form’s Record value,
flagging a validation error is always done using an individual input’s properties.
OutSystems Inc. 5
901 Peachtree Dunwoody Road, N.E. Building C, Suite 495, Atlanta, GA 30328 10
h) Notice that the TrueChange tab indicates that an outward connector is still
needed for the Assign. Since you will be adding further validations next, ignore
the error for now.
2) Add a new custom validation to verify that the Gross Takings can never be a negative
number. This one should be added next to the previous one.
a) Drag and drop an I f statement between the If created above and the
CreateOrUpdateMovie statement.
MovieForm.Record.Movie.GrossTakingsAmount < 0
c) Create the outbound connector from the Assign statement, of the last step, to the
recently created If statement. The TrueChange validation error for the Assign
should have disappeared.
OutSystems Inc. 5
901 Peachtree Dunwoody Road, N.E. Building C, Suite 495, Atlanta, GA 30328 11
e) Create the second connector from the If to the new Assign statement.
g) As before, ignore the missing outgoing connector error for now.
3) Add the final validation that checks if the Form is Valid, meaning that every Form Input
is V
alid. If it is, proceed to the CreateOrUpdateMovie statement. If not, end the S
ave
Action, without adding the record.
a) Drag and drop an I f statement between the previously created If, and the
CreateOrUpdateMovie statement.
OutSystems Inc. 5
901 Peachtree Dunwoody Road, N.E. Building C, Suite 495, Atlanta, GA 30328 12
This verifies if the Form is Valid. This property cannot be changed with an Assign.
It changes automatically if at least one Input of the Form is not Valid.
c) Create the connector from the previous Assign to the new If.
4) Give feedback to the user, using the Feedback_Message Action, on the Success or Error
outcome of the Save Action.
OutSystems Inc. 5
901 Peachtree Dunwoody Road, N.E. Building C, Suite 495, Atlanta, GA 30328 13
a) Drag and drop a Run Server Action s tatement between the Movie Form
Condition and the End statement.
b) On the S
elect Action dialog, select Feedback_Message and click O
K.
d) Drag and drop a Run Server Action b
etween the CreateOrUpdateMovie and
the Destination statements. Set it to be a F eedback_Message. This will create a
Feedback_Message2 statement in the flow.
OutSystems Inc. 5
901 Peachtree Dunwoody Road, N.E. Building C, Suite 495, Atlanta, GA 30328 14
f) After these changes, the final part of the Action flow should look like this
OutSystems Inc. 5
901 Peachtree Dunwoody Road, N.E. Building C, Suite 495, Atlanta, GA 30328 15
1) Open the application in the browser and in the Movies Screen, select the A
vatar 2 for
editing.
2) Set the Gross Takings to 500 and click on Save. As the movie is not out yet, you should
see the Validation Message defined in the previous part of the Lab.
3) Set the Gross Takings to -50 and click Save. You should see the error regarding the
negative Gross Takings Amount.
4) Set the Gross Takings to “hello” and click Save. You should have a different error, in the
Gross Takings Input box, due to the incorrect D
ata Type (built-in validation).
OutSystems Inc. 5
901 Peachtree Dunwoody Road, N.E. Building C, Suite 495, Atlanta, GA 30328 16
1) Add a validation to the Save Action in the PersonDetail Screen that verifies that the
date of birth needs to be before the current date.
NOTE: This exercise section will not be broken down further. You can refer to what
you did earlier in the exercise for pointers. Be aware of the built-in functions
NullDate() and C
urrDate(), that may be useful for implementing these validations.
3) Add the final validation to verify if everything in the Form is correct, including the
detection of unfilled mandatory and wrong typed inputs.
OutSystems Inc. 5
901 Peachtree Dunwoody Road, N.E. Building C, Suite 495, Atlanta, GA 30328 17
1) Publish the application and open the detail page of Harrison Ford.
3) Set the Date of Death to today, without changing the invalid date of birth, and click
Save. You should now see both Input boxes invalid, as both validations fail.
OutSystems Inc. 5
901 Peachtree Dunwoody Road, N.E. Building C, Suite 495, Atlanta, GA 30328 18
End of Lab
In this Lab, we enabled the detection of wrong information specified on the Inputs of both
detail Screens (MovieDetail and PersonDetail).
We implemented custom server-side validations, for movies and for people, where we created
some rules that the movies and people should follow, before being added to the database.
Feedback of validation errors can be done both in-place, next to the offending Input, by setting
the Input to not Valid and define a Validation Message. Additionally, we also used
Feedback_Message Actions, so that the user can see a pop-up with a message sliding down the
Screen, indicating the success or failure of the operation.
OutSystems Inc. 5
901 Peachtree Dunwoody Road, N.E. Building C, Suite 495, Atlanta, GA 30328 19