Вы находитесь на странице: 1из 52

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

Building your first application

Extra mile

Optional Advanced exercises

Advanced add ons and improvements

Advanced exercises – Advanced add ons and improvements 2 2 © OutSystems. © OutSystems. All All

Get your personal environment

Get your personal environment Register & Download Go to www.outsystems.com and get yourself a personal Environment

Register & Download

Get your personal environment Register & Download Go to www.outsystems.com and get yourself a personal Environment

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

Get your personal environment

Access your personal environment

your personal environment Access your personal environment After the download and installation of the Development

After the download and installation of the Development Environment tool is complete lauch it

to start working.

Environment tool is complete lauch it to start working. 4 4 © OutSystems. © OutSystems. All

Get your personal environment

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

development tool and “ Build an App in 5 min ” Tutorial 5 5 © OutSystems.
development tool and “ Build an App in 5 min ” Tutorial 5 5 © OutSystems.

55

© OutSystems.© OutSystems.All AllRightsRightsReservedReserved

www.outsystems.comwww.outsystems.com

Tutorial

A 5min application

Exercise context

Overview

Exercise context Overview “Company ACME Goods is a retail distribution company that acquires its products directly

“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

77

© OutSystems.© OutSystems.All AllRightsRightsReservedReserved

www.outsystems.comwww.outsystems.com

Application design

Basic Information Architecture

Application design Basic Information Architecture Customers Products Category Purchase Orders 1. Manage customer
Customers Products Category Purchase Orders
Customers
Products
Category
Purchase
Orders

1. Manage customer information

2. Manage products information

3. Category information is related with products

4. Customers and products are related via purchases

88

© OutSystems.© OutSystems.All AllRightsRightsReservedReserved

www.outsystems.comwww.outsystems.com

Hands-on exercises

Use cases

Hands-on exercises

Use cases

Hands-on exercises Use cases As a customer representative I should be able to search for customers,

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.

1010

© OutSystems.© OutSystems.All AllRightsRightsReservedReserved

www.outsystems.comwww.outsystems.com

Hands-on exercises

Hands-on exercises Step 1 - Use a pre-built component available on Forge Forge is the OutSystems

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.

and themes from the OutSystems Community Worldwide. 1 1 1 1 © OutSystems. © OutSystems. All

1111

© OutSystems.© OutSystems.All AllRightsRightsReservedReserved

www.outsystems.comwww.outsystems.com

Hands-on exercises

Step 2 Install a Theme from Forge

Hands-on exercises Step 2 – Install a Theme from Forge 1 2 1 2 © OutSystems.
Hands-on exercises Step 2 – Install a Theme from Forge 1 2 1 2 © OutSystems.

1212

© OutSystems.© OutSystems.All AllRightsRightsReservedReserved

www.outsystems.comwww.outsystems.com

Hands-on exercises

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

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

Step 3 - Use a pre-built component available on Forge 1 3 1 3 © OutSystems.

1313

© OutSystems.© OutSystems.All AllRightsRightsReservedReserved

www.outsystems.comwww.outsystems.com

Hands-on exercises

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

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

Review applications on our environment and Create a new app 1 4 1 4 © OutSystems.

1414

© OutSystems.© OutSystems.All AllRightsRightsReservedReserved

www.outsystems.comwww.outsystems.com

Hands-on exercises

Hands-on exercises Step 5 – Name your application 1. Create a “New Application ” 2. Give

Step 5 Name your application

Hands-on exercises Step 5 – Name your application 1. Create a “New Application ” 2. Give

1. Create a “New Application

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

to your application and then hit the “ Save” button. 3. Select Dublin Theme 4. Click

3. Select Dublin Theme

4. Click Create Module” to start designing

your application.

1515

© OutSystems.© OutSystems.All AllRightsRightsReservedReserved

www.outsystems.comwww.outsystems.com

Hands-on exercises

Step 6 Access data model section

Hands-on exercises Step 6 – Access data model section 1. Access the data modeling section by

