Hello, Habr! My name is Alexander Karpov, I am a leading developer in the web application interface development group at Severstal-infocom. I would like to share with you the experience of local development of UI applications for SAP systems.
At different times, developers have used different tools to develop SAPUI5 applications. At first, these were plugins for HANA Studio (Eclipse), then Web IDE appeared, then Business Application Studio (BAS). But the problem is that plugins for Eclipse have not been developed since 2019, and the other two tools tie the developer to a specific environment. After all, Web IDE and BAS are cloud environments that make it impossible to develop locally. Besides, they are paid.
The SAP company went to meet the developers and recently began to develop tools for local development: UI5 Tooling and Fiori Tools , as well as plugins for VSCode. This allows developers to work smarter and not depend on cloud-based development environments.
In this article, we will use the VSCode editor, install plugins on it, create an application, and run it locally.
Installing SAP Fiori Tools extensions
Install Node.js before getting started. We won't be using it directly, but it is required for the tools to work.
Then the extensions need to be installed in VSCode. To do this, go to the Extensions panel (Ctrl + Shift + X), enter in the search: " SAP Fiori tools - Extension Pack " and install it. This is not one extension, but a whole package. Therefore, after installation, you will also have six other extensions:
Application Wizard . Helps to create applications based on ready-made templates. In essence, it is just a graphical interface over the Yeoman utility.
SAP Fiori tools - Application Modeler. .
SAP Fiori tools - Guided Development. .
SAP Fiori tools - Service Modeler. OData.
SAP Fiori tools - XML Annotation Language Server. , Fiori-.
XML Toolkit. XML: , .
( OVP) VSCode. Ctrl+Shift+P, «generator» «Fiori: Open Application Generator».
, . : «SAP Fiori Elements» Fiori- «SAPUI5 freestyle» UI5. «SAP Fiori elements» «Overview Page».
. :
SAP-
OData
SAP API Business Hub
.
SAP-. SAP Business Technology Platform.
: «System name» «Service». , VSCode . OData, .
, (smartFilterBar).
: , , . «Add FLP configuration».
Fiori Launchpad: , (action), . , .
. zoverview , .vscode — .
:
Start <module>. ui5.yaml.
Start <module> with UI5 Version. ui5.yaml .
Start <module> Mock. ui5.yaml .
Start <module> Mock with UI5 Version. ui5.yaml, .
Start <module> Local. ui5-local.yaml. SAPUI5.
Run and Debug (Ctrl+Shift+D). .
«Start zoverview». 8080 . Smart Filter Bar’.
, VSCode Fiori Tools Fiori Elements . , , . , , .
. , .