Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
PeterSpielvogel
Product and Topic Expert
Product and Topic Expert
After several months of beta testing, we are pleased to announce the release of SAP Fiori tools. Our global development team, spread across four countries, incorporated feedback from dozens of customers and partners who wanted a faster and easier way to develop applications built with SAP Fiori elements.

SAP Fiori tools is a set of extensions for SAP Business Application Studio and Visual Studio Code that provide many capabilities to further increase the efficiency of developing SAP Fiori elements applications. If you are creating software in one of those development environments, SAP Fiori tools provides functionality that simplifies the process of writing or modifying SAP Fiori apps throughout the entire development process. SAP Fiori tools, together with SAP Fiori elements, reduces development time, maintenance cost, and leverages the advantages of a metadata driven UI.
SAP Fiori tools makes it much easier for us to build SAP Fiori elements apps. It eliminates much of the hand coding and poring through documentation to find the right annotation to make the app work the way we want,” said Lukas Böhm, Senior Developer and UX Designer of All for One Group, an SAP partner based in Germany. “This will result in us building many more SAP Fiori elements apps than we did prior to SAP Fiori tools.”


SAP Fiori tools is part of the SAP Fiori dev space in SAP Business Application Studio.


The application generator creates all the project files your application needs to run, using a wizard-style approach that combines your data with one of the provided floorplans. It generates the basic structure, into which you will add the annotations you need to make your application look and behave the way you want. This ensures a consistent structure, which simplifies development and maintenance of your SAP Fiori elements apps.

.


 

Guided development provides instant access to how-to guides and tutorials that help developers modify the standard page types and add new functionality to their SAP Fiori elements applications. Developers can read the documentation provided in the guide, provide the parameters specific to their service, and either insert the code in the project file automatically using the apply button or copy the generated code snippet. .


 

The service modeler is a graphical tool that provides a visualization of an OData service, including its backend and local annotations. Developers can use it to manage the services required for SAP Fiori elements applications; for example, adding new services to a project or syncing service metadata that already exists to ensure they are up to date. The service modeler allows you to view and manage annotations associated with a service. It also lets you create and manage local annotation files and set the ranking order for annotation sources in the project.


 


 

The application modeler allows you to visualize and change the page structure of SAP Fiori elements applications. You can configure individual pages using easy to understand JSON files and preview your application with mock or live data. The application modeler also includes functionality to migrate existing SAP Web IDE projects by adding the necessary configuration files for further development in SAP Fiori tools.


 

The XML annotation language server speeds up the annotation definition process in the xml code editor, thus reducing effort and improving your code consistency. It provides input help for applicable annotations terms and elements, shows paths to the metadata entities and annotations, and validates your annotation files against OData vocabularies and metadata.

It helps you manage your annotations by providing navigation to referenced annotations, no matter what layer they are defined in. The XML annotation language server facilitates internationalization of your app by identifying missing text keys and enabling you to generate them in one click for the language-dependent strings used in your annotation file.


 

If you are as excited to try SAP Fiori tools as our beta customers and partners are, you can download the SAP Fiori tools extension pack in the Visual Studio Code marketplace. Search for “Fiori”.


If you use SAP Business Application Studio, you will find the SAP Fiori tools extensions in the Fiori dev space. Nothing to download or configure; everything is pre-installed.


Watch the video announcement on SAP Fiori tools.

Try the new tutorials on developers.sap.com:

  1. Set Up SAP Fiori Tools in your development environment

  2. Set Up and Generate a New SAP Fiori App Project

  3. Configure a List Report Page Using SAP Fiori Tools

  4. Configure Object Pages Using SAP Fiori Tools


 

Sign up for SAP Fiori development newsletter (new issues every other month).

Read the FAQ on SAP Fiori tools.

Thanks to vandana.deep, christoph.gollmick, maryana.naboka, sushant.priyadarshi, quiggs1000, regina.sheynblat, tashley, and caroline.welsh for their contributions to this blog.

For the SAP UX Engineering team, peter.spielvogel.

 
72 Comments
tashley
Product and Topic Expert
Product and Topic Expert
Hi Vijay,

Thanks so much for working with with us in the beta program Your insight and feedback has been very valuable to help us shape the direction of the product throughout the program. We look forward to continue working together to create more awesome apps.

Regards,

Ashley
former_member266277
Participant
0 Kudos
ok!
holyspirit03
Explorer
0 Kudos
Hi Peter,

just read the post, installed the tools, created an oData service in my netweaver development system on the good old sflight, created a list report and it works in ten minutes!

btw: I used the moster dataset with 1.3 million records for sbook.

 

Thats awesome.

I like this way, developing locally and deploying wherever it is neccessary.

 
sanjoy0308
Active Participant
0 Kudos
Hi Peter,

Could you please include me in the beta program for OData V4 support?

Kind Regards,

Sanjoy
Attila
Active Participant
0 Kudos

Hi Lisa,

I faced the same issue, but I was able to launch the app generator after installing windows-build-tools and restarting my computer.
https://www.npmjs.com/package/windows-build-tools

