The goal for this exercise is to evolve the Credit Card management app that was built in the "Modern Web Apps with ReactJS and OutSystems" webinar by adding to capability to some analysis by Expense Type:

Just follow the steps below to get to the desired result.

1.  Create an OutSystems Personal Environment

Go to the OutSystems website, create a new environment for you to play with the technology and install the IDE (Service Studio).

2.  Install the baseline

In this component, click the download button and follow the steps to install the base application (that was built in the webinar) to your personal environment:

3.  Open Service Studio and the app

Connect Service Studio to your environment Click Credit Card Expenses Click the module CreditCardExpenses

4.  Under the Data tab, Open the CreditCardExpensesDataModel

5.  Drag the Card and Expense entities to the canvas

6. Add a new static entity to the database called Expense Type

7. Add five records to the ExpenseType static entity

8. Add the Merchant entity, double click on Merchant and add a Name (text) attribute and an ExpenseTypeId (a reference attribute, much like a foreign key, to the ExpenseType entity. ) 

9. Drag the ExpenseType and Merchant entities into the CreditCardExpensesDataModel 

10. Under the Interface tab, add the MerchantList and MerchantDetail screens to the MainFlow Layout by dragging the Merchant entity into the Layout

11. Under the Interface tab, open the MerchantList screen, and then add the MerchantList screen to the top menu by dragging the screen icon from the right window, to the menu on the screen.

12. Add an ExpenseAnalysis screen using the blank screen template

13. Add a title to the ExpenseAnalysis screen

13. Add a Columns 2 layout to the content section of the ExpenseAnalysis screen

14. Add a Card Sectioned widget to both columns

15. Add text to the second section in both columns as shown below

16. Use the Fetch Data from Database action by right clicking on the ExpenseAnalysis screen and choosing the Fetch Data from Database option

17. Under the Data tab, drag the Expense and Merchant entities into the Aggregate creator window

18. In the Aggregate window, under the Sources tab, create a new join between the Expense and Merchant tables

18. Publish

This will make sure your application model is updated to the latest version and will allow you to preview the data as you create your aggregate

19. In the Aggregate (found at Mainflow > ExpenseAnalysis > GetExpenses) select the Label column and choose "Group by Label"

20. Select the Amount column and choose Sum

21. Select the newly create "Sum of Amount" column and choose Sort Z->A

22. Return to the ExpenseAnalysis screen, drag the GetExpenses aggregate to the left column's third section

23. Change the alignment of the AmountSum field to the right of the row by clicking on the field, then clicking the appropriate button in the ribbon.  Then change the labels text to "Expense Type" and "Amount."  

24. Delete the NavigationPagination widget

25. Place a Donut Widget into the right column and fill in the appropriate properties for the chart

25. Add the ExpenseAnalysis screen to the menu

26. Publish and open the application

27. While in your application, go to the MerchantList screen, and a few merchants matching some of the company names of the expenses in the app

28. Navigate to the Expense Analysis menu and marvel at the what you have achieved!

Bonus Exercise: fine tune the details!

You'll notice in the end result above that be Expenses that don't match one of the defined Merchants have an empty Expense Type in both the list on the left and the donut chart on the right. Go back to Service Studio and:

1. Find the expression of the expense type on the left and replace it's value with If(GetExpenses.List.Current.Label = "", "Uncategorized", GetExpenses.List.Current.Label)
2. Find the Label value mapping in the chart on the right and replace that with If(Label = "", "Uncategorized", Label)

Also, do go ahead and some spacing to the menu labels on the top menu.

When you're finished you'll get this beautiful screen:

Now, unleash your full power by learning more in https://www.outsystems.com/learn/