Exercise 1

The start of Customer Management Application

Exercise Structure
Development stages
1. Get your Personal environment
2. Exercise context

What are we building

3. Application analysis

Application basic analysis

4. Hands-on exercises

Optional Advanced exercises

Building your first application

Extra mile

Advanced add ons and improvements

OutSystems.
OutSystems.
All All
Rights
Rights
Reserved
Reserved

www.outsystems.com

Get your personal environment

Register & Download
Go to www.outsystems.com
and get yourself a personal
Environment by providing your
information and follow the
indicated steps.

OutSystems.
OutSystems.
All All
Rights
Rights
Reserved
Reserved

www.outsystems.com

Get your personal environment

Access your personal environment
After the download and installation of the Development Environment tool is complete lauch it
to start working.

OutSystems.
OutSystems.
All All
Rights
Rights
Reserved
Reserved

www.outsystems.com

Get your personal environment

Using the development tool and Build an App in 5 min Tutorial

OutSystems.
OutSystems.
All All
Rights
Rights
Reserved
Reserved

www.outsystems.com

Tutorial
A 5min application

Exercise context
Overview
Company ACME Goods is a retail distribution company that acquires its products directly from the
producers and sell them to small/medium shops.
ACME Goods is looking for an application to manage their existing customer base information and
manage their shortage of products on a proactive way.

Main Needs:

Customer Information Management

Products Shortage Management

OutSystems.
OutSystems.
All All
Rights
Rights
Reserved
Reserved

www.outsystems.com

Application design
Basic Information Architecture

Customers

Products

Category

Purchase
Orders

1.
2.
3.
4.

Manage customer information

Manage products information
Category information is related with products
Customers and products are related via purchases

OutSystems.
OutSystems.
All All
Rights
Rights
Reserved
Reserved

www.outsystems.com

Hands-on exercises
Use cases

Hands-on exercises
Use cases

As a customer representative I should be able to search for customers, edit their information,
create new customers and register their purchases.
As a product stock manager I should be able to access the products in stock, register new
products, edit information about a product and associate products with categories.

10

OutSystems.
OutSystems.
All All
Rights
Rights
Reserved
Reserved

www.outsystems.com

Hands-on exercises
Step 1 - Use a pre-built component available on Forge
Forge is the OutSystems online free store were users can reuse components, applications,
connectors and themes from the OutSystems Community Worldwide.

11

OutSystems.
OutSystems.
All All
Rights
Rights
Reserved
Reserved

www.outsystems.com

Hands-on exercises
Step 2 Install a Theme from Forge

12

OutSystems.
OutSystems.
All All
Rights
Rights
Reserved
Reserved

www.outsystems.com

Hands-on exercises
Step 3 - Use a pre-built component available on Forge

13

OutSystems.
OutSystems.
All All
Rights
Rights
Reserved
Reserved

www.outsystems.com

Hands-on exercises
Step 4 - Review applications on our environment and Create a new app

14

OutSystems.
OutSystems.
All All
Rights
Rights
Reserved
Reserved

www.outsystems.com

Hands-on exercises
Step 5 Name your application

1. Create a New Application

2. Give a name to your application
and then hit the Save button.

3. Select Dublin Theme

4. Click Create Module to start designing
your application.

15

OutSystems.
OutSystems.
All All
Rights
Rights
Reserved
Reserved

www.outsystems.com

Hands-on exercises
Step 6 Access data model section

1. Access the data modeling section by

clicking on the Data tab.

16

2. Click Add Entity to creat a new entity to

store information by right clicking on Entities.

OutSystems.
OutSystems.
All All
Rights
Rights
Reserved
Reserved

www.outsystems.com

Hands-on exercises
Step 7 Create the Customer entity

1. Create the Customer entity with the

following attributes:
1.
2.
3.
4.
5.
6.
7.
8.

17

CustomerName, text length 50

MainContactName, text length 50
Country, text length 50
City, text length 50
AddressLine1, text length 50
PostalCode, text length 50
ContactEmail, email
MainPhone, phone

2. Create an entity diagram called Customers

by right clicking on Entity Diagrams
3. Drag the Customer entity to the diagram.
Note: This diagram will show us how the entities
are related to each other.

OutSystems.
OutSystems.
All All
Rights
Rights
Reserved
Reserved

www.outsystems.com

Hands-on exercises
Step 8 Bootstrap sample data

1. After the creation of the Customer entity we want to bootstrap some information to use as
sample data.
2. To do this right click on the Customer entity then go to Advanced and then click Create
Action to Bootstrap Data from Excel...
3. Use the Customers.xls for the bootstrap. (get it from www.outsystems.com/goto/jumpstart)
18

OutSystems.
OutSystems.
All All
Rights
Rights
Reserved
Reserved

www.outsystems.com

Hands-on exercises
Step 9 Create interfaces for your application

1. Go to the MainFlow folder, by going to Interface section.

2. Then go to Data section and drag the Customer entity to the MainFlow on top of the default
page Homepage.
Remark: The OutSystems platform also has interface accelerators (scaffolding) to show and access
data.
19

