Latest SAP Fiori tools release expands capabilities, simplifies deployment, and adds on more development guides

[tashley]

Since we released SAP Fiori tools in June 2020, the SAP Fiori tools team has been working relentlessly to add new features (thank you for all your ideas) and make the tools more robust for SAP Fiori developers. This 2106 release includes enhancements to the Application Generator, data sources, Guided Development, and deployment options. Read on to learn more about these innovations.  

The Application Generator offers more options, including generating the deployment configuration 

For any new project, your starting point is the Application Generator. It creates the project structure you need to jump start your development. The Application Generator has evolved to be a single generator for both SAP Fiori elements and SAPUI5 freestyle applications. This unifies the development experience for all SAP Fiori applications. 

The Application Generator now offers an extensive list of options for data sources. Whether you want to consume a service using a direct URL, connect to an SAP System (i.e. ABAP On Premise or ABAP Environment on SAP Business Technology Platform), or using a local CAP project, the wizard walks you through the steps to set up your new development project.  

You can use a variety of data sources to power your app 

If you know you want to deploy your final application to Cloud Foundry, you can choose to generate the deployment configuration at the time of the project generation. You can also choose to only create deployment configuration after the project is generated. SAP Fiori tools supports both scenarios. We will come back to deployment options later in this blog. 

Migrating from SAP Web IDE is easier 

For those of you who already had a project created using SAP Web IDE, you can switch over to using the latest tooling by migrating the project to SAP Fiori tools. When cloning your SAP Fiori elements project from GitHub, you will get a prompt that asks whether you would like to proceed with the migration. The same convenience is coming soon to SAPUI5 freestyle application. This allows you to benefit from the modern development experience that SAP Business Application Studio or Visual Studio Code provide.  

Connecting to various SAP systems in Visual Studio Code is more convenient 

When you click on the SAP Fiori tools icon in the activity bar in Visual Studio Code, you will see the list of SAP systems you configured and saved at the time of project generation. The connection information, along with username and password, are saved securely in your keychain for Mac and Credential Manager for Windows. This is very convenient for systems that you frequently use. When the system is no longer needed, you can delete the system information from the secure storage in the same view. 

Easy access to project structure and functions 

On this same screen, you will also find the Application Modeler tree, which gives you a streamlined and simplified view of the page structure so you can quickly find what you need and get the job done. From here, you can preview the application or start configuring the application using Page Map or Page Editor. This brings the critical functions you need to develop SAP Fiori elements applications into one focused and consolidated view.  

SAP Fiori tools in the Visual Studio Code activity bar

Broader compatibility with back-end systems and internationalization 

As with all enterprise software, compatibility across platforms is critical, as our customers use a wide variety of technologies. In addition to supporting applications based on an SAP backend, SAP Fiori tools now supports CAP projects that are either based on Node.js or Java. You can take advantage of the annotation LSP whether you want to annotate in EDMX (XML) or CAP CDS. We have also introduced internationalization (i18n) support for properties in the Page Editor to support enterprises that operate in multiple languages. This is in addition to the i18n support in annotation LSP. Soon, you will also be able to preview your application against SAP Fiori Launchpad in an SAP ABAP system.   

Guided Development has more content 

It is our mission to make development easy for our users. For this purpose, we created Guided Development, which provides step-by-step guides that walk the developer through common development tasks. Our guides make it super easy to build and insert code snippets by explaining the steps in the process and the reasoning behind it.  

Guided Development was redesigned to emphasize the educational aspects of the guide while improving the experience of applying different guides in sequence. Many of the guides were enhanced (for example: input validation) thanks to the feedback we received from our users. The collection of guides has continued to grow in each release of SAP Fiori tools, covering a range of critical development tasks, including complex tasks like extension points. 

Input validation in Guided Development

Deploy your apps where you want 

When you are happy with the application, you will want to deploy your app for system integration tests or production. SAP Fiori tools offers extensive options to deploy the application to Cloud Foundry or ABAP. In either case, the SAP Fiori deploy command line interface (CLI) walks you through the steps to generate the necessary deployment configuration for your target environment. For Cloud Foundry, you can deploy to a standalone app router or a managed router. In either case, you can choose to deploy as a standalone application or into the SAP Fiori Launchpad. 

Command to generate application router configurations

If you are testing and wish to undo the deployment, un-deploying an application is now also supported via CLI.  

