8.3    Development Process Overview

Before we start developing applications or discussing the development process, let’s take a moment to explore SAP Web IDE’s features. After you log in to SAP Web IDE, you should see the development page (see Figure 8.9).

As shown in Figure 8.9, the menu bar 1 gives access to all the functions and features available in SAP Web IDE. Below the menu bar is the toolbar 2, which provides access to some of the most commonly used features, such as Save, Delete, Run, and so on. On the left side of the screen are the Welcome page and the Development preferences 3. When you click the Development button, you’ll open a screen area next to it, which shows the list of projects and files within a project 4. You can open a file and see its contents on the right-hand side in the code editor area 5. If you open several files, then those files will be shown as tabs. On the right side of the screen, you’ll find features such as Search, Git Pane, Git History, and the Collaboration pane, with features such as SAP Jam, API Reference, and Outline 6.

Figure 8.9    SAP Web IDE Interface

To further understand SAP Web IDE, we need to examine each of the phases in the development process. The sections that follow walk through each phase of the development process—from creation to deployment.

8.3.1    Create

During the create phase of the SAP Web IDE development process, you can start by either creating a new project or importing an application. Various methods exist for creating new projects in SAP Web IDE, and each of these methods depends on the kind of application you want to create and the data source for your app.

There are three methods for creating new projects using SAP Web IDE, as shown in Figure 8.10:

• New Project from Template
• New Project from Sample Application
• New Extension Project

Figure 8.10    Creating New Project in SAP Web IDE

Alternatively, you can create a new project from the menu bar as well by going to File • New. The same new project options are available there.

Next, we’ll look at these three options in closer detail.

New Project from Template

Choose New Project from Template if you want to create an application using standard templates provided by SAP. SAP Web IDE is more than just a tool to build SAP Fiori apps; currently, there are 15 templates (see Figure 8.11), which you can use to build a Basic SAPUI5 Project, use for Plugin Development, use to build SAP Fiori Applications, or use to build SAPUI5 Mobile Applications.

Figure 8.11    All Templates

We’ll be focusing only on the templates for SAP Fiori apps. The following is a list of templates use specifically for developing SAP Fiori apps. With these eight templates, you can develop transactional apps and fact sheet apps (Figure 8.12):

1. SAP Fiori Master-Detail Application (transactional apps)
2. CRUD Master Detail Application (transactional apps)
3. SAP Fiori Worklist Application (transactional apps)
4. Transactional App for SAP Event Management (transactional apps)
5. Existing Fact Sheet Application (fact sheet apps)
6. Modification Free Fact Sheet Application (fact sheet apps)
7. New Fact Sheet Application (fact sheet apps)
8. SAPUI5 Application

Figure 8.12    SAP Fiori Application Templates

New Project from Sample Application

Choose New Project from a Sample Application when you want to refer to an application to build your own SAP Fiori application based on it. Currently, there are three sample applications, and all three samples are specifically for transactional app development (see Figure 8.13):

• Shop
  This is a full-screen app that shows a shopping scenario on the Enterprise Performance Model (EPM).
• Manage Products
  This is a Master Detail app that shows creation and maintenance of product entities for EPM.
• Approve Purchase Orders
  This is a Master Detail app that shows the approval process based on EPM.

Figure 8.13    Sample Applications

• Create Custom Properties
  This is a sample application to create your own property and integrate it with SAP Lumira property editor.
• Create Maps
  This is a sample Google Heatmap extension showing how to use the Google map service.
• Embed Image
  This sample application shows how to use image files in the extensions.
• Generate Thumbnail
  With this sample app you can create a thumbnail view in SAP Lumira by adding custom code in exportToSVGString().
• Work with Data Filter
  This is an SAP Lumira visualization extension that demonstrates the filters/excludes/drill context menu options of SAP BusinessObjects Lumira.

New Extension Project

Choose New Extension Project if you want to alter the functionality or appearance of an original SAP Fiori application. This creates an extension project; the changes are added only to the extension project, so the original application remains unchanged (see Figure 8.14).

Figure 8.14    Extension Project

You can also begin a project by importing an existing application and resources from one of four places—choose Archive, SAPUI5 ABAP Repository, SAP HANA Cloud Platform, or Clone from Git Repository—into the SAP Web IDE workspace, as shown in Figure 8.15.

Figure 8.15    Importing Applications into SAP Web IDE

Alternatively, you can import an application from the menu bar as well by choosing File • Import. To clone a Git repository, go to File • Git.

Exercise