OutSystems.
OutSystems.
All All
Rights
Rights
Reserved
Reserved

www.outsystems.com

Hands-on exercises
Step 10 Change the interface

1. Double click on the Customers page to access the interface.

2. Add a new column Main Phone by dragging it from the Customer entity.

20

OutSystems.
OutSystems.
All All
Rights
Rights
Reserved
Reserved

www.outsystems.com

Hands-on exercises
Step 11 Change the interface

1. Use the delete column action to delete the Country column.

2. Change the labels customer name to Name; main contact name to Main contact and main
phone to Phone.

21

OutSystems.
OutSystems.
All All
Rights
Rights
Reserved
Reserved

www.outsystems.com

Hands-on exercises
Step 12 Create the detail and edit page for customers

1. Drag the Customer entity to the main flow.

Remark: Notice the creation of a CustomerDetail page linked to Customers page that allows both
viewing and editing its details.

22

OutSystems.
OutSystems.
All All
Rights
Rights
Reserved
Reserved

www.outsystems.com

Hands-on exercises
Step 13 Deploy the application

1. Click the 1-Click publish to initiate the deployment process

Remark: This will start the deployment and publication process with one simple click.

23

OutSystems.
OutSystems.
All All
Rights
Rights
Reserved
Reserved

www.outsystems.com

Hands-on exercises
Step 14 - Congratulations! You have built your first applications!

24

OutSystems.
OutSystems.
All All
Rights
Rights
Reserved
Reserved

www.outsystems.com

Hands-on exercises
Step 15 Create the Products entity

1. Drag the Products.xlsx (get it from www.outsystems.com/goto/jumpstart) to the environment youll

notice that the Products entity is automatically created.
2. After the entity creation drag it to the Customers entity diagram.
3. Change the data type of the Barcode field to Text
Remark: The OutSystems platform provides development accelerators to increase productivity on
common, patterned and repeating development tasks (scaffolding)
25

OutSystems.
OutSystems.
All All
Rights
Rights
Reserved
Reserved

www.outsystems.com

Hands-on exercises
Step 16 Create the Categories entity

1. Drag the category.xlsx (get it from

www.outsystems.com/goto/jumpstart) to work
as you did previously with the Products.
2. After the entity creation drag it to the
Customers entity diagram next to Product.

26

3. Add the CategoryId attribute to the

Product table.
Remark: This is an example of another
development pattern accelerator.
OutSystems.
OutSystems.
All All
Rights
Rights
Reserved
Reserved

www.outsystems.com

Hands-on exercises
Step 17 Create the product list and detail pages

1. Drag the Product entity twice to the MainFlow to create both pages;
2. Deploy the application
27

OutSystems.
OutSystems.
All All
Rights
Rights
Reserved
Reserved

www.outsystems.com

The road So Far

Deploy and Try your application

28

OutSystems.
OutSystems.
All All
Rights
Rights
Reserved
Reserved

www.outsystems.com

The road So Far

Status Assessment I
Tables:

Screens:

Customers;
Products;
Categories.

Customer Detail and Edit;

Customer List;
Product Detail and Edit;
Product List;

Methods (For each table):

Create; CreateUpdate; Update;

Get; GetForUpdate;
Delete.

Asynchronous Methods:

29

Bootstrap method to populate categories;

Bootstrap method to populate customers;
Bootstrpa method to populate products.

OutSystems.
OutSystems.
All All
Rights
Rights
Reserved
Reserved

www.outsystems.com

Hands-on exercises
Step 18 Create a relation between Customer and Product

1. Create the entity PurchaseOrders with the following additional attributes:

1.
2.
3.
4.
5.

CustomerId, Customer Identifier; *** NOTE This is a NEW field leave the existing Id field alone!
ProductId, Product Identifier ;
TotalPrice, Currency;
Quantity, Integer;
Discount ,Integer.

2. Drag the Purchase orders table to the Customers entity diagram.

Remark: Notice the creation of a many-to-many relation on the diagram.
30

OutSystems.
OutSystems.
All All
Rights
Rights
Reserved
Reserved

www.outsystems.com

Hands-on exercises
Step 19 Add PurchaseOrders to customer

1. Go to CustomerDetail page and drag the PurchaseOrders entity to the interface.

Remark: Notice the creation of an interface to add purchase orders to Customers.
31

OutSystems.
OutSystems.
All All
Rights
Rights
Reserved
Reserved

www.outsystems.com

Hands-on exercises
Step 20 Deploy the application

1. Click the 1-Click publish to initiate the deployment process

Remark: This will start the deployment and publication process with one simple click.

32

OutSystems.
OutSystems.
All All
Rights
Rights
Reserved
Reserved

www.outsystems.com

The road So Far

Status Assessment II
Tables:

Screens:

Customers;
Products;
Categories.

Methods (For each table):

Customer Detail and Edit;

Customer List;
Product Detail and Edit;
Product List;
Customer_PurchaseOrder_PopupEditor.

Create; CreateUpdate; Update;

Get; GetForUpdate;
Delete.

Asynchronous Methods:

33

Bootstrap method to populate categories;

