Skip to Content
Product Information
Author's profile photo Conrad Bernal

5 Resources for Getting Started with More Efficient SAP Fiori App Development

With the release of SAP Fiori tools earlier this year, we’ve been delighted to see the enthusiasm from SAP Fiori app developers wanting to create consistent applications more efficiently. There’s a lot of great content on how SAP Fiori elements floorplans can accelerate your SAP Fiori development, as well as a growing number of resources available on how the various extensions in SAP Fiori tools can make SAP Fiori development even more efficient.

The volume of content can be overwhelming if you’re just looking to get started with SAP Fiori development. With that in mind, below are five resources intended to introduce you to SAP Fiori elements and SAP Fiori tools so that you can get on with building better apps faster.

SAP Fiori elements

SAP Fiori elements is an SAPUI5 development framework that provides a variety of different page types for your applications. You can think of these page types as templates, providing you with a jumping off point for the look and feel of your app. Find the page type that works for your scenario, connect your data source, and you’ve got a running application. Here are two good resources for learning a little bit more about it:

  1. SAP Fiori elements FAQ
    This page on the SAP Community provides a quick overview on SAP Fiori elements: the functionality it delivers, the different page types that are available, and potential business benefits.
  2. The Getting Started with SAP Fiori elements video series
    The SAP UX Engineering team put together an introductory video series focused on getting acquainted with SAP Fiori elements. The series demonstrates the functionality of the different page types, explains the role OData and annotations play in SAP Fiori elements apps, and then concludes with demos of building simple apps.

SAP Fiori tools

SAP Fiori tools is a set of extensions for SAP Business Application Studio and Visual Studio Code, designed to further simplify SAP Fiori elements app development. The extensions help you develop apps more efficiently and consistently with less coding. For example, the extensions generate code snippets, provide instant access to documentation, create visualizations of the page and data structure of your apps, and more. Here are three resources for learning more about this new approach to SAP Fiori app development:

  1. SAP Fiori tools FAQ
    This page on the SAP Community covers how SAP Fiori tools fits in with SAP Fiori elements. It also provides a description of each of the available extensions, as well as resources for trying out SAP Fiori tools for yourself.
  2. The Introducing SAP Fiori tools video series
    Product owners from the SAP Fiori tools development team put together a 5-part video series where they demonstrate the functionality of their own extensions. Each video briefly goes over the features available in an extension and then demonstrates how to use those features in a brief demo.
  3. SAP Developers tutorials: Create a List Report Object Page App with SAP Fiori tools
    This entry-level group of hands-on tutorials walks you through developing your own SAP Fiori application with SAP Fiori tools. The detailed scenario will show you how to set up your development environment, generate your application, and add new features to your app.

These five resources should give you a good head start on understanding how SAP Fiori elements and SAP Fiori tools can help you create consistently good applications, while also helping you develop more efficiently.

For ongoing updates on SAP Fiori development, sign up for our bi-monthly newsletter.

For those of you who have already tried out SAP Fiori elements and/or SAP Fiori tools: What has been the most useful resource for you?

 

For SAP UX Engineering,
Conrad Bernal

Assigned Tags

      4 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Thorsten Klingbeil
      Thorsten Klingbeil

      Thanks Conrad! Looking fortward to Check ist out 🙂

      Author's profile photo Conrad Bernal
      Conrad Bernal
      Blog Post Author

      Thanks, Thorsten! I hope you found something that inspires you!

      Kind regards,

      Conrad

      Author's profile photo Micky Oestreich
      Micky Oestreich

      Great resources indeed. But I have one question: how to connect to an on-premise ABAP system from VS Code?

      After selecting the template 'List Report Object Page' (Yeoman Generators / SAP Fiori Tools - Application Generator: Launch) I want to connect to our SAP system. But no such luck. Tried to find a solution in the forum and related blogs. Couldn't find anything relating to this issue.

      I get an authentication error, but I'm very sure that my credentials are correct (using a password manager). I tried connecting from home but also from the office (inside the corporate network).

      Could it be that I'm using the wrong URL? I obtained it from SOAMANAGER / SICF. It looks like this:

      http://server:port/

      It seems to be okay though since I don't get any error messages when I've entered the entire server string. Entering a 'bogus' string returns errors (in the problem log but also below the box I've entered the connection string (system URL).

      From within ADT I haven't had any issues, but that one takes the data from SAP Logon.

       

      VS%20Code%20Connect%20To%20Datasource

      VS Code Connect To Datasource

       

      Kind regards.

      Micky.

      Author's profile photo GANG WANG
      GANG WANG

      Hi,Micky

      I also encountered this problem, have you solved it?