LEARN OUTSYSTEMS REACTIVE DEVELOPMENT

Assignment 2
Author: Ankit Gangrade

Website: www.lowcademy.com

Page | 1

www.lowcademy.com
 LEARN OUTSYSTEMS REACTIVE DEVELOPMENT

Requirement
• Create a new screen.
• Crate a site property action, data type text, value = add
• Get two text fields and a button named calculate.
• Bind Integer variable with text fields.
• On Calculate Button click check the site property, if it is “add”, perform addition of two
integer variables and show it in message to user.
• Change site property from service centre to “minus”
• On Button click it should minus integer 2 from integer 1 and show the result to user.
• Change site property from service centre to “multiply”.
• On button click it should multiply both the variables and show the message to user.
• If we are setting any other site property other then add, minus or multiply, it should subtract
in that case..

UI Mock up

Page | 2

www.lowcademy.com
 LEARN OUTSYSTEMS REACTIVE DEVELOPMENT

Implementation

Step 1: Right Click to the main flow and create a new Screen “Exercise” (Or give another name of
your choice) and check the “Include in Menu” Option.

Step 1

Step 2: From Widget Tool box drag and drop “Input Widget” on the screen.

Step 2

Page | 3

www.lowcademy.com
 LEARN OUTSYSTEMS REACTIVE DEVELOPMENT

Step 3: Align the Input Properly, to do so, click on Input Widget and Select “Widget Tree” Sub tab
from Interface Tab.

Step 3

Step 4: Right Click on “Input1” and Select “Enclose in Container”

Step 4

Page | 4

www.lowcademy.com
 LEARN OUTSYSTEMS REACTIVE DEVELOPMENT

Step 5: Click on Container, and select “Style” Subtab from Properties section.

Step 5

Step 6: From Style, change width of Container from “Fill” to “Col 4”;

Page | 5

www.lowcademy.com
 LEARN OUTSYSTEMS REACTIVE DEVELOPMENT

Step 6: Right click to Container and Mouse hover to Insert Widget and select “Text”

Step 6

Step 7: Change the text to “Input 1” and drag and drop the text above the Input_Number.

Step 7

Page | 6

www.lowcademy.com
 LEARN OUTSYSTEMS REACTIVE DEVELOPMENT

Step 8: Copy the container and paste under “MainContent”

Page | 7

www.lowcademy.com
 LEARN OUTSYSTEMS REACTIVE DEVELOPMENT

Step 8

Step 9:

• Click on the Second container and open subtab Property.

Step 9

Step 10: Come back to Exercise screen and add three Integer type local variable Input1, Input2, and
Result.

Note: Make sure data type of each variable is Integer

Page | 8

www.lowcademy.com
 LEARN OUTSYSTEMS REACTIVE DEVELOPMENT

Step 10

Step 11: Click on Input1 Input field and provide variable Input1 to it, do the same for Input 2 field
and provide variable Input2 to it.

Step 11

Step 12: Open Widget Tree and under MainContent, right click and add a new container from widget
list.

Page | 9

www.lowcademy.com
 LEARN OUTSYSTEMS REACTIVE DEVELOPMENT

Step 12

Step 13: Click on the newly added container and provide a style class “margin-top-m”

Step 14: Right click on newly added container and add a button under it.

Page | 10

www.lowcademy.com
 LEARN OUTSYSTEMS REACTIVE DEVELOPMENT

Step 14

Step 14

Step 15: Change the text of button to “Calculate” and add a new screen action on “On Click” property
of button.

Page | 11

www.lowcademy.com
 LEARN OUTSYSTEMS REACTIVE DEVELOPMENT

Step 15

Step 15: Come back to “Element Tab” Under Interface and open screen by double click on it.

Step 15

Step 16: Open “Widget Tree” Sub tab and under last container (In which button is present), right click
and insert Expression widget.
Page | 12

www.lowcademy.com
 LEARN OUTSYSTEMS REACTIVE DEVELOPMENT

Step 16

Step 17: Click on the Expression and select “Expression Editor” under the value from property
section.

It will open the Expression editor popup window

Step 17

Page | 13

www.lowcademy.com
 LEARN OUTSYSTEMS REACTIVE DEVELOPMENT

Step 18: Provide expression “Result Is: “+ Result under the expression editor. And close the editor.

Step 18

Step 19: Go to “Data Tab” under site property, add a new site property

Name: Action Data Type: Tet Default Value: Add

Step 19

Step 20: Under Logic Tab, Under Server Action, create a new server action
“GetActionFromSiteProperty”
Page | 14

www.lowcademy.com
 LEARN OUTSYSTEMS REACTIVE DEVELOPMENT

1. Create a new Server Action and name it “GetActionFromSiteProperty”

Step 20

Step 21: Select the Action parameter as a Variable of Assign widget and open expression editor for
value assignment.

Step 21

Step 22: Select Site.Action and assign it to Action variable.

Page | 15

www.lowcademy.com
 LEARN OUTSYSTEMS REACTIVE DEVELOPMENT

Step 23: Come back to the Elements tab and open “CalculateOnClick” screen action

Step 24: Drag and drop the newly created server action under the flow of screen action.

Page | 16

www.lowcademy.com
 LEARN OUTSYSTEMS REACTIVE DEVELOPMENT

Step 24

Step 25:

• Drop a switch widget under the flow

Page | 17

www.lowcademy.com
 LEARN OUTSYSTEMS REACTIVE DEVELOPMENT

Step 25

Step 26: Draw a condition one between switch and first Assign widget parallel to switch. And Open
expression editor of condition 1.

Step 26

Step 27: Apply a condition ToUpper(GetActionFromSiteProperty.Action) = "ADD" under the

Note: ToUpper: To Upper is a built-in function that converts a text to upper case, it is advisable and
best practice to always convert a text variable to upper or lower case before applying a condition
check with other text.

Page | 18

www.lowcademy.com
 LEARN OUTSYSTEMS REACTIVE DEVELOPMENT

Step 27
Step 28: Add the similar condition for other two nodes as well.

• ToUpper(GetActionFromSiteProperty.Action) = "MINUS"
• ToUpper(GetActionFromSiteProperty.Action) = "MULTIPLY"

Step 28

Step 29: Assign the Addition, Subtraction, or Multiplication of Input 1 and Input2 to result according
to the case.

Page | 19

www.lowcademy.com
 LEARN OUTSYSTEMS REACTIVE DEVELOPMENT

Page | 20

www.lowcademy.com
 LEARN OUTSYSTEMS REACTIVE DEVELOPMENT

Step 29

Step 30: Publish the code and open the application to check the result.

Step 30

Step 31: Check the behaviour of the application, default Action is Add hence it should add the input1
and Input 2

Step 31
Page | 21

www.lowcademy.com
 LEARN OUTSYSTEMS REACTIVE DEVELOPMENT

Step 32: Login to the ServiceCenter

URL https://<your personal environment url>/ServiceCenter/

Example: https://personal-gwmkse7u.outsystemscloud.com/ServiceCenter/

Go to Factory >> Modules >> Search for the module name under which you have created the site
property.

Step 32: Open the module and go to site properties.

Step 32

Page | 22

www.lowcademy.com
 LEARN OUTSYSTEMS REACTIVE DEVELOPMENT

Step 33: Open the site property Action and change its value from Add to Minus and click on apply.

Step 33

Step 34: Go back to the application on the browser and test it again, now it should apply the
subtraction action.

Step 34

Try the same operation for Multiply and other site property as well.

Page | 23

www.lowcademy.com