Skip to Content
Product Information
Author's profile photo Ashley Tung

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

SincewereleasedSAP Fiori tools in June 2020, the SAP Fiori tools team has been working relentlessly toaddnewfeatures(thank you for all your ideas)andmake the toolsmore robust for SAP Fiori developers.This2106release includes enhancements totheApplicationGenerator,data sources,GuidedDevelopment, anddeployment options.Read on to learn more aboutthese innovations.

TheApplicationGenerator offers more options, includinggenerating the deploymentconfiguration

For any new project, your starting point is the Application Generator. Itcreatesthe project structure you need to jump start your development. TheApplication Generator has evolved tobea single generatorfor 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 PremiseorABAP Environment on SAP Business Technology Platform), or using a local CAP project, thewizard walks you through the steps to set up your new developmentproject.

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

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

If youknowyou 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 supportsboth scenarios. We will come back to deployment options later in this blog.

Migratingfrom SAP Web IDE is easier

For those of you who already had a project created using SAP Web IDE, you canswitch over tousingthe latest tooling bymigrating the project to SAP Fiori tools.When cloning your SAP Fiori elements project from GitHub,you will get a prompt thataskswhether 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 tovarious SAP systemsinVisualStudioCodeismore 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 connectioninformation,along withusernameand password,are saved securely in your keychain for Mac and Credential Manager for Windows. This is very convenient for systems that you frequentlyuse.Whenthe system is no longer needed, you can delete the system informationfrom the secure storagein thesameview.

Easy access to projectstructureandfunctions

On this same screen, you will also find the Application Modeler tree,which gives youastreamlined and simplified view of the page structureso you canquickly find what you need and get the job done. From here, you can preview the application or start configuring the application using Page MaporPage Editor. This brings the critical functions you need to develop SAP Fiori elementsapplications intoone focused and consolidated view.

SAP%20Fiori%20tools%20in%A0the%20Visual%20Studio%A0Code%A0activity%20bar

SAP Fiori tools in the Visual Studio Code activity bar

Broader compatibilitywith back-end systemsand internationalization

Aswith allenterprise software, compatibilityacross platformsis critical,asourcustomersuse a wide variety oftechnologies. In addition to supporting applications based on anSAP backend, SAP Fiori tools now supports CAP projects thatareeither 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 havealsointroducedinternationalization (i18n)support for properties in the Page Editor to support enterprisesthat operate in multiple languages. This isin addition to the i18n support in annotation LSP.Soon, you will also be able to preview your application against SAP Fiori Launchpad inan SAP ABAP system.

引导发展有更多的内容

It is our mission to make development easy for our users. For this purpose, we created Guided Development,which providesstep-by-step guidesthatwalk the developer throughcommondevelopment tasks.Ourguidesmakeit super easy to buildandinsert code snippetsbyexplaining the steps inthe process and the reasoning behind it.

Guided Development was redesigned to emphasizethe 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.Thecollection of guides hascontinued to grow in each release of SAP Fiori tools,covering a range of critical development tasks,including complex tasks like extension points.

Input%20validation%20in%20Guided%20Development

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 testsor production. SAP Fiori tools offers extensive options to deploy the application to Cloud Foundry or ABAP. In either case, the SAP Fiori deploycommand line interface (CLI)walksyou through the steps to generate the necessary deployment configuration for your target environment. For Cloud Foundry, you can deploy toastandalone app router or a managed router. In either case, you can choose to deploy as a standalone application or intotheSAP Fiori Launchpad.

Command%20to%20generate%20application%20router%20configurations

Command to generate application router configurations

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

Those of you who have been using SAP Fiori tools from day one have witnessedthe evolution ofthe extensionswithacontinuous 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 Fioriapps.To see where we areheading, please see theSAP Fiori toolsroadmap.

For theSAP Fiori toolsdevelopment team,Ashley Tung.

Assigned Tags

      16 Comments
      You must beLogged onto comment or reply to a post.
      Author's profile photo Jeroen Vanattenhoven
      Jeroen Vanattenhoven

      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 supportedvia CLI."

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

      Author's profile photo Sushant Priyadarshi
      Sushant Priyadarshi

      HiJeroen Vanattenhoven

      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 --name --transport

      For SAP Business Application Studio, use “npx fiori undeploy --destination --name --transport

      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-toolinginstalled.

      Author's profile photo Muhammad Ilyas
      Muhammad Ilyas

      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.

      Author's profile photo Ashley Tung
      Ashley Tung
      Blog Post Author

      Hi Muhammad,

      抱歉迟到的回复。你还拥有the issue? If so, can you please send us an email at sapfiorielements@sap.com with your project ?

      Author's profile photo Muhammad Ilyas
      Muhammad Ilyas

      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.

      Author's profile photo Jakub Plocki
      Jakub Plocki

      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)?

      Author's profile photo Ashley Tung
      Ashley Tung
      Blog Post Author

      Hi Jakub,

      Can you elaborate your question please?

      Author's profile photo Jakub Plocki
      Jakub Plocki

      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).

      Author's profile photo Ashley Tung
      Ashley Tung
      Blog Post Author

      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,hereis the documentation.

      Author's profile photo Jakub Plocki
      Jakub Plocki

      Everything clear, thanks for answer.

      Author's profile photo DURAI VENKATESH
      DURAI VENKATESH

      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

      Author's profile photo Oliver Graeff
      Oliver Graeff

      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 thisblog postand thisdocumentation.

      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 theSAPUI5 Road Map.

      Thanks a lot for your understanding.

      Author's profile photo DURAI VENKATESH
      DURAI VENKATESH

      Thanks for you response Oliver Graeff.

      Author's profile photo Osamu Tamaki
      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

      Author's profile photo Ashley Tung
      Ashley Tung
      Blog Post Author

      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.

      OData V4服务添加到您的项目在SAP Fiori tools, refer to the documentationhere.

      Author's profile photo Osamu Tamaki
      Osamu Tamaki

      Thanks! Got the current situation.

      Osamu

      Baidu