In the previous chapter, we discussed the EDMX file in detail and the terms of an EDM. Next, you’ll use an EDMX file as a source and develop your first SAP Fiori application in SAP Web IDE. In the create phase, you’ll open SAP Web IDE and create a project from a template. Follow these steps:

1. Log in to the SAP HANA cockpit, and start SAP Web IDE by clicking the SAP Web IDE application from your services.
2. Click on the Open SAP Web IDE URL to launch SAP Web IDE
3. Create a new project by clicking New Project from Template (see Figure 8.16).
   

   Figure 8.16    New Project from Template

4. Select SAP Fiori Master-Detail Application and click Next (see Figure 8.17).
   

   Figure 8.17    Master-Detail App

8.3.2    Develop

We’ve explored the different options for creating a project, so now let’s turn our attention to the development phase. You have many different options to develop an application, and your options depend on whether you’re a programmer or a nonprogrammer.

If you have programming experience, you can use the source code editor, which has features such as code completion, dynamic API references, and so on, to start coding your app.

Alternatively, you can use the templates: Wizards will guide you through the coding process step-by-step and will automatically generate the files and the code for your app. You can use the what you see is what you get (WYSIWYG) layout editor as well to design your UI. The standard templates provided by SAP Web IDE were shown earlier in Figure 8.12. In addition, you can create your own templates and manage those custom templates from the same location. For extensibility projects, you can use the visual extensibility support to take existing SAP Fiori applications and extend, modify, or replace elements of your app.

The following is a list of advantages you’ll notice in SAP Web IDE while you’re in the development phase:

• You can collaborate directly with other developers via the integrated collaboration features, such as SAP Jam.
• With dynamic interactive features such as code completion and API reference, you can accelerate your coding and testing process.
• You can build your app without connecting to any system; that is, you can develop with mock data and preview the app as well.
• Using WYSIWYG editors, templates, and wizards, you can build SAP Fiori apps very quickly.
• You can share the same repository with other developers, with virtually no setup required.
• You can extend the SAP-delivered applications using SAP Web IDE’s extensibility framework.

Continuing with the exercise, next we’ll use an EDMX file to create a master-detail app. Before you start the exercise, download the sample EDMX file, which we provided along with this book:

1. Enter “MyContacts” in Project Name and click Next (see Figure 8.18).
   

   Figure 8.18    Project Name

2. Select File System as the source.
3. Browse for the EDMX file that you downloaded before starting this exercise (see Figure 8.19).
   

   Figure 8.19    EDMX File

4. Click Next.
5. Enter the details shown in Figure 8.20 for Master Section.
   

   Figure 8.20    Master Section

6. Enter the details as shown in Detail Section and click Next (see Figure 8.21).
   

   Figure 8.21    Detail Section

7. Click Finish. This will automatically take you to SAP Web IDE (developers view).
8. Navigate to Master.view.xml, right-click, and select Open With • Layout Editor (see Figure 8.22).
9. Select Object List Item.
   

   Figure 8.22    Master View

10. Select the Company field in the Intro section from the list by clicking (see Figure 8.23).
    

    Figure 8.23    Add Intro to Object List Item

11. Click Save.

We successfully changed the master view; next, let’s change the detail view:

1. Navigate to Detail.view.xml, right-click, and select Open With • Layout Editor (see Figure 8.24).
   

   Figure 8.24    Detail View

2. Select Object Header. Then, select the Company field in the Intro section from the list by clicking (see Figure 8.25).
   

   Figure 8.25    Add Intro to Object Header

3. Search for the Image control, then drag and drop the image component to the object header area (see Figure 8.26).
4. Click the Image field, and select the image in the source file by clicking .
5. Set the Height and Width of the image to “50px” (see Figure 8.27).
   

   Figure 8.26    Drag and Drop Image Control

   

   Figure 8.27    Set Source, Height, and Width of Image

6. Next, let’s change the icons. Select the icon and set the value in the Icon field to sap-icon://contacts, or select the icon from the value help by clicking (see Figure 8.28).
   

   Figure 8.28    Set Tab 1 Icon

7. Similarly, click the second icon and change the icon to sap-icon://map.
8. In the second tab, select the label and set the text to Address (see Figure 8.29).
   

   Figure 8.29    Set Tab 2 Icon and Label

9. Select the second text box, then select the Address field from the value help by clicking (see Figure 8.30).
10. Click Save.
11. Next, we’ll import the sample data models. Right-click the Model folder and select Import • From File System (see Figure 8.31).
    

    Figure 8.30    Map Address Field to Text

    

    Figure 8.31    Import Models

