Creating an HTML5 Starter Application Project

You can create List/Details starter applications for HTML5 to call SAP services in SAP NetWeaver. Gateway:

You can create one of the following starter applications for HTML5 to call SAP services in SAP NetWeaver Gateway:

● List/Details Application (jQuery Mobile)

Generate an HTML5 List/DeCreating an tails starter application based on jQuery Mobile for displaying SAP data in list and details screens.

● List/Details Application (SAPUI5)

Generate an HTML5 List/Details starter application based on SAPUI5 for displaying SAP data in list and details screens.

To create your HTML5 starter application:

1. From the Eclipse menu bar, select File > New > Other. The Select a Wizard page is displayed.

2. Expand the OData Development node and select Starter Application Project.

3. Choose Next. The New Starter Application Project page is displayed.

4. In the Project name field, enter a name for your project.

5. From the Create new project for drop-down list, select HTML5.

6. Choose Next. The Starter Application Templates for HTML5 page is displayed.

7. Select the desired template.

○ List/Details Application (jQuery Mobile)

○ List/Details Application (SAPUI5)

8. Choose Next. The Location of OData Service page is displayed.

9. Select the desired SAP NetWeaver Gateway service in one of the following ways:

○ In the Service URL field, enter the desired service’s URL, and then choose Go.

○ Choose Catalog… and select the desired SAP service using the Service Catalog dialog.

○ Select the File system radio button and browse for the relevant service metadata and service document.

When the service is validated, its details are displayed.

10. Choose Next to continue with the wizard to configure the application based on the selected application type.

○ For the List/Details jQuery Mobile template, continue with the wizard as described in the Defining the jQuery Mobile List/Details Page Layout section.

○ For the List/Details SAPUI5 template, continue with the wizard as described in the Defining the SAPUI5 List/Details View Layout section.

11. Choose Finish. An Eclipse project with the application code is created in your workspace.

Related Links

Defining the jQueryMobile List/Details Page Layout [page 139]

The jQuery Mobile List/Details application is created by selecting a service and defining its pages. The generated application is an HTML5 mobile application based on the jQuery Mobile library, that contains code for each page you have specified.

Defining the SAPUI5 List/Details Page Layout [page 140]

Explains how to define the application for List/Details.

8.3.2.1 Defining the jQueryMobile List/Details Page Layout

The jQuery Mobile List/Details application is created by selecting a service and defining its pages. The generated application is an HTML5 mobile application based on the jQuery Mobile library, that contains code for each page you have specified.

To configure the pages in a List/Details application based on jQuery Mobile:

1. If you have not done so already, define the application details as described on the Creating a Starter Application Project section (steps 1-9). The Page Layout page is displayed.

2. In the Page Title field, enter the name of the first page.

3. From the Page Type drop-down list, the List page option is automatically selected.

4. From the Entity Set Navigation drop-down list, select the desired collection.

5. Choose Add (+) to see the fields available for the selected entity set. The Add Fields page is displayed.

6. Select the checkboxes of the desired fields for the page.

We recommend that you not have more than 3-4 fields in a list.

7. Choose OK.

8. If needed, select a field and click Remove (-) to delete it.

9. Use the Up and Down arrows to change the positioning of the fields in the view. The field positioned first in the list will appear bold in the relevant generated application’s list page.

10. Under the Pages section, choose Add (+) to add another page.

11. Repeat this procedure to configure the additional pages.

8.3.2.2 Defining the SAPUI5 List/Details Page Layout

Explains how to define the application for List/Details.

The List/Details application is created by selecting a service and defining its views.

For each view, you must select one of the following types:

● List

The UI generated from this type of view is a table displaying information obtained from an entity set. For the chosen entity set, you are required to choose the fields you would like to display which will then become the table column headers. For example, the Customer entity set will have fields such as Customer Name, Country, Street, Telephone Number, and so on.

In addition, you can add the generated list view the option of creating new items into the chosen entity set, or of deleting existing items.

● Details

The UI generated from this type of view is a 2-columned table displaying information obtained from an entity set. For the chosen entity set, you are required to choose the fields you would like to display which will then become the table row headers. The first column displays the entity set field and the second column displays the field value.

In addition, you can add the generated details view the option of editing the information obtained from an entity set.

The relationship between the views is based on the association between the entity sets. After you’ve selected an entity set for the first view (for example, Customers), in the second view you can only select an entity set that is associated to it (for example, Banks) or you can choose to display the details of the entity set you selected for the first view (for example, Customers).

To configure the views in a List/Details application, proceed as follows:

1. In the View Title field, enter the name of the first view.

2. From the View Type drop-down list, the List view option is automatically selected.

3. From the Entity Set Navigation drop-down list, select the desired entity set.

4. Select additional operations you would like to support from the view. For views of type List the following options are available:

○ Select the Add Create Option checkbox if you would like to add this list view the option of creating new items.

○ Select the Add Edit Option checkbox if you would like to add this list view the option of deleting displayed items.

○ For views of type Details, select the Add Edit Option checkbox if you would like to add this details view the option of editing the displayed item.

You can choose to add the view an option to perform an operation that is described above (creation, deletion or editing of the entity set items), only if this operation is supported by the selected entity set.

5. Choose Add (+) to see the fields available for the selected entity set. The Add Fields page is displayed.

6. Select the checkboxes of the desired fields for the view.

It is recommended not to include more than three or four fields in a list.

7. Click OK.

8. If needed, select a field and click Remove (-) to delete it.

9. Use the Up and Down arrows to change the positioning of the fields in the view. The field positioned first in the list will appear bold in the relevant generated application’s list view.

10. In the Views section, choose to Add (+) another view.

11. Repeat this procedure to configure the additional views.