Develop SAP Fiori (SAPUI5) Applications with VSCode [EN]

Installing required extensions

SAP Fiori Tools - Extension Pack

To start developing SAP Fiori applications with VSCode the most important extension is the SAP Fiori Tools - Extension Pack. This extension pack bundles multiple VSCode extensions which help you during the whole process of developing SAP Fiori apps. Here's an overview on what's included:

• Application Wizard: This extension allows you to use a wizard-style approach to create a connection to the SAP system you want to work with and generate the provided SAP Fiori elements templates.

• SAP Fiori Tools - Application Modeler: Allows you to view and modify a visualization of the application's pages, navigation, and service entities. You can add new navigation targets and pages, delete pages, and navigate to the corresponding editing tools.

• SAP Fiori Tools - Service Modeler: Similar to the Application Modeler but allows you to see a schematic view of the annotations applied to service metadata elements and helps you to copy the annotations from lower layers to the local annotation file for overriding.

• SAP Fiori Tools - XML Annotation Language Server: Brings code completion, snippets and i18n support during the development of XML views and fragments.

• UI5 Language Assistant: Provides SAPUI5 language editor support.

• XML Toolkit: Allows you to validate the syntax of XML files and detect multiple error types in a single file.

Note: There are some other extensions included as well but I won't mention them here as we don't use them durin this tutorial.

ESLint

When bootstraping a new SAP Fiori application it comes with a predefined configuration file for ESLint (.eslintrc). ESLint is used to statically analyze a codebase to quickly find problems which could lead to runtime errors. To integrate ESLint into VSCode you should install the ESLint Extension.

Prettier - Code formatter

Additionally to ESLint I recommend installing the Prettier - Code formatter Extension. Prettier is an opinionated code formatter which is used to keep the codestyle of a codebase clean and consistent by showing you issues and directly formatting them to the defined style.

Create a connection to a SAP system

Before starting to scaffold an application we need to create a connection to the SAP system we would like to work with. For this tutorial we will use an On Premise ABAP environment.

1. Open the SAP Fiori view in VSCode (Click on SAP Fiori in the main navigation on the left side)

2. Click on "Add SAP System" in the "SAP SYSTEMS" panel on the left side

3. Choose the System Type of your SAP System. This can be either a self-hosted environment (ABAP On Premise) or an SAP environment hostet on the Business Technology Platform (ABAP Environment on SAP Business Technology Platform). As mentioned above we will choose "ABAP On Premise" for this tutorial.

4. Enter the system information and credentials and press "Save"
   - System Name: Only used for you to identify the system in VSCode if there are multiple connections.
   - URL: The connection URL to the On Premise environment (eg. https://my-onprem-system.com:4430)
   - Client: The client which should be used in this connection (eg. 200)
   - Username & Password: Credentials of the environment

5. If the connection could be successfuly created you'll see the new SAP System in the "SAP SYSTEMS" panel on the left.

You have now successfully connected VSCode with your SAP environment! The next step will be creating our first application.

Scaffold SAP Fiori application

We can now start scaffolding our first SAP Fiori application inside VSCode. For this the extension "Application Wizard" we installed before provides a nice wizard where this can be done. 

1. Right-click on the SAP System you created in the last chapter and choose "Create SAP Fiori Application"

2. The SAP Fiori generator will open

3. Select a fitting template for your application. In this tutorial we will select the "Basic" template which creates a freestyle application where you start with an empty page. Click on "Next".

4. Now you can select a Data Source which you would like to use in your SAP Fiori application. For the simplicity we select "None" here to start from scratch.

5. Now you can enter the new of the initial View of your application. We use "MyView" here.

6. In the last step you have to enter some Project Attributes:
   - Module name: The name of your module (eg. myproject)
   - Application title: The title of your application which is shown to the user. (eg. First SAP Fiori App with VSCode)
   - Application namespace: The namespace of your application. This is a really important value as it is used to connect different parts of your application together. It should be unique and should follow the standard Java package notation. (eg. ch.neovo.myproject)
   - Description: A short text which describes what your application does.
   - Project folder path: Choose the root folder in which your application should be stored. The wizard will create a subfolder in this folder called like the "Module name" entered above.
   - Minimum SAPUI5 version: Choose the SAPUI5 version your SAP system supports.
   - Enable TypeScript: YES please!
   - Add deployment configuration: No (for simplicity reasons)

7. By pressing "Finish" your application will be scaffolded in the selected root folder.

When the process has finished you should see the newly created project in your workspace ("Explorer" view).

Add Prettier config

Besides an ESLint config I recommend creating a Prettier-Configuration to help you write consistent code.

1. Create a .prettierrc file in your project root.

2. Insert the following configuration:
   {
"tabWidth": 4,
"trailingComma": "none",
"arrowParens": "avoid"
}

3. Go to "Code > Preferences > Settings > Text Editor" and set the "Editor: Default Formatter" to "Prettier: - Code formatter"

4. Now you're able to format your source files by either right click on a file and choose "Format document" or by pressing CMD + Shift + F (on macOS) / Ctrl + Shift + F (on Windows).

Hidden features

There are some rather hidden features which come with the "SAP Fiori Tools - Extension Pack".

Right click on the manifest.json

By right clicking on your webapp/manifest.json file you'll find two additional context menu items:

• Open Annotation File Mananger: Opens a view where you can add new and configure existing annotations to your project.

• Open Service Manager: Opens a view where you can add new and configure existing services to your project.

Additional tools in the VSCode Command Palette

When opening the VSCode Command Palette (macOS: CMD + Shift + P / Windows: Ctrl + Shift + P) you'll find a lot more helpful tools which are all prefixed with "Fiori". So just type in "Fiori" in the command input and go through the available tools to see if there is one which might be useful for you.

Conclusion

You're now all set and can start implementing your custom SAP Fiori application with VSCode!