SAP Fiori Development with SAP Business Application Studio

[yuval_morad]

Overview

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

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

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.

 

[Louis-Arnaud]

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.

[rima-sirich]

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

[yuval_morad]

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

[Louis-Arnaud]

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.

[Louis-Arnaud]

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 !

[yuval_morad]

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

[jyotsna_singam]

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

[yuval_morad]

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

[former_member701595]

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.

 

[yuval_morad]

Please check the destination set up section

https://blogs.sap.com/2020/07/08/migrating-fiori-application-from-sap-web-ide-to-sap-business-applic...

And the prerequisite section in each flow in the scenario link of the introduction section of this blog

https://help.sap.com/viewer/584e0bcbfd4a4aff91c815cefa0bce2d/Cloud/en-US/97faf19b49374c4680fbc00937f...

[former_member701595]

Hello,

I have done everything, but still unable to fetch the oData Service from the system.

Please find the attached images for the same.

 

[former_member701595]

Destination

 

Cloud Connector Setup

 

Destination Config Error

[yuval_morad]

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

[yuval_morad]

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

[former_member701595]

Thanks!!!!

It worked with "no authentication" :).

[yuval_morad]

great so one of the 2:

1. wrong credentials saved in destination

2. you had 2 destinations with the same url

[former_member701595]

I had only one destination with the same url.

Might be because of wrong credentials.

[DC]

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

 

 

 

 

[yuval_morad]

We will fix it very soon

[yuval_morad]

please retry

[DC]

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 projects

 

exported dev-space tar file

Exported dev-space file

 

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

Thank You

Dharmesh Chovhan

[former_member183736]

Hi dharmesh.chovhan2

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

[DC]

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.

[former_member183736]

Hi Dharmesh,

Yes, all your projects in /home/user/projects.

 

 

Best regards,

Limor

[DC]

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

[former_member183736]

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

[lancona]

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

[yuval_morad]

Hi

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

https://blogs.sap.com/2020/07/08/migrating-fiori-application-from-sap-web-ide-to-sap-business-applic...

also formal documentation

https://help.sap.com/viewer/584e0bcbfd4a4aff91c815cefa0bce2d/Cloud/en-US/22f3401b2e464344943f2a6abf0...

[ostrovskiy_dmitry]

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

[yuval_morad]

Please check this

https://help.sap.com/viewer/17d50220bcd848aa854c9c182d65b699/Latest/en-US/8182ff3b19574f038bd636b999...

 

[ostrovskiy_dmitry]

Thnx a lot, it's work

[TimC]

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

 

[yuval_morad]

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

[former_member394471]

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.

[tashley]

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

[former_member200477]

Hi Yuval,

How can i add an additional view to my existing UI5 project in BAS?

Thanks and Regards,

Navya

[msuday]

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

[msuday]

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

[former_member684527]

Hi All

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

/Tobbe

[yuval_morad]

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

abap-deploy --log-level=error

[former_member684527]

Hi The Principal propagation works perfectly for all scenarios except when trying to deploy using the B.A.S Tool.

1. An Application which is used for Demo use the same Destination as B.A.S with PP configured = works like a charm (Azure Login and then samAccountName value is sent to our backend system properly)


2. Login with Azure credentials to B.A.S = Works fine


3. Use the Destination when deploy. This now use the Origin of SAP Idp and the wrong samAccountName is sent

So we are still stuck 🙂

[yuval_morad]

please share the destination verify you have the value dev_abap in the WebIDEUsage.

also check the logs in deploy to abap cli

[torbjornroberts]

Description=SAP Gateway Development
Type=HTTP
HTML5.Timeout=60000
HTML5.DynamicDestination=true
Authentication=PrincipalPropagation
WebIDEUsage=dev_abap,odata_abap,bsp_execute_abap,ui5_execute_abap,plugin_repository,odata_xs,api_mgmt_catalog,api_mgmt_proxy,odata_smp,odata_hcp_odp,odata_hci,hci_ifl_node,smart_business_odata,smart_business_gen
Name=BusinessApplStudio
WebIDEEnabled=true
ProxyType=OnPremise
URL=http\://<VIRTUAL_HOSTMAPPING\:443
sap-client=100

 

dev_abap is the very first entry 🙂

 

[yuval_morad]

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

 

[torbjornroberts]

Hi Yuval

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 🙂

/Tobbe

ps: Maybe it was enough to have a discussion with you hahaha

[torbjornroberts]

Hi Yuval

We actually got an error again for another project we migrate from WebIDE to BAS

See the image.. any clues?

/Tobbe

[torbjornroberts]

BAS Error

[abhijeet_dadarkar2]

Hi Yuval

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.

Destination Properties

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.

Regards,
Abhijeet

[former_member758530]

Hi Yubal

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

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <title>businesspartners</title>

        <script

            id="sap-ui-bootstrap"

            src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"  LINE 9

            data-sap-ui-theme="sap_fiori_3"

            data-sap-ui-resourceroots='{"ns.businesspartners": "./"}'

            data-sap-ui-compatVersion="edge"

            data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"

            data-sap-ui-async="true"

            data-sap-ui-frameOptions="trusted"

        ></script>

    </head>

    <body class="sapUiBody">

        <div

            data-sap-ui-component

            data-name="ns.businesspartners"

            data-id="container"

            data-settings='{"id" : "businesspartners"}'

        ></div>

    </body> 

</html>

I am starting in this new world, it is my first exercise that I am developing, waiting for your valuable information, thank you

 

[antony_xavier3]

@yuval.morad

 

When we open t-code:/UI2/FLP in BW/4HANA system, by default SAP BW/4HANA Cockpit opens.

How can we have a new link for FIORI Launchpad which is independent of existing BW4HANA Web Cockpit and with this new link we would like to develop new customized FIORI APPS for Reporting purpose. How it can be achieved in BW4HANA System.

What is the process followed for setting up new FIORI Launch Pad for Customer Reporting in BW/4HANA ?

Is there any documentation or Process step by Step available for using FIORI APPS with SAP BW4HANA