1. Create the Sales Order Page

Create an App Project

Note that there are 2 different approaches for this tutorial step.

You can do the first approach, Basic steps, which will teach you about UI components, stylizing them, and organizing them on the page.

Alternatively, to save time, you can do the second approach, (Optional) Start with Template Project, which will bypass the details of adding and stylizing components, and instead teach you how to copy an existing SAP Build Apps template project which has some of the UI components for this tutorial already built.

Basic Steps - Create New Project

First, we need to create a brand new project from the build lobby.

Select Lobby to access the entry page of SAP Build.
In the Lobby, choose Create and Create.
Select Application and Next.
Select Frontend and Next
Select Web & Mobile Application.
Select Next
On the next screen, enter the following:

Input Field Input Value

Project Name Create Sales Order

Description SAP Build Apps Sales Order Project
Select Review.

Input Field	Input Value
Project Name	Create Sales Order
Description	SAP Build Apps Sales Order Project

You can see the Summary.

Select Create

By default your new application contains a page with title and text fields. In this step, you will focus on turning this page into your app – by adding components like input boxes and buttons, and then styling them. This is known as creating the user interface, also known as the UI.

Basic steps - Create UI

Change from FullScreen to Mobile.
Select the text field, and Choose the Bin to delete it.
In the Properties tab, change the Page name to Create Sales Order.
Select the title field, and in the Properties tab, change the Content text to Sales Order Workflow.
Drag a Container component from the left hand panel to your canvas. Container components let you group components and configure the collection of the components as a single unit.
With the container selected, in the Properties tab, change the Component display name to Form.
Still with the container selected, open the Style tab, Choose the dropdown icon for the Layout Container, and Choose Edit.
For background color.

Select TRANSPARENT and open UNIVERSAL BACKGROUND COLORS.

Select Level 4 background.
Expand the padding section
Choose each rectangle Opx. Go to Theme, and select the L size.
This is what you should see.

Let’s save the style by scrolling up in the Style tab, and choose New Style.
Enter Layout Form Container Choose OK and Save
Drag in another container into the outer container (Form). It may be easier to drag it into the Tree view on the lower right, so you can put it precisely where you want. The Tree makes it easier to select specific components and to create a hierarchy of components on the page.
Inside the new container (Container 1), add a text and an input field.
Select the new, inner container (Container1 from the Tree view)
Go to the Layout tab, and under Layout, set the container to Horizontal.
Set Align components to the middle (Align children vertically to the middle).
Select the text field, go to the Layout tab, then Width and Height, and set the width to exactly 75px.
Select the input field, and in the Properties tab, set the Label property to an empty string, that is, delete the Label property value).
From the Tree view, select the inside container ( Container1 ).
Duplicate the container by Choosing on the Duplicate icon.

Repeat this 2 more times, until you have 4 fields.

Select Save.
Choose on each field label and change it to the following field names, in this order

Fields

Customer

Material

Quantity

Delivery Date
Save your work
At the bottom of the page (outside container 4), add a button.
In the Properties tab, set the Label to Get Approval
In the Style tab, next to Primary Button, Choose the dropdown button and select Edit.
For Background color in SAP MORNING HORIZON CONTENT PALETTES, select the color Emphasized.
Select Save (upper right).

Fields
Customer
Material
Quantity
Delivery Date

Next lesson