Product Information
SAP Fiori tools is generally available. Increase the efficiency of developing SAP Fiori elements apps
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:
- Set Up SAP Fiori Tools in your development environment
- Set Up and Generate a New SAP Fiori App Project
- Configure a List Report Page Using SAP Fiori Tools
- 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, Mariana Naboka, Sushant Priyadarshi, Ian Quigley, Regina Sheynblat, Ashley Tung, and Caroline Welsh for their contributions to this blog.
For the SAP UX Engineering team, Peter Spielvogel.
Hi Peter Spielvogel
That's great news, looking forward to use it in my next project!
Are the Fiori Tools also coming to the "CAP" Space-Template in Business Application Studio? I often have a CAP project with backend and Fiori frontend parts in one big MTA project..
And what about the support of oData v4? Is this already covered in this release or is it on the roadmap?
Best regards,
Ben
Hi Benjamin,
Once you have your OData service in place, you are ready to build your app with SAP Fiori elements and SAP Fiori tools. You can use CAP, RAP, or other technologies to create your service. Or, use one of the OData services that SAP ships with SAP S/4HANA.
OData v4 support is not part of this release. We are planning a beta program later in the year for that.
https://blogs.sap.com/2020/03/17/fiori-elements-floorplans-for-odata-v4-coming-soon/
Regards,
Peter
Hi Peter,
Could you please include me in the beta program for OData V4 support?
Kind Regards,
Sanjoy
Hi Peter,
This is great news! Using the tools in the beta program has convinced me that it's certainly going the right way. The way your team has handled the improvement program and listened to the community has been great.
Awesome work and congratulations!
Hi Jakob,
Thanks for participating in the program and contributing ideas to make the product better. I look forward to seeing the apps you build using our new tools, along with SAP Fiori elements.
Regards,
Peter
Awesome work! I especially like that the plugin is available on the SAP Business Application Studio as well as on VS Code.
Thanks, Marius.
We like to give our customers a choice, whenever possible.
Hi Peter Spielvogel
thanks a lot for the beta program, it was great to directly get a feeling about the new Fiori Tools and to have the chance to provide some feedback.
Really looking forward to use it productivly as well.
Best regards,
Sebastian
Hi Sebastian,
Your feedback was very valuable to the team during the beta program. Thanks for taking the time to help us create SAP Fiori tools.
Regards,
Peter
Hi Peter,
Great news! However the generator seems to be broken: when I try to generate the app (2nd tutorial, step 4) I get the following error:
@sap/fiori-elements generator failed. Error code 1 returned from npm ci. npm ERR! cipm can only install packages with an existing package-lock.json or npm-shrinkwrap.json with lockfileVersion >= 1. Run an install with npm@5 or later to generate it, then try again. npm ERR!
Pierre
Hello Pierre Dominique ,
Do you have node.js installed in your system. Can you please download it from here and then try again?
https://nodejs.org/en/download/
Regards,
Sushant
Hi Sushant,
Yes of course Node.js LTS is installed. And I use VS Code with some extensions for CAP development and everything works as expected.
EDIT: I just tried to install the dependencies with npm in the generated folder and here's the error I get:
npm ERR! code E404
npm ERR! 404 Not Found - GET https://npm.sap.com/@sap%2fux-ui5-tooling
npm ERR! 404
npm ERR! 404 '@sap/ux-ui5-tooling@1.0.0' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404 It was specified as a dependency of 'project1'
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.
Pierre
Hello Pierre Dominique
From the error above, it looks like you have @sap set up to point to https://npm.sap.com in your .npmrc file. This is no longer valid (you can see a related post here: https://jam4.sapjam.com/feed/item/eOtNGT1RSxVzknBtpSy2My). Please remove that entry from your .npmrc file and try again?
Thanks
Ian
Hi Ian,
I don’t have access to this jam so I can’t see the post. And I’m surprised by this change, I’m using CAP and I don’t have any issue with npm and the SAP registry. The CAP documentation still clearly says to set the registry using the following command:
EDIT: this is weird, I can find the module but I can't install it:
Pierre
Hi,
Thanks for that. Yes, I guess the CAP documentation needs to be updated. But all the @sap libraries should now have moved over to npmjs.org and you should not need this setting. I'll ask the CAP guys to update this documentation. Can you please try and confirm this fixes your issue?
Ian
I have removed the SAP registry from .npmrc and I can now install the ux-ui5-tooling module.
However the application generator still throws an error at the end and I have to open the project and install the dependencies with npm install.
In the end I don't really know what fixed the issue or even if it is really fixed. 🙂
Pierre
Can you please provide the error that you had at the end of generation? Did you start with a fresh project after you made the npmrc change?
Would be nice to get to the bottom of this 🙂
Thanks
Ian
I still have the same error I mentioned in my first reply. The project is not properly generated in vs code but some artifacts are created. By opening the generated folder, I can use npm to install the dependencies.
Note: I also add to remove the sap registry from /usr/local/ext/npmrc
Pierre
HI Pierre,
I was also struggling for this issue for multile hours found solution. with following
npm install -g npm-check-updates
npm install -g jsdocsuccess!
thanks
Bilal
Thanks Bilal but I just tried this and the issue is still here.
Pierre
Hi Pierre,
Can you please execute the following two commands:
npm config delete @sap:registry --global
npm config delete registry --global
This sets your registry back to the default settings for all libraries including the @sap scoped ones.
Next, lets check if npm can find our libs by executing
npm view @sap/ux-ui5-tooling
npm view @sap/ux-specification
If both commands show you some information about the libs, then you are good to go and you can try creating a project again.
If the npm view calls fail or if the the project generation still fails, please paste the errors here.
Cheers,
Tobias.
I have the same problem. Did anyone find the solution? I have tried the methods they indicate but they have not worked for me. Could you help me?
Hi Tobias,
Thanks but I still have the same error in vs code when the project is generated.
@sap/fiori-elements generator failed. Error code 1 returned from npm ci. npm ERR! cipm can only install packages with an existing package-lock.json or npm-shrinkwrap.json with lockfileVersion >= 1. Run an install with npm@5 or later to generate it, then try again. npm ERR!
Pierre
Hi,
i am facing the same issue.
Inside VC i was able to generate a project, but finally the npm install failed.
Opening the project, i can use the tools, but not install the dependencies:
```
npm ERR! code E404
npm ERR! 404 Not Found - GET https://npm.sap.com/@sap%2fux-ui5-tooling
npm ERR! 404
npm ERR! 404 '@sap/ux-ui5-tooling@1.0.0' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404 It was specified as a dependency of 'project1'
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.
```
Maybe currently not all packages are really part of the new public npm offering for @sap namespace.
Regards Holger
Hi Holger
It looks like you also have sap pointing to the wrong NPM registry. npm.sap.com is not supported anymore and the associated config setting should be removed. Can you please execute:
npm config set @sap:registry=https://registry.npmjs.org
This should remove that setting and use the default https://registry.npmjs.org setting instead.
Thanks,
Ian
Please check my response to Pierre Dominique and execute the same commands.
Hi Holger,
Can you please try and execute:
This will ensure that the Fiori elements generator is installed from the correct registry. If the @sap registry setting you have for CAP points to npm.sap.com (which is no longer supported), this resulted in an invalid version of the generator being installed. Running the command above should fix this, thanks!
I am also facing same error. Did you got any solution for this?
Thanks Peter!
Fiori elements developers will love this.
Will there be more functionality for designers, e.g. rapid prototyping support, because of the SAP Build shutdown.
Hi Stephan,
We are looking into ways to educate designers on the SAP Fiori elements page types so they can use these as a starting point. The goal is to have early versions of the functioning app to test concepts. Unlike a prototype, which is typically a test that is thrown away after testing, our goal is to extend the original code into the functioning app.
We are starting a customer engagement initiative to understand how customers incorporate feedback during app development.
https://influence.sap.com/sap/ino/#/campaign/2385
This will help us determine what functionality we need in this area.
Regards,
Peter
The best feedback will hopefully come directly from the SAP global designers, e.g. Tillman Swinke
The shutdown of SAP build and the proposed way in the Fiori3 Open SAP “pixel pushing with Axure” is a retrograde move.
Our designers are from a different guild: non-developers, who are non-used to code in an IDE. I will try convincing them to install VS Code and node.js ?
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
We have openly shared similar concerns over and over in multiple meetings.
not sure this was heard
Hi Peter Spielvogel ,
I set up the Visual Studio Code as portlable, following the tutorial Set Up SAP Fiori Tools in Visual Studio Code
Then I tried to follow the steps of the second tutorial Set Up and Generate a New SAP Fiori App Project but I am stuck in the SAP Fiori tools - Application Generator in the first step of selecting a generator. There are no options available and the Next-Button does not react.
Do you have an idea on what to do?
There are no additional messages in VSC. The node.js is in the sytem path and can be found by cmd.
Thanks for your help and best regards,
Lisa
Empty Dialog Select Generator
Same here.
On my private laptop I can see the "SAP Fiori tool - Application Generator" under "Genarators", but not on my business laptop.
Any idea?
Hi Uwe/Lisa,
Can you please confirm that you have Node installed?
If so, it may be a permissioning issue. In that case, please run (if using a MAC):
sudo npm i -g @sap/generator-fiori-elements
to install the generator and restart VSCode.
Hi Lisa/Uwe,
Even I was also faced similar issue on Windows yesterday. I have uninstalled and installed SAP Fiori Tools extensions and Application Wizard once again today.. it started working.
Hello Ian
Please provide the solution for Windows machine
Regards
Open the PowerShell or any other terminal and execute
npm i -g @sap/generator-fiori-elements
If this fails with an error sounding like missing authorizations, open your terminal of choice again with a right click and "Run as Administrator"
For newcomers, please note that this package has been deprecated. Now you should run
after setting up the registry as described above.
That's it 🙂
Thank you Ian Quigley
It works for me. Thanks.
Hi Uwe,
If it is a business laptop then I would check the following things:
Hi Tobias,
yes, we are behind a firewall, where the SSL certificates are replaced. Therfore I've configured npm to ignore the certificates (I know, bad solution, but I have to wait for a firewall exeption...).
Don't know why the generator-fiori-elements wasn't installed before. But now it works.
Thank you.
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
I am facing the same issue on windows. Tried uninstalling and reinstalling Extension pack. Still unable to see any selection on the generator screen.
Hello Peter
I am also facing this issue in VS code on Windows machine. Please help.
Amit
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
What about SAP Fiori Tools for the Eclipse IDE?
SAP Fiori tools runs in SAP Business Application Studio and Visual Studio Code. We have no plans to add to other IDEs.
ok!
Thanks for the blog!! I'm excited with SAP Fiori Tools! It simplify a lot my development tasks!
Just in case you have an issue with the extension in VS Code: make sure you are not using a non valid version of @sap/generator-fiori-elements from the the proprietary SAP npm registry (everything was moved to the global npm registry in June).
It could be the case if you do some CAP development for instance. In this case, this is what you should do:
Thanks Ian Quigley for providing this solution!
Pierre
Thanks Pierre Dominique ! Just to add, the CDS documentation has now also been updated to request you remove the SAP npm registry setting: https://cap.cloud.sap/docs/advanced/troubleshooting#npm-installation
Thanks, Pierre for your guidance to resolve Fiori elements generator issue. I am able to access Yemon UI now but now I am stuck at the following error in VSCode when I am trying to put ES5 Odata service:
connect ECONNREFUSED 127.0.0.1:80
Have you faced this issue?
I have userID in ES5 Demo system.
Regards,
Amit
I have the same problem.. Did you solve it already?
Hi,
I tried all the above, but still I don't have any app generator.
Anyone having the same issue and solution?
KR,
Frank
Kudos to entire team of SAP Fiori Tools for bringing all aspects of SAP Fiori Elements development in one place.
Awesome work and congratulations!
My journey begins now with the usage of this awesome tool.
Regards
Vijay Jala
Hi Jijay,
Thanks for the kind works here and for all your contributions in the beta program. We look forward to seeing the amazing apps you will build.
Regards,
Peter
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
Love the new experience in developing Fiori Elements application with SAP Fiori tools!
I’ve wrote a short blogpost on how you can create your own OData service if you have the ABAP AS Dev Edition server installed locally to be used with SAP Fiori tools development.
I hope that this will enable more developers to learn both ABAP/CDS development and being able to develop Fiori Elements apps on top of those services.
https://blogs.sap.com/2020/06/29/generate-sample-odata-on-abap-as-7.52-sp04-dev-edition-for-sap-fiori-tools/
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.
Hi Andre,
I'm glad everything worked as it was supposed to for you. Thanks for sharing the good news.
Regards,
Peter
Hi there,
Thanks for the amazing write-up!
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.
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?
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
Hi there,
Is there any way to manage saved SAP systems?
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
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
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
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