12. Click Browse (see Figure 8.32).
    

    Figure 8.32    Browse File

13. Select the ContactDetailsSet.json file from the source file you downloaded prior to this exercise.
14. Repeat steps 1, 2, and 3, and add the KM.jpg, KS.jpg, and RR.jpg files to the model folder (see Figure 8.33).
    

    Figure 8.33    Select Files

15. After you complete the previous steps, your model folder should look like Figure 8.34.
    

    Figure 8.34    Model Folder

16. Click Save.

8.3.3    Preview

Now that we’ve explored the options available for creating and developing applications, we can discuss previewing the finished product. In the preview phase, you can test your application by previewing it on different device screen sizes, such as a desktop, tablet, smartphone, or smartwatch, to see exactly what it would look like. You can also preview applications using simulators. The beauty of SAP Web IDE is that you can test your app with random mock data generated by SAP Web IDE.

When running an application with mock data, you can either let the mock service generate the sample data for you, or edit the mock data to have more meaning. You can even provide the data in a JSON file format.

To edit and run the mock data, follow these steps:

1. Right-click metadata.xml and select Edit Mock Data (see Figure 8.35).
   

   Figure 8.35    Edit Mock Data

2. Figure 8.36 shows the mock data we loaded in the previous step.
   

   Figure 8.36    Verify Mock Data

3. To run the app with mock data, click the project folder, and then from the menu bar go to Run • Run with Mock Data (see Figure 8.37).
   

   Figure 8.37    SAP Web IDE Application, Run with Mock Data

You should now see the My Contacts app in the simulator.

Now, let’s look at the simulator in Figure 8.38. In the preview phase of the application, this feature lets you choose different types of devices.

Figure 8.38    Simulator

As shown in Figure 8.38, at the top of the page there are settings for Large, Medium, Small, and Custom 1; pick the size of the screen that you want to test your application on. After you make changes to the code of your application, you can see the changes instantly by clicking the Refresh button 2. You can change the orientation of the application to landscape or portrait by clicking the Orientation button 3. You can also select different languages from the language dropdown 4; however, this requires the language property files to be part of your application project. You can generate a QR code for your application 5, and you can then test the application directly on your mobile device by scanning the QR code.

8.3.4    Deployment

The last phase in the development process is to deploy your application from SAP Web IDE to your server. You can deploy your application to the following areas/platforms:

• SAP Cloud Platform
• ABAP Repository
• Register to SAP Fiori launchpad

All these options are integrated with Git for your source code management needs.

In this final phase of the development process, let’s deploy the app to SAP Cloud Platform and then register it with SAP Fiori launchpad:

1. Right-click the project folder, then choose Deploy • Deploy to SAP HANA Cloud Platform (see Figure 8.39).
   

   Figure 8.39    Deploy to SAP Cloud Platform

2. Log in to SAP Cloud Platform (see Figure 8.40).
   

   Figure 8.40    Logging in to SAP Cloud Platform

3. Enter an Application Name and the Version number (see Figure 8.41).
4. Click Deploy (see Figure 8.41).
   

   Figure 8.41    Application Name

5. To run this app on SAP Fiori launchpad, click Register to SAP Fiori Launchpad (see Figure 8.42).
   

   Figure 8.42    Registering to SAP Fiori Launchpad

6. Enter the Application Name and Description and click Next (see Figure 8.43).
   

   Figure 8.43    General App Information

7. Configure the tile by selecting the app Type, Title, Subtitle, and Icon (see Figure 8.44), and then click Next.
8. Assign the app to a Category and a Content Package and click Next (see Figure 8.45).
   

   Figure 8.44    Tile Configuration

   

   Figure 8.45    Assignment

9. Click Finish to confirm that the app is registered to SAP Fiori launchpad (see Figure 8.46).
10. After the app is registered, you should receive a pop-up confirmation message. Click OK to open SAP Fiori launchpad (see Figure 8.47).
    

    Figure 8.46    Confirmation Step

    

    Figure 8.47    App Registration Notification

11. In SAP Fiori launchpad, you should see the My Contacts app in the catalog. Add the app to the My Home group by clicking + below the tile (see Figure 8.48).
    

    Figure 8.48    SAP Fiori Catalog

You should now see the My Contacts app in SAP Fiori launchpad. Clicking the tile will open the app created in this exercise (see Figure 8.49).

Figure 8.49    SAP Fiori Launchpad