Skip to Content
Technical Articles
Author's profile photo Dhanasupriya Sidagam

SAP Fiori Elements using SAP Business Application Studio

Heylo Community

This weekend, I came up with the demonstration on What is SAP Business Application Studio, Difference’s between SAP Business Application Studio and SAP WEB IDE, SAP Fiori Elements development using SAP Business Application Studio.

SAP Business Application Studio: A powerful and modern development environment, tailored for efficient development of business applications for the Intelligent Enterprise. As most of us know, it is available as a Subscription in SAP Cloud Platform Cloud Foundry environment.

The most interesting fact about SAP Business Application Studio is, this service is handy with Amazon Web Services(AWS), Microsoft Azure and Alibaba Cloud.

SAP Business Application Studio Vs SAP WEB IDE Full Stack:

Now let’s practice the SAP Fiori Elements template: List report floorplan.

Open SAP Business Application Studio and create a Dev Space.

Open the Space once it is in RUNNING

From the central page, click View -> Find Command

Search for below highlighted SAP Fiori Tools and launch it.

Follow the below steps to create List Report Page

I have chosen SAP Demo Gateway System ES5 for this trial.

Name the mandatory fields

Project Structure:

Open application preview in browser:

With this, the application output will show in a new tab:

Still willing to do changes to the application, go after below steps.

Opt a view:

Click the annotation indicator:

Just copy the annotations to existing annotation file in our project.

Please play around the SAP Fiori Elements templates and let me know your comments.

Thank you!!


BR//Dhanasupriya Sidagam

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Mostafa Naghizadeh
      Mostafa Naghizadeh


      Almost all of these functionalities on Fiori are available on VS Code with Extentions.

      I suggest you check that also.



      Author's profile photo Somenath Chanda
      Somenath Chanda

      Hi Dhanasupriya,

      I am unable to produce the Application output after exposing the Port.

      A new tab is opening but the output looks like below screen-shot:Application%20Output%20not%20generated

      Application Output not generated

      Do let me know, what is missing ?


      Thanks in advance


      Somenath Chanda

      Author's profile photo Neil Ward
      Neil Ward

      I had the same issue ... resolved by allowing popups for the site in the browser , i.e. disabling the popup blocker


      Author's profile photo Neil Ward
      Neil Ward

      More on this ... I'm not sure if this is the normal behavior, but if you're seeing this screen the local server is running, open the test folder and click on the sandbox or mock sandbox html file... it'll run your app

      Author's profile photo Rohith Mohan
      Rohith Mohan

      Right click on the Webapp folder and then go for preview.

      Author's profile photo Juan Felipe Zorrilla Ocampo
      Juan Felipe Zorrilla Ocampo

      Hi, I'm having an issue when I try to use all this SAP Fiori Extension tools with a Northwind OData service, it's just very strange.


      I wanted to try out the Fiori Tools extensions on VS Code as Mostafa recommended but it seems to be an issue when trying to input my credentials for an OData URL comming from the ES5 Gateway system. The issue is "btoa is not defined".

      Then I tried to use Northwind URI as an alternative but I found an issue with the Service Modeler as well as in SAP BAS.


      I hope all this issues can be fixed sooner. If anyone knows a solution for this it would be very appreciated. There are some issues raised also on github for this.





      Author's profile photo Rohith Mohan
      Rohith Mohan

      I am trying to understand, when we create a ui5 application from template, why it’s project structure is different from free style development ? When i expand the WebApp folder, I dont see the folders of View and Component. I think View.xml is nothing but Annotation.xml, but Component file ? Please help me to understand.

      Author's profile photo Arun Bharathi Kumarasamy
      Arun Bharathi Kumarasamy



      The application generated in this blog uses the List Report and Object page floorplans . The floorplan itself will generate the view based on the annotation.xml so there is no need to add new views are controllers like the freestyle applications.

      To understand better how the annotations help render the UI without the developer define views , refer to the below Fiori Elements documentation.




      Author's profile photo Oliver Burre
      Oliver Burre

      Nice Blog, Preview works fine for me.

      How can I deploy the app to CF?

      I tried with the cf cli html5 plugin to push it

      cf html5-push

      but it doesn't work since there is no xs-app.json.

      Author's profile photo Naga Prakash
      Naga Prakash

      Hi Oliver,

      Were you able to deploy the app to CF?




      Author's profile photo Anand Rai
      Anand Rai

      Hi Oliver,


      How did you deploy the app to CF. ?



      Author's profile photo karimulla mahammad
      karimulla mahammad

      how to add the export to excel in list report

      Author's profile photo Sindy Zhan
      Sindy Zhan

      Why can't I find any "sap fiori tools" in the Business Application Studio @ cn40 ac-live? Is there an alternative way to use Fiori Elements?

      Author's profile photo Matthias Beck
      Matthias Beck

      How would I change the layout of the pages (add buttons, inputs, etc.)? There is no View Folder in the tree.

      For example the "Create" page is empty, so is the details page.

      Author's profile photo Venkateswaran S
      Venkateswaran S

      Hi Dhanasupriya,


      I need to migrate Fiori elements annotations based custom app from WEB ide to BAS. Is same way of normal UI5 application migration to be followed or any specific approach for Fiori elements annotation modeler app migration to SAP BAS.

      Author's profile photo Francisco José Carrasco Valverde
      Francisco José Carrasco Valverde

      How can I deploy this kind of project (SAP Fiori Elements) to SCP?

      I understand I should build the MTA first however the file yaml.mta is not generated in these kind of projects.




      Author's profile photo Anca Milos
      Anca Milos

      Hello 🙂 Thanks for the blog 👏

      I trying to reproduce it but when I search after fiori tools iI can see only see the option "Fiori :Migrate web ide project for use in Fiori tools"


      Any idea if some additional plugin I need to install?