SAP Fiori Development with SAP Business Application Studio
SAP Business Application Studio enables you to develop SAP Fiori applications for various scenarios, and deploy to different target runtimes:
- SAP Fiori for SAP S/4HANA
- SAP Fiori for SAP S/4HANA Cloud
- SAP Fiori for ABAP Cloud
- Extending an SAP Fiori Application
- Cloud Foundry
- Standalone SAP Fiori as a side-by-side extension to a remote application
- SAP Fiori application managed by SAP Cloud Platform within central Fiori Launchpad
- SAP Fiori as part of a full-stack application on Cloud Foundry
Let’s go over the main tools and capabilities of SAP Fiori application development in SAP Business Application Studio.
The SAP Fiori Dev Space
This is where your journey starts. After you complete on-boarding, open the SAP Business Application Studio dev space manager to create your first SAP Fiori development environment.
You can read more about the dev space concept and capabilities in this blog post.
From the Create a New Dev Space screen, select the SAP Fiori dev space. The SAP Fiori dev space is our tailored development environment, packed with everything you need for developing an SAP Fiori Application.
The SAP Fiori dev space includes the SAP Fiori elements and freestyle tools, launchpad, UI adaptation, SAPUI5 tools, and more.
Create an SAP Fiori Application
SAP Business Application Studio offers various SAP Fiori freestyle and SAP Fiori elements templates, supports ABAP or Cloud Foundry target runtimes, and enables service selection from multiple data sources.
To create a new SAP Fiori project, you can open the new application wizard in 2 ways:
- From the Welcome page, click New project from template.
- From the menu, navigate to View> Find Command or press F1 and choose SAP Business Application Studio: Create Project from Template.
To create a new project from the terminal, enter the “yo” command.
The goal is to generate a project that is ready for local run and deployment without additional manual coding.
Selecting between ABAP or Cloud Foundry as the project’s target runtime affects the structure of the created project and its content, so it’s important to choose the correct target runtime.
You can select from the rich set of SAP Fiori freestyle and SAP Fiori elements templates that are available.
You can consume your service from the following data source providers:
- My SAP Systems based on destinations in the subaccount. This data source provides a service catalog or service URL.
- ABAP Cloud system based on an ABAP Cloud System service instance. This data source provides a service catalog.
- Workspace based on a service you created in your full-stack SAP Cloud Application Programming Model (aka CAP).
- Local service based on a local “metadata.xml” file from the workspace. This data source is mainly used as a mock.
- SAP API Business Hub based on a destination in the subaccount. This data source provides a service catalog.
Select your service from the various data source providers in the Consume Services step and then bind the data to your template.
Develop an SAP Fiori Application
SAP Fiori Freestyle
You can develop your “view.xml” file using a graphical drag and drop tool and you can bind your controls and properties to the relevant model. For more information, click here.
You can use code assist for your “view.xml” file for assistance with SAPUI5 elements, aggregation properties, events, enumeration values, associations, and namespaces.
You can also include code assist for deprecated and experimental controls from your user preferences. More information can be found here.
Code assist for the “manifest.json” file using the latest SAPUI5 schema (uploaded to the schema store) is available.
You can use code validation for your “view.xml” file to check for non-existing SAPUI5 elements, wrong types and cardinality inside an aggregation, duplicate IDs, and deprecated SAPUI5 elements.
Code validation for the “manifest.json” file using the latest SAPUI5 schema (uploaded to the schema store) is available.
SAP Fiori Elements
Annotations XML editor
This editor provides input help and validation based on the project metadata, OData vocabularies and an analysis of the project structure.
This tool provides a visual representation and maintenance of the application’s pages, navigations, and the service entities that it uses.
This graphical tool provides visualization and maintenance of an OData service, including its backend and local annotations.
More information regarding SAP Fiori elements development can be found here.
Test Your SAP Fiori Application
SAP Business Application Studio utilizes the SAPUI5 standard development tools, such as the SAPUI5 tools and application router for running your SAP Fiori applications on your local dev space, as close as possible to your target runtime environment.
Run configuration is one of the SAP Business Application Studio productivity tools, enabling you to create multiple configurations and execute them with one click.
You can create multiple run configurations for the same SAP Fiori application including the following options:
1. Runnable files – productive, mock, OPA/QUnit
Once a configuration is created, click the “Run” button to run the application in a separate browser.
The run tool installs all dependencies that are missing for run execution and uses a dedicated run port. If you already have a running application using the dedicated SAP Fiori port (6004), you must stop the running application first.
You can locally run your application utilizing all authentication methods configured in the subaccount destination, such as principle propagation.
More information regarding local run can be found here.
Build and Deploy your SAP Fiori Application
SAP Business Application Studio provides integrated options from the terminal for build and deployment of your SAP Fiori application to your target runtime.
Build and Deploy to ABAP
If you created a project with the ABAP target runtime, follow these steps from the terminal:
- Perform “npm install” for the project if it wasn’t done automatically upon project creation.
- Perform “npm run build”, which triggers the SAPUI5 build and generates your mini application inside the “dist” folder.
- Perform “abap-deploy”, which deploys your application interactively. You can also deploy automatically using deploy configuration.
The deploy to ABAP in SAP Business Application Studio is faster than in SAP Web IDE Full-stack.
Note that your target ABAP system must include the SAP_UI 753 SP00 or higher version of the software component.
More information regarding build and deploy to ABAP can be found here.
Build and Deploy to Cloud Foundry
If you created a project with the Cloud Foundry target runtime, perform these steps:
- Log in to the target Cloud Foundry space, where you want to deploy the application.
From the menu, click View > Find Command to open the command palette.
- Enter “MBT build” in the terminal, which generates your MTA archive file, or right-click on the project’s “mta.yaml” file and click Build MTA.
- Enter “CF deploy <mtar file name>” in the terminal, which deploys your application to the space that you logged into, or right-click on the mtar file and click Deploy MTA Archive.
More information regarding build and deploy to Cloud Foundry can be found here.
A good blog post about MTA tools can be found here.
You are now a bit more familiar with the following SAP Fiori scenarios and development tools that SAP Business Application Studio has to offer:
- SAP Fiori scenarios for ABAP and Cloud Foundry
- Project creation capabilities
- Data source providers
- Code and visual development tools for a SAP Fiori freestyle and an SAP Fiori elements
- Local run of an SAP Fiori application
- Build and deploy to ABAP and Cloud Foundry
I invite you to try our SAP Fiori development tools with SAP Business Application Studio and will be happy to hear your feedback personally or here in the comments.
You can take your first steps using the Trial environment. Use this simple on-boarding tutorial, develop an SAP Fiori application using this group of tutorials, and take a look at all of the SAP Business Application Studio tutorials.
Thanks this is very helpul although I don't see how SAP business application studio is an improvement of web ide, everything seems more complicated (for example, the build and deployed is way more simple on webide...).
I tried to create a new fiori project with fiori element template, but on the last step, even if everything is filled up correctly, the "NEXT" button is greyed out. Do you know why ?
I read a previous blog post about migration of webide project to sap Business application studio. What I don't understant is why a simple git clone doesn't work... It worked with webide.
Which git repository did you try to clone? In case it is git on premise repository, Cloud Connector should be configured and a dedicated destination should be added as well. In case it is a public repository and you used a ssh url, probably a certificate was missing. If you will share more details, I'll be glad to try to assist you to resolve the git clone issue 😉
Thank you, the problem was that it was not reconized as a fiori project (not able to use the guided development for example).
I tried again and it is fixed (or I did something wrong the previous time, that’s not impossible :)). I'm still not able to run the project though... I'll tried later to understand why.
You can continue to use Web IDE, and we will be happy to get every feedback to ease your development and improve with Application Studio.
As for issue raised:
1.NEXT Button – I assume there is a capital letter check in the name, this should be improved.
2. Deploy to ABAP is should be much faster, decoupled from build and offers configuration options. We plan also to add UI based triggers in the future.
I understand that SAP Business Application Studio is the future and I just wanted to share the disapointment some useful features of the webide, But I'll try to continue to use Business Application Studio.
Thank you for the tips for the NEXT button, it works !
I understand, feel free to send me in mail all the pain points you have along the way and I will strive for a solution
I read that the prerequisite is to have SAP_UI 753 SP00 component in onprem system. Is there any workaround to deploy UI5 application onto system with lower version?
Thanks & Regards,
In general customers are recommended to upgrade. SAP_UI 752 will have End of Maintenance end of this year.
There is no downport planned. A workaround is to build, then download the dist folder and to deploy the content with report /UI5/UI5_REPOSITORY_LOAD from ABAP side
I am trying to create a SAPUI5 application in Cloud Foundry Environment as a project from template in SAP Business Application Studio. I'm not able to get the OData service from this system in Business Application Studio. I'm able to get the same while using the SAP Web IDE.
I also installed the Cloud Connector and configured it, but still I'm not able to get the services.
Please check the destination set up section
And the prerequisite section in each flow in the scenario link of the introduction section of this blog
I have done everything, but still unable to fetch the oData Service from the system.
Please find the attached images for the same.
Cloud Connector Setup
Destination Config Error
In the cloud connector check you enabled sub path access to this system.
In addition I see Basic authentication in the destination set up, can you try using no authentication and verify your credentials are ok and not locked
It worked with "no authentication" :).
great so one of the 2:
1. wrong credentials saved in destination
2. you had 2 destinations with the same url
I had only one destination with the same url.
Might be because of wrong credentials.
If sub path enabled and you are able to access the BE with you user.
We have been using BAS for a over 2 months. We have a DEV SPACE for a user and are not able to start it up. Was okay till Firday.
When we click on start, we see this error in the console.
Error starting dev space
We will fix it very soon
Appreciate your prompt attention to this. The dev-space has been started and all looks good.
I also did notice there might be an issue downloading the dev-space. I have 3 projects in the dev-space but when you look at the downloaded file, there is only 1 project.
exported dev-space tar file
Exported dev-space file
any ideas??? I have been able to download individual project from BAS fine.
Hi Dharmesh Chovhan,
I was unable to reproduce this. I selected 3 projects in my workspace and right-clicked download and it downloaded a tar file named projects( the root name of these projects) with all 3 projects.
Is it reproducible in your environment?
If the answer is yes, can we schedule a meeting so we could have a further investigation of this issue?
Selecting the projects and then Clicking on download works fine. I had only tried it with one project and it works fine.
the issue is back at the dev space screen where you can download the whole dev space. Is this meant to download all your projects??? When you click on the download button.
Yes, all your projects in /home/user/projects.
This download is where the issue is that i experienced. I did another download and only does the 1 project as you see in the screen illustrations.
we have more projects in this dev space as you can see.
There is the work around to download projects from BAS but I thought you might want to look into this as it is meant to be a feature on the main dev-space screen.
Let me know if you need any more information.
I will set a meeting since I am unable to reproduce it.
Could you please share your email? or sent it to me: email@example.com
I am in a S/4 HANA Cloud project (I created the destination in Clound Foundry Cockpit), and I need to create a Fiori application that consume several services (ODATA and SOAP) and I don't know how to consume the ODATAS (to show the data in two tables).
My doubt are:
-Which files i have to modify with the destination data and the uri /sap/opu/odata/sap/API_COSTCENTER_SRV/ (XS-APP.json, manifest.json, mta.json ?
- How i have to implement the query to get the oModel ?
Once you create a destination to S/4 HANA you do not need to manipulate any file.
Check "environment set up" item 7 for destination set up
also formal documentation
Hello, Yuval Morad
I have a question about refresh/update annotations from backend system.
What is the way to update XML files for use it actual in the service modeler and annotations
Please check this
Thnx a lot, it's work
I am trying to connect to a very simple REST API (in fact, I have enabled the 'customer order sourcing' trial in cloud foundry) and try out a a simple SAPUI5 front-end for a demo. At the moment, I am just creating a template project with BAS (fiori, basic SPAUI5). Couple of questions:-
At the moment, everything seems geared around ODATA (and SAP Gateway services in particular), it is very unclear how you configure and use a REST API (JSON) - should I be using WebIDE or a local IDE like VS Code ?
Any thoughts, pointers to useful information would be very helpful
The wizard supports only OData service parsing, since it creates a metadata file to be used later by the DT tools.
In case you have a REST based service which does not use OData protocol you should update manually 2 files:
How can add multiple sap ui5 view in my fiori application using business application studio, just like SAP Web Ide Full-Stack we are doing right click on 'webapp' then selecting .'New' after that we have to select 'SAPUI5 View '?
This is in the roadmap for SAP Fiori tools. It is a high priority feature for us although it hasn't been planned as we are currently investigating the best approach to deliver this.
How can i add an additional view to my existing UI5 project in BAS?
Thanks and Regards,
You can add it using right click ->New file and give the viewname.xml. I dont think there will be view template as in WebIde.
I have done the same and added new controller but unable to load the newly added controller when checked in network tab. Please let me know if you are able to do
I am trying to create Sample application in SAP Business studio. I have created a application with initial view and when I added a new view and controller. when I run the application, I do not see the changes made in second view . On debugging I saw that second controller itself is not getting loaded. Only error its showing is error in loading Component-preload.js from sap.ui.module. Any help?
Have anyone of you managed to get the Principal Propagation to work also when you Deploy the Fiori app to the on-premise Development Gateway system?
I am in a longrunning OSS ticket with SAP where BAS Deployment using a Destination configured with Principal Propagation fail.
Principal Propagation works in general for any other Service in BTP, but now when you try to use a DESTINATION configured with this model. It only works with No-Authentication , or BasicAuthentication
Deploy should work with principle propagation
please make sure you have the right set up
How to Guide – Principal Propagation in an HTTPS Scenario | SAP Blogs
make sure the prerequisite are ok
Deploy to the SAPUI5 ABAP Repository - SAP Help Portal
Then check the logs in abap-deploy using terminal
Hi The Principal propagation works perfectly for all scenarios except when trying to deploy using the B.A.S Tool.
So we are still stuck 🙂
please share the destination verify you have the value dev_abap in the WebIDEUsage.
also check the logs in deploy to abap cli
Description=SAP Gateway Development
dev_abap is the very first entry 🙂
Does deploy work for system without principal prop?
What does the log say?
please open a ticket or
send me your mail we can meet on Monday for a short call
This morning it worked, I have no clue on why it failed last week and worked today.. maybe a "caching issue" .. but the settings I configured last week.. works this week 🙂
#Case Closed 🙂
ps: Maybe it was enough to have a discussion with you hahaha
We actually got an error again for another project we migrate from WebIDE to BAS
See the image.. any clues?
I have a SAP UI5 transactional app developed in SAP Business Application Studio (SAP Fiori template, not Adaptation Project) and I am trying to deploy it to my on-premise SAP S/4HANA 1909 FPS02 system with embedded FES.
My cloud connector resources has all paths & sub paths enabled and my destination has the following properties (in image below, WebIDEUsage = dev_abap is present) with Authentication = NoAuthentication.
On using the deployment procedure mentioned in link I get the following error (image below).
SAP BAS Deployment Error
Funny thing is, in my transport on the on premise system (the one I use during deployment), I see some objects being captured and the UI5 app (even in SE80, I see some details in the package), but when I go to SICF, I do not see the node of my SAP UI5 application.
What could be the possible issue here - considering my destination has all the properties and the cloud connector is allowing all sub-paths. Apparently, only a partial deployment is occurring (ABAP_REPOSITORY_SRV is maintained as well)
I have raised an OSS anyway, but I was hoping if you would have something off the top of your head.
I have problem in
Create an SAP Fiori App Using SAP Business Application Studio
Step 3: Generate an app based on SAPUI5 Application template
(10 - A glitch in the wizard that we need to fix manually: Open businesspartners/webapp/index.html and modify the following line:)
According to what is indicated, I can understand that it is to create the index.html file, copying those 26 lines in the new index.html file. I do not know what to do to line 9, or it is simply to copy all the lines. To continue with the tutorial steps, thanks
I am starting in this new world, it is my first exercise that I am developing, waiting for your valuable information, thank you