Create a SAP Fiori Shopping Cart App and Deploy it

In this step, we’ll create an ABAP package with the superpackage ZLOCAL.

1. Select ZLOCAL > New > ABAP Package.

   

2. Create new ABAP package:

   • Name: Z_SHOPPING_CART_TIER1_###
   • Description: Package ### - Tier 1
   • Superpackage: ZLOCAL
   • Package Type: Development
   
   Click Next >.

3. Click Next >.

   

4. Click Finish.

   

5. Now continue with step 2 of Create an Shopping Cart Business Object. Move on with Enhance the Behavior Definition and Behavior Implementation of the Shopping Cart Business Object and Integrate released purchase requisition API into Shopping Cart Business Object. Afterwards, come back and continue with step 2 of this tutorial.

This step is for creating a list report object page. Open Visual Studio Code and open your visual studio projects folder

1. Open Visual Studio Code and open your Visual Studio Code projects folder. Select the projects folder. Your created projects will later appear in this folder.

   

   Hint: You can find your folder under: C:\Users\<userid>\projects.

2. Select the menu on the top and click View > Command Palette.

   

3. Search for Fiori: Open Application Generator and select it.

   

4. Select Template Type: SAP Fiori, as template List Report Page and click Next >.

   

5. Configure data source, system and service:

   • Data source: Connect to a System
   • System: New System
   • System type: ABAP On Premise
   • System URL: https://mysystem.fqdn.com:44301
   • SAP client: 100
   • Service username: <your_username>
   • Service password: <your_password>

   Click the login symbol on the right side to log in.

   • System name: <your_system_ur>
   • Service: ZUI_SHOPCART_O4_### > ZUI_SHOPCART_###(0001) - OData V4
   

   Click Next >.

   Hint: In case of invalid security certificate errors, follow this link.

6. Select your main entity ShoppingCart and click Next >.

   

7. Configure project attributes:

   • Name: z_shopping_cart_tier1_###
   • Title: Shopping Cart ###
   • Description: A Fiori application.
   • Project folder path: c:\Users\<userid>\projects
   • Add deployment configuration: Yes
   • Add FLP configuration: Yes
   • Configure advanced options: No

   Click Next >.

   

   An FLP configuration does not have to be created in Visual Studio Code, as this will be created in a later step using tools for setting up the Launchpad content.

   The project folder path has a further substructure.

   Hint: Your module name must be written in lowercase letters.

8. Configure deployment:

   • Target: ABAP
   • Target system: <your_abap_system_url>
   • Enter client: 100
   • SAPUI5 ABAP Repository: zshopcart_###
   • Package: z_shopping_cart_tier1_###
   • How do you want to enter Transport Request? Manually
   • Transport Request: <your_transport_request>
   

   Click Next >.

   Hint: If you want to copy your transport request, please do following: Open Eclipse, search your package Z_PURCHASE_REQ_### and open it. Open your transport organizer to see your transport request. The transport request of the superior folder needs to be chosen. Copy your transport request for later use. You can find your transport request underneath the Modifiable folder.
   
   

9. Configure Fiori Launchpad settings:

   • Semantic Object: z_shopping_cart_tier1_###
   • Action: maintain
   • Title: Shopping Cart ###
   
   Click Finish.

In this step, we’ll run the SAP Fiori application, to check

1. In the Application Information overview, select Preview Application to start the preview.

   

2. Log in with your credentials. Then select the first entry in the search bar.

   

3. Your browser opens. Click Go and check your application.

   

This step describes the deployment of the created application.

1. In the Application Information overview, select Deploy Application to start the deployment.

   

2. When prompted, check deployment configuration and press y. Open the URL at the end of the deployment log in browser to preview the application.

   

   When the deployment is successful, you will get these two information back as a result: deployment successful.

   Hint: If an error message appears, use the Environment Check.

1. Open the URL to open the deployed application.

   

2. Click Go and check your application.

   

1. Open Eclipse and check the BSP library in your package z_purchase_req_tier1_###. You can find your package under Local Objects (ZLOCAL) > User123. If you are not able to see BSP applications and SAP Fiori Launchpad app description items, refresh your package by pressing F5.