The SAP Fiori tools team continues to deliver capabilities to simplify the SAP Fiori development experience. With the SAP Fiori tools 2302 update, we have focused on making annotations  easier, expanding support for flexible programming model and OData V4, and releasing more open source modules that can be reused by the community. In this post, I’ll focus on some of the new functionality.

Making annotations easier for SAP Fiori elements OData V4 apps

We hear your feedback that annotations can sometimes be a challenge when developing SAP Fiori elements applications. We received positive comments that we are moving in the right direction with the annotation code completion, Guided Development, and annotation support in the Page Editor (OData V4 only). Hence, we continue to build upon the foundation. I am pleased to announce the availability of code completion to reference annotations used in building blocks. You will find the latest features in the UI5 Language Assistant  extension version 4.0.3. If you had installed SAP Fiori tools via the extension pack in Visual Studio Code, you should already see the extension installed (manual update maybe required if you do not have auto update on). The UI5 Language Assistant is also included in the SAP Fiori and Full Stack Cloud Application dev spaces in SAP Business Application Studio.

Code Completion for annotations referenced in flexible programming model building blocks

Page Editor now supports annotations needed to add analytical features to your OData V4 apps (with an analytics-enabled service). You can add analytical charts and visual filter to the list report page. As we try to get the new capabilities to the hands of our customers as quickly as we can, you can expect to see further enhancements to support more use cases.

Page Editor adds support for visual filters for OData V4 apps

“Grow As you Go” approach to managing project artifacts

Consistent with our goal to make SAP Fiori development simpler, we want to make management of the project artifacts easier. Currently, when the project is generated, the start scripts are already included in the `package.json`, based on the selection during project generation. It is often a challenge for users to know what configuration needs to be done in what artifact if they want to add a new one post project generation.

We made the management of project artifacts modular so you can easily add or update the artifacts when you need it. To do that, we have added a new module @sap-ux/create in the open-ux-tools repo.  You can trigger the command from the Application Info page for your project, or type “npm init @sap-ux” at a terminal. This module is already being used in SAP Fiori tools to add/update mockserver config. We plan to add support for other configurations such as deployment or FLP  configurations in the near future.

New open source module to manage project configuration files

Integrated Troubleshooting Experience

In my last blog on the 2211 update, I talked about how you can make use of the Guided Answers extension by SAP for troubleshooting. We are making this even easier by integrating the Guided Answers extension into the development experience using SAP Fiori tools. At the time when you encounter an error while using SAP Fiori tools, we are now providing you a direct link to the answer in Guided Answers for some of the most common problems such as destination errors encountered in SAP Business Application Studio during project generation. While the messages shown to you is slightly different between VSC and SAP Business Application Studio, they both link to Guided Answer content. We hope this enables you to get past the problems quickly so you can focus on your development tasks.

Direct Link to Guided Answer when error is encountered for faster troubleshooting

Troubleshoot destination problems in BAS with Guided Answer

Guides made simple with multi-code snippet feature in Guided Development

When the guides were first introduced, we followed the principle of providing very specific steps for each artifact that needs to be updated to configure a feature. We wanted each step to be simple to follow and for developers to know exactly what need to be changed in what artifact. As with most things, there are pros and cons to every approach. Spreading different artifacts into multiple steps means that you need to insert code snippets in each step. To make the experience simpler, we have now introduced the multi-code feature in Guided Development. To see it in action, check out the “Add a custom card to an overview page”. In this guide, we have reduced the number of steps from 4 to 1. Once you enter the requested parameters, the file names of the artifacts are dynamically adjusted, and you can create all the artifacts in one go. You can expect that we continue to deliver simplifications  to applicable guides using this feature.

Multi-code feature in guide to insert multiple code snippets in one go

Next Steps: we continue to focus on making flexible programming model easier, add more TypeScript support, and expand on the “Grow As you Go” approach to managing projects

In the coming months, you can expect that we continue to deliver more capabilities on flexible programming model using Page Editor. We are also working on adding more configuration options to the “@sap-ux/create” module I talked about earlier. You can also expect that we will introduce guides for TypeScript in Guided Development.