It is also listed under the SAP Fiori Tools – Guided Development extension descrion inside VS Code.

It might helps you.

Attila

Attila
Active Participant
0 Kudos

Hi Uwe,

I’ve implemented a service on a sandbox system, and the network/basis team will probably never build and install proper certificates for this system.
I assume this is the reason behind I cannot generate the app connecting to the onPremise system/oData service.

Can you please give some advise, where to disable certificate validation in nodejs configuration for a given system or globally.


(There is no issue from within eclipse using the Preview feature to generate a list report fiori elements application), but connecting the system from VSC it fails)

Thank you very much, Attila

PeterSpielvogel
Product and Topic Expert
Product and Topic Expert
0 Kudos
Hi Andre,

I'm glad everything worked as it was supposed to for you. Thanks for sharing the good news.

Regards,
Peter
former_member226130
Discoverer
0 Kudos

Hi there,

Thanks for the amazing write-up!

Try the new tutorials on developers.sap.com:

  1. Set Up SAP Fiori Tools in your development environment
  2. Set Up and Generate a New SAP Fiori App Project
  3. Configure a List Report Page Using SAP Fiori Tools
  4. Configure Object Pages Using SAP Fiori Tools

 

I was following the step 2 tutorial to setup and generate a new Fiori App project for a poc on Business Application Studio. However, when i try to use my own backend with it i get a 400. I can confirm that this backend is working because it is being successfully used with an MDK app and this is not a protected backend either.


Any suggestions on how to debug this or troubleshoot the root cause?  May thanks in advance!

 

Thanks,

Sathya.

caledoni1
Discoverer
0 Kudos
It works for me. Thanks.
alsp80
Participant
Hi Peter,

really happy with the release of SAP Fiori tools, however I agree with Stephan that given the announcement of end-of-life for SAP Build and Fiori tools as successor I'm missing the option for rapid prototyping in a scenario where no OData service exists (yet). Essentially I would like to have a tool where I could model my service (locally within SAP Fiori tools), provide some mock data and then put a Fiori Elements based app on top of this.

Tools like Axure and Adobe XD are quite useful and I appreciate a lot that stencils are being made available. However these tools do require additional skills and allow creation of prototypes that in the end can not be implemented with FE. In my view creating a prototype in SAP Fiori tools with actual capabilities of e.g. FE would be much better, at least for most of our day-to-day scenarios.

Regards,
Alex
UweFetzer_se38
Active Contributor
0 Kudos
npm set strict-ssl false
syed_khurram2
Explorer
0 Kudos
I was able to install this tool for VS code, it is really great and works for FIORI element. Can we create FIORI app without element with this tool like we have templates in webIDE for SAPUI5 general Application without FIORI element?
Jacky_Liu
Product and Topic Expert
Product and Topic Expert
0 Kudos
Hi , Dear All,

I use the following code resolve this issue :

npm config delete @sap:registry –global
npm config delete registry –global
npm config set @sap:registry=https://registry.npmjs.org

npm install -g @sap/generator-fiori-elements

Best regards!

Jacky Liu
JaimeRodriguez
Participant
0 Kudos

Hi there,

Is there any way to manage saved SAP systems?

vin_23
Explorer
0 Kudos
I have the same problem.. Did you solve it already?
frankovic
Explorer
0 Kudos
Hi,

I tried all the above, but still I don't have any app generator.


Anyone having the same issue and solution?

KR,

Frank
mdjoerg
Explorer
0 Kudos
Hi Peter,

the Windows version (Windows 10 2004 with VSC 1.48.2) of FIORI Tools (v1.0.13) is not running because of the error "btoa is not defined". No success after multiple reinstallations.

The MacOS version is running fine. The error seems to be depending on password encoding/decoding based on base64 for the windows platform.

Any ideas? Thanks for help!

Best Regards

Jorg

 

 

p619793
Active Participant
0 Kudos
I am using FIORI Tools (v1.0.14) on Windows 10 2004 with VSC 1.48.2 without issue. Perhaps uninstall and installing the latest version of the extension pack may help.

Regards,

Sumit
juzorrilla
Explorer
Hi I had the same issue on Mac and it seems that it was because of the Mobile Development Kit extension on VS Code.

If you have it installed just disable it and launch again VS Code

 

https://github.com/SAPDocuments/Tutorials/issues/5358#issuecomment-658177778

 

Regards.

Juan
frankovic
Explorer
0 Kudos
Hi,

Currently we have several Fiori (Elements) apps build in webIDE. If we migrate an app to Fiori Tools in VS-code and/or the Business Application Studio will they be backwards compatible with regards to the IDE? So can a migrated app still be changed in webIDE for example? Developers should be able to choose their favourite IDE (BAS, VS-code, webIDE, etc.).

KR,
Frank Classens
lgonzalezc
Employee
Employee
0 Kudos
For newcomers, please note that this package has been deprecated. Now you should run
npm install -g @sap/generator-fiori



after setting up the registry as described above.

Sycntegral
Active Participant
0 Kudos
We have openly shared similar concerns over and over in multiple meetings.

not sure this was heard