Exercise 1: The Start of Customer Management Application

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

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

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

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

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

37
OutSystems.
OutSystems.
All All
Rights
Rights
Reserved
Reserved
www.outsystems.com

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

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

.
39
OutSystems.
OutSystems.
All All
Rights
Rights
Reserved
Reserved
www.outsystems.com

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

1. Deploy the application.
41
OutSystems.
OutSystems.
All All
Rights
Rights
Reserved
Reserved
www.outsystems.com

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

Exercise 1: The Start of Customer Management Application

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Exercise 1: The Start of Customer Management Application

Загружено:

Авторское право:

Доступные форматы

Exercise 1

The start of Customer Management Application

What are we building

Application basic analysis

Optional Advanced exercises

Building your first application

Advanced add ons and improvements

Get your personal environment

Get your personal environment

Get your personal environment

Customer Information Management

Manage customer information

1. Create a New Application

3. Select Dublin Theme

1. Access the data modeling section by

2. Click Add Entity to creat a new entity to

1. Create the Customer entity with the

CustomerName, text length 50

2. Create an entity diagram called Customers

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

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

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

1. Drag the Customer entity to the main flow.

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

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

1. Drag the category.xlsx (get it from

3. Add the CategoryId attribute to the

The road So Far

The road So Far

Customer Detail and Edit;

Methods (For each table):

Create; CreateUpdate; Update;

Bootstrap method to populate categories;

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

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

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

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

The road So Far

Methods (For each table):

Customer Detail and Edit;

Create; CreateUpdate; Update;

Bootstrap method to populate categories;

Customise your application

1. Under Themes double click on CustomerManagement.

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

Customise your application

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

Customise your application

Customise your application

Customise your application

Customise your application

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

Customise your application

1. Double click the logo to access it

3. Import the image downloaded and apply it to

Customise your application

1. Deploy the application.

Customise your application

Your application is ready!

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

1. Double click the Aggregate and add the

3. Add a new Filter

1. Set the filter to the expression shown above