Enabling Fiori development via plugins for Eclipse Theia

Published by Tobias Hofmann on February 1, 2022February 1, 2022

8 min read

SAP’s Business Application Studio is based on Theia. Several plugins for Fiori development are released by SAP to the VS Code marketplace. This means that it is possible to use these in Eclipse Theia. As written previously, this is only technically possible, as the VS Code marketplace TOU does not allow this. Just to document that it is technically possible, I am writing the finding of my studies on this down.

Let’s try to install some plugins related to Fiori development. The easiest one is the plugin for Application Wizard, as the VSIX file needed is available on GitHub. For all the other plugins the VSIX file is needed. These are available for download from the VS Code marketplace.

It is nice that the VSIX plugins are available for download. This allows to install them offline into Code. And to install them in e.g. Theia. Connecting directly to the marketplace is then a nice UX feature, but not mandatory. Although I am not 100% sure if the TOU for the marketplace means that you only can use the plugins directly from the marketplace when using Code, and when downloading them you might use them in another tool. Or if you can only use them in Code, independently if obtained via the integrated marketplace or by download.

All plugins are installed the same way in Eclipse Theia:

Download VSIX file
Open Eclipse Theia
Start command “Extensions: Install from VSIX”.
Select VSIX file
Click “Install”
Wait for confirmation message

Why do this at all? Well, I wanted to see if it is really working, or if the plugins are using an API not supported by Eclipse Theia. So far, nothing technically forbids to use Theia as a first class IDE for Fiori development. The same plugins used in Code can be used in Theia. It depends on SAP to release them for Theia. Which would mean that a developer could chose from BAS, Code and Theia. Combining the Fiori plugins (or other SAP Code plugins) with Theia, Che and OpenShift would mean for companies: cloud native development where the company is.

In the examples below I list the version number of the plugin that I used when trying it out. Of course the version might change and differ over time.

SAP Fiori Tools – Service Modeler

Installation

Start command “Extensions: Install from VSIX”.

File: SAPSE.sap-ux-service-modeler-extension-1.4.4.vsix

Test

Go to the metadata file of your Fiori project, right click and select “Open Service Modeler”

Or run the command “Fiori: Open Service Modeler”.

SAP Fiori Tools – Guided Development

Installation

Start command “Extensions: Install from VSIX”.

File: SAPSE.sap-ux-help-extension-1.4.4.vsix

Test

Run command: Fiori: open guided development

Wizard opens.

A Fiori Elements project is needed for the extension to work.

SAP Fiori Tools – Application Modeler

Installation

Start command “Extensions: Install from VSIX”.

File: SAPSE.sap-ux-application-modeler-extension-1.4.4.vsix

Test

Select a project, right click and the context menus shows entries for “Show Page Map” and “Preview Application”.

Page Map

Preview Application

Page Editor

SAP Fiori Tools – XML Annotation Language Server

Installation

Start command “Extensions: Install from VSIX”.

File: SAPSE.sap-ux-annotation-modeler-extension-1.4.4.vsix

Test

Create an annotation file and see if the code completion is working.

SAP Fiori Tools – Extension Pack

Installation

Start command “Extensions: Install from VSIX”.

File: SAPSE.sap-ux-help-extension-1.4.4.vsix

This is the recommended plugin to install. It will include the other Fiori related plugins. Fun fact: did not work for me. Maybe because I installed the other plugins first.