Skip to Content
Product Information

SAP Fiori Development with SAP Business Application Studio

Overview

SAP Business Application Studio enables you to develop SAP Fiori applications for various scenarios, and deploy to different target runtimes:

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.

Launch Options

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.

 

Target Runtime

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.

Template Selection

You can select from the rich set of SAP Fiori freestyle and SAP Fiori elements templates that are available.

Service Selection

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

Layout Editor

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.

Code Assist

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.

Code assist for SAPUI5 controls in JavaScript is also available. To add it, perform “npm install” on your project and add “jsdoc” for the parameters of your JavaScript file.

Code Validation

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.

Code validation using ESLint for a JavaScript file is also available. To add it, perform “npm install” on your project and adjust your “.eslintrc” file.

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.

Page Map

This tool provides a visual representation and maintenance of the application’s pages, navigations, and the service entities that it uses.

Service modeler

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

Overview

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.

Run Configuration

You can create multiple run configurations for the same SAP Fiori application including the following options:

1. Runnable files – productive, mock, OPA/QUnit

2. SAPUI5 versions

3. Target data source systems


 

4. Cloud Foundry dependencies, such as xsuaa or ABAP Cloud

Run Execution

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:

  1. Perform “npm install” for the project if it wasn’t done automatically upon project creation.
  2. Perform “npm run build”, which triggers the SAPUI5 build and generates your mini application inside the “dist” folder.
  3. 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:

  1. 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.
  2. 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.

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

 

Conclusion

You are now a bit more familiar with the following SAP Fiori scenarios and development tools that SAP Business Application Studio has to offer:

  1. SAP Fiori scenarios for ABAP and Cloud Foundry
  2. Project creation capabilities
  3. Data source providers
  4. Code and visual development tools for a SAP Fiori freestyle and an SAP Fiori elements
  5. Local run of an SAP Fiori application
  6. 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.

 

38 Comments
You must be Logged on to comment or reply to a post.
  • Hello,

    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.

    • Hi Louis,

      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 😉

      Best Regards,

      Rima

      • Hi Rima,

        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.

         

         

    • Hi Louis,

      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.

      Regards

      Yuval

       

      • Hi Yuval,

        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

  • Hi,

    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,

    Jyotsna Singam

    • Hi

      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

       

       

  • Hello,

    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.

     

  • If sub path enabled and you are able to access the BE with you user.

    1. Last proposal would be to have only ONE destination to that system url in the account and not multiple
    2. set it as no authentication
  • Hi Morad

    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%20starting%20dev%20space

    Error starting dev space

     

     

     

     

    /
    Error%20starting%20dev%20space
      • Hi Yuval

        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.

        BAS%20projects

        BAS projects

         

        exported dev-space tar file

        Exported%20dev-space%20file

        Exported dev-space file

         

        any ideas??? I have been able to download individual project from BAS fine.

        Thank You

        Dharmesh Chovhan

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

          Best regards,

          Limor

          • Hi Limor

            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.

            Thanks

            Dharmesh.

          • Hi Limor,

            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.

            Cheers

            Dharmesh

          • Hi,

            I will set a meeting since I am unable to reproduce it.

            Could you please share your email?  or sent it to me: limor.erez@sap.com

            Best regards,

            Limor

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

    Best regards,

    Luis Ancona

  • Hi

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

    1.  I have set up a destination to the COS API service (seem to work ok, but auth error when checking connection - assume it is not requesting a JWT at this stage, same thing works fine from PostMan).  Key question, how do I configure the REST API destination to use it in BAS ?
    2. When creating a template, I select 'Data Service' in the wizard and it only seems to allow SAP backend systems to be selected - how do I include this ?

    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

     

    Many thanks

    Tim

     

    • Hi,

      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:

      1. manifest.json in section data source and model
      2. xs-app.json for the right route to the destination
  • Hi,

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

    Thanks,

    Avinash.

    • Hi Avinash,

      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.

      Best regards,

      Ashley

    • Hi Navya,

      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

       

      Thanks

      Uday

  • Hi All

    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?

    Thanks

    Uday