SAP Fiori tools 2111 release introduces application information page, integrated mock data, more deployment options
With this release of SAP Fiori tools, we delivered lots of great new features, based on feedback we have received from our customers, partners, and internal development colleagues. As with all functionality in SAP Fiori tools, our focus is on making it easier to build SAP Fiori apps by reducing the amount of code you need to write.
In this release, highlights include a new Application Information page that provides a quick overview of essential project information, a mock server so you can develop without connecting to a live data source, and more preview options to facilitate testing. In this post, I’ll provide details on each of these features.
Soon, we plan to release some experimental features that give you the opportunity to test new capabilities.
Application Information page gives you project status at a glance
Have you wondered how you can see all the SAP Fiori tools functions for your app in one place? While all the commands can be found easily in the command palette, as we add more capabilities to the product, it becomes a bit more difficult to find what you need. And, you always see the full list of commands, and not only the ones that are relevant to your project. We created the Application Information page to address this. The context-sensitive Application Information page is shown after project generation. You can also open it any time via command or right click on the application modeler tree in the SAP Fiori view.
The Application Information page gives you a quick overview of the most essential information for your project. In the application status, you will see if there is a setup error, for example, if node modules are not installed. When an error is detected, clicking on the blue text will automatically execute the solution to address it.
Mock Server and Data Editor let you start developing without backend connection
SAP UX Engineering introduced the SAP Fiori – UI5 middleware for the SAP Fiori elements mock server as an alternative to proxying OData requests to a live backend. This mock server is integrated in SAP Fiori tools to support OData V4 applications. Those of you developing OData V4 applications may have experience previewing the application in mock mode via the npm start script “start-mock”. In this release, we have added a mock data editor for OData V4 applications so you can quickly generate and edit the mock data for the app you are planning to demo.
SAP Fiori tools offers more preview options
Testing is a crucial part of the development process. The quicker you can test in the target environment, the better. To facilitate this, we have added a new preview option to provide you with the ability to test your applications in an external SAP Fiori launchpad. To take advantage of this feature, you will need to deploy the application once in order for the app to be visible on the target launchpad and configured. From that point on, you may test the changes you made to your project without having to redeploy the app again.
The configuration is added with the palette command Fiori: Add FLP Embedded Configuration.
To start the preview, right click on the context menu “Preview Application” and choose “start-embedded”
Another new and exciting option delivered with preview enables you to create variants/views which can be delivered together with your application during design time. Previously this was only possible via key user adaption on the deployed application. With the script “start-variants-management” (which you can also see in the above picture) you can start it. The feature is available for projects which are based on an ABAP service with minimum version of SAPUI5 1.90 for OData V2 applications, and SAPUI version 1.84 for OData V4. Using this preview option, the variant that you created or changed would be saved as SAPUI5 flexibility changes to the “changes” folder in the project. You can test with the variants and adjust as needed. When you are ready, you can deploy the project with variants already defined for your consumers in one go.
The npm start script “start-variant-management” can be added manually via the command palette:
We plan to add the script automatically to the project when the project is created or migrated in a future version of SAP Fiori tools.
Your ideas help us continuously improve the UX
We are continuously improving the UX for SAP Fiori tools using feedback from our users. The Page Editor now features a simplified and streamlined property panel. Those of you who are familiar with the setting editor in Visual Studio Code will find the UX very familiar.
For the keyboard enthusiasts who find navigating the UI via keystrokes to be most efficient, I am happy to announce that you can now use the keyboard to navigate through the Page Map, Page Editor, and Guided Development. If you are not a big fan of keyboards, don’t worry, mouse clicking still works well.
More options in the SAP Fiori tools deploy CLI
We have added several options to the deployment CLI to make it more extensive and easier to use. As deployment is the last step in the development cycle when time is running short, it can be stressful when there is problem. You can now deploy to ABAP in test mode so you can test out the connectivity and address problems way ahead of your development deadline.
You may need to deploy using your own script in your development environment. You can now also deploy by specifying the archive in the local file system or an URL to the archive.
We have added the help option to make it easier for you to find and see all the commands and options in the SAP Fiori tools CLI.
You can also get help on a particular command (i.e. “npx fiori deploy help”).
How are we doing?
This has been a big year for SAP Fiori tools. SAP S/4HANA developers are creating new projects, migrating old ones, and taking advantage of SAP Fiori tools and SAP Fiori elements to create many new apps. LSP extension is widely used to complete (or make intelligent suggestions based on what you type) for over 400 unique terms. There are around 75 guides to give you step-by-step instructions to add features to your apps without any coding. What else would like SAP Fiori tools to do for you? Please let us know in the comments section (so others can build on your suggestions).
On behalf of the SAP Fiori tools development team, Ashley Tung.
Thanks for this! Not sure if this is on the roadmap but would be great if fiori tools in vscode can be used to create an adaptations project. Hopefully this requirement is pioritized.
Oliver Graeff answered a very similar question that someone asked as a comment on our May 2021 release of SAP Fiori tools.
Nice to see progress on the mockdata generation. Would be great to have this also for OData V4 and V2 UI5-Freestyle applications.
Hi Marco Martini
Thanks for the feedback. The mock data editor is available for both SAP Fiori elements and SAPUI5 freestyle OData V4 applications. Support for V2 is planned in our roadmap. Stay tuned for updates on this.