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.
What extensions are available with SAP Fiori tools?
- Application generator
- Application Modeler
- Service modeler
- Guided development
- 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 the application modeler?
The application modeler shows the application pages structure, allows you to add or remove pages, and to configure application settings. The application modeler supports SAP Fiori elements applications based on OData V2 and OData V4.
A new experimental feature for OData V4 based SAP Fiori elements applications adds the capability to add and modify many annotation-based elements like sections, fields, and table columns to further simplify application development.
Beside the application editing capabilities, the application modeler extension includes the application information page, a one-stop-shop with facts, actions and links about your application. It also contains the data editor to create and maintain mock data.
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 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 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 and rearrange table columns or provide charts for your users.
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 implement the functionality in the guide, and the code required to make your changes. You can also search the guides to find what you need.
As you respond to the prompts in the guide, the guided development extension inserts your parameters into the provided code snippet. When your configuration is complete, you just need to click a single button and the extension places the code into the right place in the relevant file.
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.
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.