SAP Fiori Development with SAP Business Applicatio...

yuval_morad · ‎2020 Jul 21

Overview

SAP Business Application Studio enables you to develop SAP Fiori applications for various scenarios, and deploy to different target runtimes:

ABAP
- SAP Fiori for SAP S/4HANA
- SAP Fiori for SAP S/4HANA Cloud
- SAP Fiori for ABAP Cloud
- Extending an SAP Fiori Application

Cloud Foundry
- Standalone SAP Fiori as a side-by-side extension to a remote application
- SAP Fiori application managed by SAP Cloud Platform within central Fiori Launchpad
- SAP Fiori as part of a full-stack application on Cloud Foundry

Let’s go over the main tools and capabilities of SAP Fiori application development in SAP Business Application Studio.

The SAP Fiori Dev Space

This is where your journey starts. After you complete on-boarding, open the SAP Business Application Studio dev space manager to create your first SAP Fiori development environment.

You can read more about the dev space concept and capabilities in this blog post.

From the Create a New Dev Space screen, select the SAP Fiori dev space. The SAP Fiori dev space is our tailored development environment, packed with everything you need for developing an SAP Fiori Application.

The SAP Fiori dev space includes the SAP Fiori elements and freestyle tools, launchpad, UI adaptation, SAPUI5 tools, and more.

Create an SAP Fiori Application

SAP Business Application Studio offers various SAP Fiori freestyle and SAP Fiori elements templates, supports ABAP or Cloud Foundry target runtimes, and enables service selection from multiple data sources.

Launch Options

To create a new SAP Fiori project, you can open the new application wizard in 2 ways:

From the Welcome page, click New project from template.

From the menu, navigate to View> Find Command or press F1 and choose SAP Business Application Studio: Create Project from Template.

To create a new project from the terminal, enter the “yo” command.

Target Runtime

The goal is to generate a project that is ready for local run and deployment without additional manual coding.
Selecting between ABAP or Cloud Foundry as the project’s target runtime affects the structure of the created project and its content, so it’s important to choose the correct target runtime.

Template Selection

You can select from the rich set of SAP Fiori freestyle and SAP Fiori elements templates that are available.

Service Selection

You can consume your service from the following data source providers:

My SAP Systems based on destinations in the subaccount. This data source provides a service catalog or service URL.

ABAP Cloud system based on an ABAP Cloud System service instance. This data source provides a service catalog.

Workspace based on a service you created in your full-stack SAP Cloud Application Programming Model (aka CAP).

Local service based on a local “metadata.xml” file from the workspace. This data source is mainly used as a mock.

SAP API Business Hub based on a destination in the subaccount. This data source provides a service catalog.

Select your service from the various data source providers in the Consume Services step and then bind the data to your template.

Develop an SAP Fiori Application

SAP Fiori Freestyle

Layout Editor

You can develop your "view.xml" file using a graphical drag and drop tool and you can bind your controls and properties to the relevant model. For more information, click here.

Code Assist

You can use code assist for your “view.xml” file for assistance with SAPUI5 elements, aggregation properties, events, enumeration values, associations, and namespaces.
You can also include code assist for deprecated and experimental controls from your user preferences. More information can be found here.

Code assist for the “manifest.json” file using the latest SAPUI5 schema (uploaded to the schema store) is available.

Code assist for SAPUI5 controls in JavaScript is also available. To add it, perform “npm install” on your project and add “jsdoc” for the parameters of your JavaScript file.

Code Validation

You can use code validation for your “view.xml” file to check for non-existing SAPUI5 elements, wrong types and cardinality inside an aggregation, duplicate IDs, and deprecated SAPUI5 elements.

Code validation for the “manifest.json” file using the latest SAPUI5 schema (uploaded to the schema store) is available.

Code validation using ESLint for a JavaScript file is also available. To add it, perform “npm install” on your project and adjust your “.eslintrc” file.

SAP Fiori Elements

Annotations XML editor

This editor provides input help and validation based on the project metadata, OData vocabularies and an analysis of the project structure.

Page Map

This tool provides a visual representation and maintenance of the application's pages, navigations, and the service entities that it uses.

Service modeler

This graphical tool provides visualization and maintenance of an OData service, including its backend and local annotations.

More information regarding SAP Fiori elements development can be found here.

Test Your SAP Fiori Application

Overview

SAP Business Application Studio utilizes the SAPUI5 standard development tools, such as the SAPUI5 tools and application router for running your SAP Fiori applications on your local dev space, as close as possible to your target runtime environment.

Run configuration is one of the SAP Business Application Studio productivity tools, enabling you to create multiple configurations and execute them with one click.

Run Configuration

You can create multiple run configurations for the same SAP Fiori application including the following options:

1. Runnable files - productive, mock, OPA/QUnit

2. SAPUI5 versions

3. Target data source systems

4. Cloud Foundry dependencies, such as xsuaa or ABAP Cloud

Run Execution

Once a configuration is created, click the “Run” button to run the application in a separate browser.

The run tool installs all dependencies that are missing for run execution and uses a dedicated run port. If you already have a running application using the dedicated SAP Fiori port (6004), you must stop the running application first.

You can locally run your application utilizing all authentication methods configured in the subaccount destination, such as principle propagation.

More information regarding local run can be found here.

Build and Deploy your SAP Fiori Application

SAP Business Application Studio provides integrated options from the terminal for build and deployment of your SAP Fiori application to your target runtime.

Build and Deploy to ABAP

If you created a project with the ABAP target runtime, follow these steps from the terminal:

Perform “npm install” for the project if it wasn’t done automatically upon project creation.

Perform “npm run build”, which triggers the SAPUI5 build and generates your mini application inside the “dist” folder.

Perform “abap-deploy”, which deploys your application interactively. You can also deploy automatically using deploy configuration.

The deploy to ABAP in SAP Business Application Studio is faster than in SAP Web IDE Full-stack.
Note that your target ABAP system must include the SAP_UI 753 SP00 or higher version of the software component.

More information regarding build and deploy to ABAP can be found here.

Build and Deploy to Cloud Foundry

If you created a project with the Cloud Foundry target runtime, perform these steps:

Log in to the target Cloud Foundry space, where you want to deploy the application.
From the menu, click View > Find Command to open the command palette.

Enter “MBT build” in the terminal, which generates your MTA archive file, or right-click on the project’s “mta.yaml” file and click Build MTA.

Enter “CF deploy <mtar file name>” in the terminal, which deploys your application to the space that you logged into, or right-click on the mtar file and click Deploy MTA Archive.

More information regarding build and deploy to Cloud Foundry can be found here.
A good blog post about MTA tools can be found here.

Conclusion

You are now a bit more familiar with the following SAP Fiori scenarios and development tools that SAP Business Application Studio has to offer:

SAP Fiori scenarios for ABAP and Cloud Foundry

Project creation capabilities

Data source providers

Code and visual development tools for a SAP Fiori freestyle and an SAP Fiori elements

Local run of an SAP Fiori application

Build and deploy to ABAP and Cloud Foundry

I invite you to try our SAP Fiori development tools with SAP Business Application Studio and will be happy to hear your feedback personally or here in the comments.

You can take your first steps using the Trial environment. Use this simple on-boarding tutorial, develop an SAP Fiori application using this group of tutorials, and take a look at all of the SAP Business Application Studio tutorials.