Skip to Content
Technical Articles

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

You must be Logged on to comment or reply to a post.
  • 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

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


    • 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

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





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

    • Hi,


      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.




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

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

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

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