Bootstrap method to populate customers;
Bootstrpa method to populate products.

OutSystems.
OutSystems.
All All
Rights
Rights
Reserved
Reserved

www.outsystems.com

Customise your application

Step 21 - Make it look like your corporate brand

1. Under Themes double click on CustomerManagement.

Remark: This will open the stylesheet configurator of the application.

34

OutSystems.
OutSystems.
All All
Rights
Rights
Reserved
Reserved

www.outsystems.com

Customise your application

Step 22 - Make it look like your corporate brand

1. Access the link (http://labs.outsystems.net/ThemeCustomizer/GenerateDublin.aspx) in the

stylesheet configuration.
Remark: This will open the theme generator page.
35

OutSystems.
OutSystems.
All All
Rights
Rights
Reserved
Reserved

www.outsystems.com

Customise your application

Step 23 - Make it look like your corporate brand

1. Type your companys URL or any branded website to capture its style.
Remark: This will create automatically the style layer based on the supplied website.
36

OutSystems.
OutSystems.
All All
Rights
Rights
Reserved
Reserved

www.outsystems.com

Customise your application

Step 24 - Make it look like your corporate brand

37

OutSystems.
OutSystems.
All All
Rights
Rights
Reserved
Reserved

www.outsystems.com

Customise your application

Step 25 - Make it look like your corporate brand

1. Select all the generated CSS (Ctrl + A) code and copy (Ctrl + C) it.
38

OutSystems.
OutSystems.
All All
Rights
Rights
Reserved
Reserved

www.outsystems.com

Customise your application

Step 26 - Make it look like your corporate brand

1. Paste (Ctrl + V) the style to you current theme.

.
39

OutSystems.
OutSystems.
All All
Rights
Rights
Reserved
Reserved

www.outsystems.com

Customise your application

Step 27 - Make it look like your corporate brand

1. Double click the logo to access it

2. Select the logo

40

3. Import the image downloaded and apply it to

the logo.

OutSystems.
OutSystems.
All All
Rights
Rights
Reserved
Reserved

www.outsystems.com

Customise your application

Step 28 - Make it look like your corporate brand

1. Deploy the application.

41

OutSystems.
OutSystems.
All All
Rights
Rights
Reserved
Reserved

www.outsystems.com

Customise your application

Step 29 Check your new look

42

OutSystems.
OutSystems.
All All
Rights
Rights
Reserved
Reserved

www.outsystems.com

Your application is ready!

Congratulation! You have finish the first exercise!

Extra Mile

Finished sooner? Great! Lets do an extra mile and improve your application

44

OutSystems.
OutSystems.
All All
Rights
Rights
Reserved
Reserved

www.outsystems.com

Hands-on exercises
Step 30 Remove the Total Price column from the editor

1. Go to Customer_PurchaseOrder_PopupEditor page.
2. Delete the TotalPrice line (delete all the container).
45

OutSystems.
OutSystems.
All All
Rights
Rights
Reserved
Reserved

www.outsystems.com

Hands-on exercises
Step 31 Retrieve product information based on the purchase

1. Double click on the Save button of the Customer_PurchaseOrder_PopupEditor page.

2. Drag an Aggregate to the flow.

46

OutSystems.
OutSystems.
All All
Rights
Rights
Reserved
Reserved

www.outsystems.com

Hands-on exercises
Step 32 Configure the product query

1. Double click the Aggregate and add the

Product entity.
2. Add the Category entity.

47

3. Add a new Filter

OutSystems.
OutSystems.
All All
Rights
Rights
Reserved
Reserved

www.outsystems.com

Hands-on exercises
Step 33 Configure the assignation

1. Set the filter to the expression shown above

2. Go back to the Save screen action flow

3. Drag an assign action to the flow.

Remark: This action will enable us to change
this value before writing the value to database.

48

OutSystems.
OutSystems.
All All
Rights
Rights
Reserved
Reserved

www.outsystems.com

Hands-on exercises
Step 34 Calculate the Total Price based on the amount

1. Double click the variable and select

TotalPrice as described on the picture above.

2. Double click the value to open the editor.

Remark: This action will enable us to change

this value before writing the value to database.
49

OutSystems.
OutSystems.
All All
Rights
Rights
Reserved
Reserved

www.outsystems.com

Hands-on exercises
Step 35 Calculate the Total Price based on the quantity

1. Double click the value and perform the multiplication UnitPrice times Quantity:
GetProductById.List.Current.Product.UnitPrice* PurchaseOrderForm.Record.PurchaseOrders.Quantity

Remark: This will calculate the price based on the units and amount purchased.
50

OutSystems.
OutSystems.
All All
Rights
Rights
Reserved
Reserved

www.outsystems.com

Thank you for your time!

Hope you have enjoyed the session!

Copyright
This material is owned by OutSystems and may only be
used in the ways described in this Copyright Notice:
You may take temporary copies necessary to read this
document
You may print a single copy of this material for
personal use
You must not change any of this material or remove
any part of any copyright notice
You must not distribute this material in any shape or
form
www.outsystems.com

Page 57

OutSystems all rights reserved