Skip to Content
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:

  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, 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.

 

69 Comments
You must be Logged on to comment or reply to a post.
  • 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,

    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

    • 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

      • 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

          • 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:

            npm set @sap:registry=https://npm.sap.com

            EDIT: this is weird, I can find the module but I can’t install it:

            % npm search ux-ui5-tooling                    NAME                      | DESCRIPTION          | AUTHOR          | DATE       | VERSION  | KEYWORDS
            @sap/ux-ui5-tooling       | UI5 Tooling…         | =sap_extncrepos… | 2020-06-14 | 1.0.0    |        

            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

            1. uninstall nodejs and download new one.
            2. ran following commands
              npm install -g npm-check-updates
              npm install -g jsdoc
            3. recreate project.

            success!

            thanks

            Bilal

             

          • 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.

             

          • 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

         

      • Hi Holger,

         

        Can you please try and execute:

         

        npm i -g @sap/generator-fiori-elements --@sap:registry=https://registry.npmjs.org

         

        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!

         

  • 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

  • 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%20Dialog%20Select%20Generator

    Empty Dialog Select Generator

    /
    Empty%20Dialog%20Select%20Generator
    • 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 Uwe,

        If it is a business laptop then I would check the following things:

        1. Is there a corporate proxy that might not be configured for npm. Please check with npm view @sap/generator-fiori-elements. If this call fails, I would assume the proxy is not configured correctly, so check e.g. https://jjasonclark.com/how-to-setup-node-behind-web-proxy/
        2. The generator needs to be installed globally, maybe you are missing authorizations to that. MacOs, execute sudo npm i -g @sap/generator-fiori-elements – Windows: Can you try opening the PowerShell or Command Palette or your terminal of choice with ‘Run As Administrator” and the execute npm i -g @sap/generator-fiori-elements 
        • 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

    • /
  • 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:

    npm config delete @sap:registry –global
    npm config delete registry –global
    npm uninstall -g @sap/generator-fiori-elements
    npm i -g @sap/generator-fiori-elements --@sap:registry=https://registry.npmjs.org

    Thanks Ian Quigley for providing this solution!

    Pierre

  • 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 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.

  • 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 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

     

     

    /