SAP Fiori Tools FAQ

Since the release of SAP Fiori tools in June 2020, we have received many questions about its functionality and how it fits with SAP’s other development tools such as SAP Fiori elements, SAPUI5, SAP Business Application Studio, and SAP Web IDE. Many inquiries are from SAP Fiori elements customers who want to be more efficient with their application development projects and reduce the learning curve to become proficient on SAP Fiori elements. Others are familiar with SAP’s older development tools and want to know what’s new and how it will help them.

Basic Product Information

What is SAP Fiori tools?

SAP Fiori tools is a set of extensions for SAP Business Application Studio and Visual Studio Code that provide many capabilities to increase the efficiency of developing SAP Fiori elements applications. SAP Fiori tools simplifies the process of writing or modifying SAP Fiori apps throughout the entire development process, resulting in shorter development time and lower maintenance costs.

Why did you build SAP Fiori tools?

We heard from many customers that they like the concept of SAP Fiori elements, but were frustrated by the level of effort to become an expert. The basic page types (list report, object page, overview page, worklist page, and analytical list page) are a great starting point, but there are many annotations (metadata that affects the look or behavior of a page) that must be learned to fine tune the app to meet your specific requirements. In some cases, we heard that it took the same amount of time to build and modify an SAP Fiori elements app as to build a freestyle UI5 app. This led us to come up a way to greatly simplify development of SAP Fiori elements apps so people could gain the advantages of metadata-driven development.

The extensions

What extensions are available with SAP Fiori tools?

  • Application generator
  • Guided development
  • Service modeler
  • Application modeler
  • XML annotation language server

What is the application generator?

The application generator helps you configure and create your application project. Its wizard-style approach lets you select the SAP Fiori elements page type from a list of options. Then, you select a service to provide data for your application. You have several options. (1) You can connect to an existing SAP system (providing your credentials through the application generator), (2) an OData service (also providing authentication), or (3) a metadata document, which gives you the ability to work offline with mock data and no connection to a back-end system.

The application generator wizard then inspects the metadata and gives you options to customize your data to match the page type you have chosen. You enter text at various prompts, which the generator uses to generate the app name and directory structure.

After choosing the version of UI5 you want your app to use, along with the theme, the application generator downloads the libraries you need for the app and retrieves backend annotations, if they exist, to use in the generated app.

At this point, you can preview your app and modify it to have it look and behavior you want.

What is guided development?

Guided development helps you implement additional functionality into your SAP Fiori elements application with minimal coding. Once you have generated your app using the application generator, you can add a wide variety of features to the standard SAP Fiori elements page types. For example, you can add columns to a table or change from single- to multi-select for the rows.

When you open the guided development extension, you will see a list of all the ways you can enhance your app, with the capabilities grouped by page type, OData version, or application artifacts. Each guide contains a brief description, associated annotation terms, the specific steps to follow to implement the functionality in the guide, and often a sample image that shows how your changes will look. You can search the guides to find what you need.

As you respond to the prompts in the guide, the guided development extension inserts your text into the code snippet that it displays on the screen. When this is complete, you just need to click a single button and the extension places the code into the right place in the local annotation file.

You can then preview your changes to the app.

What is the service modeler?

The service modeler provides a visualization of OData metadata files and their annotations in your app. It shows all the projections (subsets of data based on a query) available in your service, along with the local and back-end annotations associated with the projection.

The service modeler provides details on the annotations and descriptions of what they do. You can copy back-end annotations to a local annotation file and then modify the annotations as needed for your app. The service modeler lets you change the annotation hierarchy or select which annotation files are applied to your app. You can also drill down and see code snippets for your annotations and edit them.

Once have completed your edits to the annotation files, you can preview your app to see the effect of the changes.

What is the application modeler?

The application modeler shows the application page structure and allows you to modify this and configure the SAPUI5 flexibility settings. It provides a page map of your app, including the page type and entity set for the respective pages.

You can also use the page map to add additional pages to your app. For example, you can add a new object page to your app to provide additional details about an object. You just select the page type (object page), the data you want displayed on the page, and how you want to navigate to this new page.

The application modeler also offers a fast way to make changes to the default SAPUI5 flexibility settings that were generated during the project generation phase, such as whether to show or hide a Download to Excel button.

What is the XML annotation language server?

The XML annotation language server accelerates how you work with annotations in the code editor. Context-sensitive code completion displays suggestions that are relevant to where you are in the annotation file for your app. As you type a few letters, the list is filtered down to make it faster and easier to find the syntax you need. These micro-snippets make it much simpler to add annotations, without having to memorize the definitions and syntax of all the available annotations.

The XML annotation language server also includes cross references, so you can lookup definitions of annotations that are embedded in your code without having to navigate away from what you are doing. It also reviews your code and provides diagnostic messages for troubleshooting, with the ability to take you directly to the location of a problem, as well as indicating if you can fix it with code completion.

Getting the extensions

How do I download SAP Fiori tools to use with SAP Business Application Studio (next generation Web IDE)?

SAP Fiori tools is pre-installed into SAP Business Application Studio, so there is nothing to install. Open an SAP Fiori dev space and the latest version of all the SAP Fiori tools are ready for you to use.

How do I download SAP Fiori tools to use with Visual Studio Code?

You can follow these instructions to download the SAP Fiori tools extensions from the Visual Studio Code marketplace.
https://github.wdf.sap.corp/ux-engineering/tools-suite-support/blob/master/Installation-vsc-released.md

More Resources

Where can I learn more about SAP Fiori tools?

There are a variety of resources available if you would like to dive a little deeper with SAP Fiori tools. Here are a few to get you started:

How can I stay up to date with the latest on SAP Fiori development – including SAP Fiori tools?

Sign up for the SAP Fiori Development newsletter. Published approximately every two months, it provides updates on the latest in SAP Fiori development, including SAP Fiori elements, SAP Fiori tools, SAPUI5, and SAP Business Application Studio.

How can I tap into the wisdom of the SAP Community for questions about SAP Fiori tools?

You can ask your questions here: https://answers.sap.com/questions/ask.html

In the Select Primary Tag box, select “SAP Fiori tools”.

No only will experts from customers, partners, and SAP see your question, by posting in the SAP Community, it allows the knowledge to become searchable to others that have the same question.