In this lesson, look at building our first app, the simple Expense Report app. We'll spend a fair amount of time reviewing the artifacts that are created and how we can customize them.
Setting Up the Project
Throughout this series we will be working mostly on one project, Expense Reports. We will start small and eventually incorporate everything from complex server-side rules to Process Cloud Service flows. To start with, we will just import a project that contains the Business Objects and an empty web application.
Drag the ExpenseReportStarting.zip file into the dialog
Give the file any name you want, I suggest ExpenseReport YourName
Click Import.
Adding the List
Click the project to open it.
In the left panel, click the Web Applications node. Then expand flows -> my-expense-reports and click my-expense-reports-start. The page opens in the Page Designer.
In the list of components on the left, find the List View component. Then drag and drop it onto the page.
Select the List View in the Page Designer. (If you have just dropped it in, it will be selected already.) Then open the Property Inspector and select the Quick Starts page.
Under Business Objects, select ExpenseReport and click Next.
Select the second row template and click Next.
Select these fields in the left panel of the wizard:
name
countryObject -> items -> item[i] -> name
amount
startDate
endDate
Change the display for startDate and endDate to Input Date.
Change the display for amount to Currency.
Click Next. Leave the default settings in the Query panel of the wizard and click Finish. The list in the Page Designer reloads with data.
Click the Name label next to the country name and in the Property Inspector, change the Text property to Country.
Adding the Create Page
Now we will generate the Create page.
Select the List View in the Page Designer.
In the QuickStart tab of the Property Inspector, click Add Create Page.
In the Select Endpoint page, choose ExpenseReport from the Business Objects and click Next.
Add these fields:
amount
country
description
endDate
justification
name
startDate
Change description and justification to display as Text Areas.
Change startDate and endDate to display as DateTime. Change amount to display as Currency.
Optionally change the Button Label and Page Title to better names.
Click Finish.
Open the Create page by switching into Live mode and clicking the Create button.
Switch back to Design mode and select the Form Layout component. In the Property Inspector, set Max Columns to 2.
Select the Description field and set the Rows property to 4. Do the same for Justification.
Rearrange the fields until your app looks like this:
Adding the Edit Page
Go back to my-expense-reports-start tab in the editor.
Select the List View then open the QuickStarts tab of the Property Inspector. Click Add Edit Page.
Select ExpenseReport on both the Read Endpoint and Update Endpoint pages of the wizard.
Add these fields:
amount
country
description
endDate
justification
name
startDate
id
Switch the description and justification fields to display as Text Area like you did in the Create page. Also update amount to be a Currency and endDate and startDate to be DateTimes.
Optionally change the Button Label and Page Title to friendlier text (i.e. "Edit" and "Edit Expense Report").
Click Finish. Open the Edit Page. Note: When you open a page that takes a mandatory input parameter, like the Edit page for an entry, the editor needs a value for the input parameter, otherwise it will show a 404 error in the editor. You can either switch into Live mode, select a record in the list, and click the Edit button, or you can open the Edit page from the list of pages and use the button and input an ID manually.
Delete the id field.
Click the Heading and in the Property Inspector change the Text to {{ "Expense Report " + $page.variables.expenseReport.id }}
Fix up the rest of the page like we did with the Create page.
