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!!

#EnhanceLearning

BR//Dhanasupriya Sidagam

11 Comments
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

    Regards,

    Somenath Chanda

    /
    Application%20Output%20not%20generated
    • I had the same issue … resolved by allowing popups for the site in the browser , i.e. disabling the popup blocker

      Neil

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

     

    Regards.

     

    Juan

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

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

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