develop-an-sap-fiori-application-ui-and-deploy-it-to-abap-using-visual-studio-code-97df0a6.md

Develop an SAP Fiori Application UI and Deploy it to ABAP Using Visual Studio Code

Get an overview about how to create and deploy an SAP Fiori application to ABAP using Visual Studio Code.

For further assistance with creating and deploying an application into SAP Fiori launchpad, see Create a SAP Fiori App in Visual Studio Code and Deploy it to SAP BTP ABAP Environment.

Prerequisites

• You have installed and set up Visual Studio Code including the SAP Fiori tools extensions. See Visual Studio Code.
• You have access to a RAP business service that has been exposed as an OData UI service. See Using Service Binding Editor for OData V2 Service.
• To establish a connection with your ABAP environment system, you either have to be a space developer in the ABAP environment instance or have access to a service key in the ABAP environment instance. See Add Space Members Using the Cockpit and Creating Service Keys in the ABAP service instance.
• You have established trust by setting up a custom Identity service. See Setup of a Custom Identity Service.

1. Generating and Deploying Your Application

Note:

Prerequisites

• You have created a development package in ABAP development tools for Eclipse. See Creating ABAP Packages.
• You have exposed a RAP business service as an OData UI service. See Using Service Binding Editor for OData V2 Service.
• Business catalog SAP_A4C_BC_DEV_UID_PC is assigned to your user, which allows you to discover available OData UI services and deploy your application.
• Business catalog SAP_CORE_BC_EXT_TST is assigned to your user, which allows you to preview your application. See Business Catalogs for Development Tasks.
• You have an open transport request.

1. As a developer user in Visual Studio Code, generate an SAP Fiori application. See Generate an Application.

   In the Data Source and Service Selection section of the Template Wizard, select the following values:

   • Data source: Connect to a System.

   • System: New System

   • System type: ABAP Environment on SAP Business Technology Platform

   • ABAP environment definition source:

     • (Option 1) Discover a Cloud Foundry Service

       Note:

       You have to log on to your Cloud Foundry space by executing command cf login in the terminal or by navigating to View > Find Command > CF: Login to Cloud Foundry. When you're prompted to enter the API endpoint, org name, and space, you can navigate to your subaccount in the SAP BTP cockpit, where you can find this information.

     • (Option 2) Upload a Service Key File

   • Continue with choosing a system name and service.

   In the Project Attributes section, add deployment configuration and FLP configuration to your UI project. See Additional Configuration.

   If you want to create your deployment configuration later, see Generate Deployment Configuration ABAP.

   If you want to create you FLP configuration later, see SAP Fiori Launchpad Configuration.

2. Continue with the development of the UI, for example, with the help of guided development. See Implement Features using Guided Development.

3. Now you can preview the generated SAP Fiori application. See Preview an Application.

4. Deploy the SAP Fiori UI by executing command npm run deploy in the terminal of your project. See Deployment to ABAP.

5. On top of these launchpad app descriptor items that are created automatically during app deployment, you may also create such objects manually in ABAP development tools for Eclipse. Refer to Creating Launchpad App Descriptor Items.

2. Creating and Publishing Your Identity and Access Management (IAM) App

Note:

Prerequisites: Business catalog SAP_A4C_BC_DEV_PC is assigned to your user, which is required for development with ABAP development tools for Eclipse. See Business Catalogs for Development Tasks.

1. To manage access to your SAP Fiori application, you have to log on as a developer in ABAP development tools for Eclipse to create an Identity and Access Management (IAM) application, assign a launchpad app descriptor item for your UI5 application and a service, and maintain authorizations (steps 1-3 in the figure above). See Creating an IAM App for the Business Service.
2. Once you have created your IAM app, you have to create a business catalog. See Creating a Business Catalog.
3. Assign your IAM app to the business catalog.
4. Publish the IAM app and business catalog locally.

Next Step

Launch your app in SAP Fiori launchpad. See Add Your App to SAP Fiori Launchpad.

Related Information

Visual Studio Code

SAP Fiori Tools

SAP Fiori Overview

Tutorial: Integrate List Report into ABAP Fiori Launchpad

Tutorial: Create an SAP Fiori App in Visual Studio Code and Deploy it to SAP BTP ABAP Environment