1. Access the data modeling section by clicking on the “Data” tab.

1616

section by clicking on the “ Data ” tab. 1 6 1 6 2 . Click
section by clicking on the “ Data ” tab. 1 6 1 6 2 . Click

2. Click “Add Entity” to creat a new entity to store information by right clicking on “Entities”.

© OutSystems.© OutSystems.All AllRightsRightsReservedReserved

www.outsystems.comwww.outsystems.com

Hands-on exercises

Step 7 – Create the “Customer” entity

exercises Step 7 – Create the “Customer” entity 1. Create the “Customer” entity with the following

1. Create the “Customer” entity with the following attributes:

1.

CustomerName, text length 50

2.

MainContactName, text length 50

3.

Country, text length 50

4.

City, text length 50

5.

AddressLine1, text length 50

6.

PostalCode, text length 50

7.

ContactEmail, email

8.

MainPhone, phone

1717

ContactEmail, email 8. MainPhone, phone 1 7 1 7 2. Create an entity diagram called “

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 AllRightsRightsReservedReserved

www.outsystems.comwww.outsystems.com

Hands-on exercises

Step 8 Bootstrap sample data

Hands-on exercises Step 8 – Bootstrap sample data 1 8 1 8 1. After the creation
Hands-on exercises Step 8 – Bootstrap sample data 1 8 1 8 1. After the creation

1818

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

3. Use the “Customers.xls” for the bootstrap. (get it from www.outsystems.com/goto/jumpstart)

Action to Bootstrap Data from Excel

© OutSystems.© OutSystems.All AllRightsRightsReservedReserved

www.outsystems.comwww.outsystems.com

Hands-on exercises

Step 9 Create interfaces for your application

Step 9 – Create interfaces for your application 1. Go to the “MainFlow” folder, by going
Step 9 – Create interfaces for your application 1. Go to the “MainFlow” folder, by going

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.

1919

© OutSystems.© OutSystems.All AllRightsRightsReservedReserved

www.outsystems.comwww.outsystems.com

Hands-on exercises

Step 10 Change the interface

Hands-on exercises Step 10 – Change the interface 1. Double click on the “Customers” page to
Hands-on exercises Step 10 – Change the interface 1. Double click on the “Customers” page to

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.

2020

© OutSystems.© OutSystems.All AllRightsRightsReservedReserved

www.outsystems.comwww.outsystems.com

Hands-on exercises

Step 11 Change the interface

Hands-on exercises Step 11 – Change the interface 1. Use the “delete column” action to delete
Hands-on exercises Step 11 – Change the interface 1. Use the “delete column” action to delete

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”.

2121

© OutSystems.© OutSystems.All AllRightsRightsReservedReserved

www.outsystems.comwww.outsystems.com

Hands-on exercises

Hands-on exercises Step 12 – Create the detail and edit page for customers 1. Drag the

Step 12 Create the detail and edit page for customers

Step 12 – Create the detail and edit page for customers 1. Drag the “Customer” entity

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.

2222

© OutSystems.© OutSystems.All AllRightsRightsReservedReserved

www.outsystems.comwww.outsystems.com

Hands-on exercises

Step 13 Deploy the application

Hands-on exercises Step 13 – Deploy the application 1. Click the “1 - Click publish” to
Hands-on exercises Step 13 – Deploy the application 1. Click the “1 - Click publish” to

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

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

2323

© OutSystems.© OutSystems.All AllRightsRightsReservedReserved

www.outsystems.comwww.outsystems.com

Hands-on exercises

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

Step 14 - Congratulations! You have built your first applications!

- Congratulations! You have built your first applications! 2 4 2 4 © OutSystems. © OutSystems.

2424

© OutSystems.© OutSystems.All AllRightsRightsReservedReserved

www.outsystems.comwww.outsystems.com

Hands-on exercises

Step 15 – Create the “Products” entity