Those of you who have been using SAP Fiori tools from day one have witnessed the evolution of the extensions with a continuous stream of new capabilities, enhancements, and improvements. I want to thank you for all the valuable feedback you have given us, and I hope you continue to support us in our quest to simplify the development of SAP Fiori apps. To see where we are heading, please see the SAP Fiori tools roadmap.  

For the SAP Fiori tools development team, tashley.  

 

 

[jvanattenhoven]

Thanks for the update. I read in the release notes about the "undeploy" command - "If you are testing and wish to undo the deployment, un-deploying an application is now also supported via CLI."

Is there a page with more information on how to use that command, and its effects?

[sushant_priyadarshi]

Hi jvanatte

We are working on getting the help portal updated. Should be there in couple of days. i will come back and provide a link.

Meanwhile, here are couple of ways you can undeploy:

1. From within a project: If you (re)generate deployment configurations for your project (ABAP or Cloud Foundry), you will notice that a new "undeploy" script has been added to package.json. Simply execute the script "npm run undeploy"
2. From outside the project: You can use the cli whether you are using VSCode or SBAS

Replace the placeholders and enter the following command based on whether you are in VSCode or SAP Business Application Studio

For VSCode, use “npx fiori undeploy --url <Target_ABAP_system_url> --name <Application_name> --transport <Transport_request>”

For SAP Business Application Studio, use “npx fiori undeploy --destination <Destination_name> --name <Application_name> --transport <Transport_request>”

Hint: Refer to your application’s ui5-deploy.yaml file to find the correct values

Based on where you are running outside the project, just make sure you have the latest version of @sap/ux-ui5-tooling installed.

[babuilyas]

How to troubleshoot page map extension in vscode.

its not working on fresh windows, vscode and node latest LTS version.

I see blank page map.

[jakub_pl]

Hello team,

great effort with Fiori Tools development!

I have a question - is it possible or planned to create new project from onPrem ABAP system (loading SAPUI5 app)?

[tashley]

Hi Jakub,

Can you elaborate your question please?

[tashley]

Hi Muhammad,

Sorry for the late response. Are you still having the issue? If so, can you please send us an email at sapfiorielements@sap.com with your project ?

[babuilyas]

Hi, Ashley,

It were resolved after reinstalling vscode. although there were a bug in the extension and i hope it would may resolve. In the page map, when you delete a section it were not removing code lines from configuration file.

[jakub_pl]

Hi,

it would be helpful to load SAPUI5 code directly from OnPrem ABAP system (for example in case, when some custom app needs to be edited). Based on source deployment config could be also generated (to easily deploy new version of application to the same system).

[former_member198924]

Hi Asley,

Do you have any idea on extend a Fiori app in visual studio code.
Please let me know if you have any suggestions.

Thank you

[tashley]

Hi Jakub,

SAP recommends using source control repo such as as GitHub for SAPUI5 codes that can be cloned into workspace in both SAP Business Application Studio and Visual Studio Code. Hence, it is not a high priority for us to offer direct downloading. You may already know that it is possible to download the code manually from the SAPUI5 ABAP repository, but just in case you need it, here is the documentation.

[OliverGraeff]

Hi Durai,

SAPUI5 Flexibility offers the creation of adaptation projects, so that developers can efficiently adapt standard SAP apps with custom changes. This capability is available in SAP Business Application Studio, see this blog post and this documentation.

Adaptation projects are currently not available in the VSCode environment. The SAPUI5 team is aware of this and is looking into the respective requirements and priorities. As of now we do not have a concrete timeline. Once available, we will publish the plans in the SAPUI5 Road Map.

UPDATE on April 8th, 2023: Adaptation projects for VSCode are planned, see the respective item of the SAPUI5 Road Map.

[former_member198924]

Thanks for you response Oliver Graeff.

[osamu_tamaki]

Hi Asley,

Thanks for the nice blog.

I have a question about FE Overview page with FE tools.

I understand that FE overview page has already supported OData V4, but Is seems that the latest FE tools has not supported OData V4 of FE overview page yet like this.

Is my understanding right?
If yes, When will OData V4 be supported?

Osamu

[tashley]

Hi Osamu,

Overview page is a special case at the moment. To create an overview page project, an OData V2 service is still required. After the project is created, you can add an OData V4 service and create the cards using the OData V4 service. The SAP Fiori elements team is working to improve upon this.

To add a OData V4 service to your project in SAP Fiori tools, refer to the documentation here.

 

 

 

[osamu_tamaki]

Thanks! Got the current situation.

 

Osamu

[jakub_pl]

Everything clear, thanks for answer.