exercises Step 15 – Create the “Products” entity 1. Drag the “Products.xlsx” (get it from
exercises Step 15 – Create the “Products” entity 1. Drag the “Products.xlsx” (get it from
exercises Step 15 – Create the “Products” entity 1. Drag the “Products.xlsx” (get it from

1. Drag the “Products.xlsx” (get it from www.outsystems.com/goto/jumpstart) to the environment you’ll 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)

2525

© OutSystems.© OutSystems.All AllRightsRightsReservedReserved

www.outsystems.comwww.outsystems.com

Hands-on exercises

Step 16 – Create the “Categories” entity

exercises Step 16 – Create the “Categories” entity 1. Drag the “category.xlsx” (get it from

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”.

2626

entity diagram next to “Product”. 2 6 2 6 3 . Add the “CategoryId” attribute to
entity diagram next to “Product”. 2 6 2 6 3 . Add the “CategoryId” attribute to

3. Add the “CategoryId” attribute to the

“Product” table.

Remark: This is an example of another development pattern accelerator.

© OutSystems.© OutSystems.All AllRightsRightsReservedReserved

www.outsystems.comwww.outsystems.com

Hands-on exercises

Hands-on exercises Step 17 – Create the product list and detail pages 1. Drag the “Product”

Step 17 Create the product list and detail pages

Step 17 – Create the product list and detail pages 1. Drag the “Product” entity twice

1. Drag the “Product” entity twice to the “MainFlow” to create both pages;

2. Deploy the application

2727

© OutSystems.© OutSystems.All AllRightsRightsReservedReserved

www.outsystems.comwww.outsystems.com

The road So Far

Deploy and Try your application

The road So Far Deploy and Try your application 2 8 2 8 © OutSystems. ©
The road So Far Deploy and Try your application 2 8 2 8 © OutSystems. ©

2828

© OutSystems.© OutSystems.All AllRightsRightsReservedReserved

www.outsystems.comwww.outsystems.com

The road So Far

Status Assessment I

Tables:

Customers;

Products;

Categories.

Methods (For each table):

Create; CreateUpdate; Update;

Get; GetForUpdate;

Delete.

Asynchronous Methods:

Bootstrap method to populate categories;

Bootstrap method to populate customers;

Bootstrpa method to populate products.

2929

Screens:

Customer Detail and Edit;

Customer List;

Product Detail and Edit;

Product List;

© OutSystems.© OutSystems.All AllRightsRightsReservedReserved

Product List; © OutSystems. © OutSystems. All All Rights Rights Reserved Reserved www.outsystems.comwww.outsystems.com

www.outsystems.comwww.outsystems.com

Hands-on exercises

Hands-on exercises Step 18 – Create a relation between “Customer” and “Product” 1. Create the entity

Step 18 – Create a relation between “Customer” and “Product”

Create a relation between “Customer” and “Product” 1. Create the entity “PurchaseOrders” with the

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

1.

CustomerId, Customer Identifier; *** NOTE This is a NEW field – leave the existing “Id” field alone!

2.

ProductId, Product Identifier ;

3.

TotalPrice, Currency;

4.

Quantity, Integer;

5.

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.

3030

© OutSystems.© OutSystems.All AllRightsRightsReservedReserved

www.outsystems.comwww.outsystems.com

Hands-on exercises

Step 19 – Add “PurchaseOrders” to customer

exercises Step 19 – Add “PurchaseOrders” to customer 1. Go to “CustomerDetail” page and drag the
exercises Step 19 – Add “PurchaseOrders” to customer 1. Go to “CustomerDetail” page and drag the

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.

3131

© OutSystems.© OutSystems.All AllRightsRightsReservedReserved

www.outsystems.comwww.outsystems.com

Hands-on exercises

Step 20 Deploy the application

Hands-on exercises Step 20 – Deploy the application 1. Click the “1 - Click publish” to
Hands-on exercises Step 20 – Deploy the application 1. Click the “1 - Click publish” to

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

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

3232

© OutSystems.© OutSystems.All AllRightsRightsReservedReserved

www.outsystems.comwww.outsystems.com

The road So Far

Status Assessment II

The road So Far Status Assessment II Tables: Screens: • Customers; • Customer Detail and Edit;

Tables:

Screens:

Customers;

Customer Detail and Edit;

Products;

Customer List;

Categories.

Product Detail and Edit;

Product List;

Methods (For each table):

Customer_PurchaseOrder_PopupEditor.

Create; CreateUpdate; Update;

Get; GetForUpdate;

Delete.

Asynchronous Methods:

Bootstrap method to populate categories;

Bootstrap method to populate customers;

Bootstrpa method to populate products.

3333

© OutSystems.© OutSystems.All AllRightsRightsReservedReserved

www.outsystems.comwww.outsystems.com

Customise your application

Step 21 - Make it look like your corporate brand

application Step 21 - Make it look like your corporate brand 1. Under “Themes” double click
application Step 21 - Make it look like your corporate brand 1. Under “Themes” double click

1. Under “Themes” double click on “CustomerManagement”.

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

3434

© OutSystems.© OutSystems.All AllRightsRightsReservedReserved

www.outsystems.comwww.outsystems.com

Customise your application

Step 22 - Make it look like your corporate brand

application Step 22 - Make it look like your corporate brand 1. Access the link (
application Step 22 - Make it look like your corporate brand 1. Access the link (

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

Remark: This will open the theme generator page.

3535

© OutSystems.© OutSystems.All AllRightsRightsReservedReserved

www.outsystems.comwww.outsystems.com

Customise your application

Step 23 - Make it look like your corporate brand

application Step 23 - Make it look like your corporate brand 1. Type your company’s URL
application Step 23 - Make it look like your corporate brand 1. Type your company’s URL

1. Type your company’s URL or any branded website to capture its style.

Remark: This will create automatically the style layer based on the supplied website.

3636

© OutSystems.© OutSystems.All AllRightsRightsReservedReserved

www.outsystems.comwww.outsystems.com

Customise your application

Step 24 - Make it look like your corporate brand

application Step 24 - Make it look like your corporate brand 3 7 3 7 ©
application Step 24 - Make it look like your corporate brand 3 7 3 7 ©

3737

© OutSystems.© OutSystems.All AllRightsRightsReservedReserved

www.outsystems.comwww.outsystems.com

Customise your application

Step 25 - Make it look like your corporate brand

application Step 25 - Make it look like your corporate brand 1. Select all the generated
application Step 25 - Make it look like your corporate brand 1. Select all the generated

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

3838

© OutSystems.© OutSystems.All AllRightsRightsReservedReserved

www.outsystems.comwww.outsystems.com

Customise your application

Step 26 - Make it look like your corporate brand

application Step 26 - Make it look like your corporate brand 3 9 3 9 1.
application Step 26 - Make it look like your corporate brand 3 9 3 9 1.

3939

1.

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

.

© OutSystems.© OutSystems.All AllRightsRightsReservedReserved

www.outsystems.comwww.outsystems.com

Customise your application

Step 27 - Make it look like your corporate brand

application Step 27 - Make it look like your corporate brand 1. Double click the logo
application Step 27 - Make it look like your corporate brand 1. Double click the logo
application Step 27 - Make it look like your corporate brand 1. Double click the logo

1. Double click the logo to access it

2. Select the logo

3. Import the image downloaded and apply it to the logo.

4040

© OutSystems.© OutSystems.All AllRightsRightsReservedReserved

www.outsystems.comwww.outsystems.com

Customise your application

Step 28 - Make it look like your corporate brand

application Step 28 - Make it look like your corporate brand 1. Deploy the application. 4
application Step 28 - Make it look like your corporate brand 1. Deploy the application. 4

1. Deploy the application.

4141

© OutSystems.© OutSystems.All AllRightsRightsReservedReserved

www.outsystems.comwww.outsystems.com

4242

Customise your application

Step 29 Check your new look

Customise your application Step 29 – Check your new look © OutSystems. © OutSystems. All All
Customise your application Step 29 – Check your new look © OutSystems. © OutSystems. All All
Customise your application Step 29 – Check your new look © OutSystems. © OutSystems. All All

© OutSystems.© OutSystems.All AllRightsRightsReservedReserved

www.outsystems.comwww.outsystems.com

Your application is ready!

Congratulation! You have finish the first exercise!

Extra Mile

Extra Mile Finished sooner? Great! Let’s do an extra mile and improve your application  4

Finished sooner? Great! Let’s do an extra mile and improve your application

4444

© OutSystems.© OutSystems.All AllRightsRightsReservedReserved

www.outsystems.comwww.outsystems.com

Hands-on exercises

Hands-on exercises Step 30 – Remove the “Total Price” column from the editor 1. Go to

Step 30 – Remove the “Total Price” column from the editor

30 – Remove the “Total Price” column from the editor 1. Go to “Customer_PurchaseOrder_PopupEditor” page. 2.

1. Go to “Customer_PurchaseOrder_PopupEditor” page.

2. Delete the “TotalPrice” line (delete all the container).

4545

© OutSystems.© OutSystems.All AllRightsRightsReservedReserved

www.outsystems.comwww.outsystems.com

Hands-on exercises

Hands-on exercises Step 31 – Retrieve product information based on the purchase 1. Double click on

Step 31 Retrieve product information based on the purchase

31 – Retrieve product information based on the purchase 1. Double click on the “Save” button
31 – Retrieve product information based on the purchase 1. Double click on the “Save” button

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

2. Drag an Aggregate to the flow.

4646

© OutSystems.© OutSystems.All AllRightsRightsReservedReserved

www.outsystems.comwww.outsystems.com

Hands-on exercises

Step 32 Configure the product query

Hands-on exercises Step 32 – Configure the product query 1. Double click the Aggregate and add
Hands-on exercises Step 32 – Configure the product query 1. Double click the Aggregate and add

1.

Double click the Aggregate and add the

3. Add a new Filter

“Product” entity.

2.

Add the “Category” entity.

4747

© OutSystems.© OutSystems.All AllRightsRightsReservedReserved

www.outsystems.comwww.outsystems.com

Hands-on exercises

Step 33 Configure the assignation

Hands-on exercises Step 33 – Configure the assignation 1. Set the filter to the expression shown
Hands-on exercises Step 33 – Configure the assignation 1. Set the filter to the expression shown
Hands-on exercises Step 33 – Configure the assignation 1. Set the filter to the expression shown

1.

Set the filter to the expression shown above

3. Drag an assign action to the flow.

2.

Go back to the Save screen action flow

4848

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

© OutSystems.© OutSystems.All AllRightsRightsReservedReserved

www.outsystems.comwww.outsystems.com

Hands-on exercises

Hands-on exercises Step 34 – Calculate the “Total Price” based on the amount 1. Double click

Step 34 – Calculate the “Total Price” based on the amount

34 – Calculate the “Total Price” based on the amount 1. Double click the “variable” and

1. Double click the “variable” and select “TotalPrice” as described on the picture above.

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

4949

this value before writing the value to database. 4 9 4 9 2. Double click the

2. Double click the “value” to open the editor.

© OutSystems.© OutSystems.All AllRightsRightsReservedReserved

www.outsystems.comwww.outsystems.com

Hands-on exercises

Hands-on exercises Step 35 – Calculate the “Total Price” based on the quantity 1. Double click

Step 35 – Calculate the “Total Price” based on the quantity

– Calculate the “Total Price” based on the quantity 1. Double click the “value” and perform

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.

5050

© OutSystems.© OutSystems.All AllRightsRightsReservedReserved

www.outsystems.comwww.outsystems.com

Thank you for your time!

Hope you have enjoyed the session!

Copyright

Copyright This material is owned by OutSystems and may only be used in the ways described

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