Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
Showing results for 
Search instead for 
Did you mean: 
Active Participant
In this post, I demonstrate how to create SAP Fiori Apps using Fiori elements and northwind service.

The main motto was to create a serverless Fiori application. We do not need to create any connection or set any destination on the Cloud connector.

To know more in detail click here for the advantages and disadvantages of the creation of serverless apps on SAP BTP, posted by mariusobert


1. Open your SAP Business Application Studio and create a Multi-Target Application(MTA) under your projects folder


2. Provide a project name.

3. It will reload and redirect to the project folder and the folder structure will look like below. It will contain mta.yaml file.

Right-click on that and select Create MTA module from the template.

4. Select the Approuter Configuration -> Choose Manage App Router -> Provide unique name.

5. After that mta.yaml file will look like this
_schema-version: "3.2"
ID: northwind
version: 0.0.1
- name: northwind-destination-content
- name: northwind-destination-service
content-target: true
- name: northwind_html_repo_host
name: northwind_html_repo_host-key
- name: uaa_northwind
name: uaa_northwind-key
- Name: north_service_northwind_html_repo_host
ServiceInstanceName: northwind-html5-app-host-service
ServiceKeyName: northwind_html_repo_host-key north.service
- Authentication: OAuth2UserTokenExchange
Name: north_service_uaa_northwind
ServiceInstanceName: northwind-xsuaa-service
ServiceKeyName: uaa_northwind-key north.service
existing_destinations_policy: ignore
no-source: true
- name: northwind-destination-service
type: org.cloudfoundry.managed-service
HTML5Runtime_enabled: true
version: 1.0.0
service: destination
service-name: northwind-destination-service
service-plan: lite
- name: northwind_html_repo_host
type: org.cloudfoundry.managed-service
service: html5-apps-repo
service-name: northwind-html5-app-host-service
service-plan: app-host
- name: uaa_northwind
type: org.cloudfoundry.managed-service
path: ./xs-security.json
service: xsuaa
service-name: northwind-xsuaa-service
service-plan: application


6. Now we have to create Fiori Application. Open Welcome file. If not found, you will get it from menu options.

i. Help->Welcome

ii.  Choose SAP Fiori Application


7. Application Type – SAP Fiori Elements

Floorplan Selection – List Report Object Page


Data Source – Connect to an OData Service

Odata Service URL -

Entity – Choose your desired entity. I Choose Customers for the demo.

Navigation – For now I am not selecting any.


Project Attributes

Module name – customers

Application title – Customer

Namespace – Not mandatory

Project Folder path – Click on the folder and select under which project the modules will reside. It will automatically detect the MTA file. and deployment configuration will be Yes.

   Select FLP configuration – Yes.


8. Deployment Configuration-  Choose the target as Cloud Foundry and no destination.


   Next step configure Fiori launchpad. Provide the Semantic Object, Action, Title.  Then Finish.


9. After installing dependencies folder structure will look like this –



10. We need to switch from absolute to relative URLs in the menifest.json file.

From     dataSources > mainSerivce > uri: /v2/northwind/northwind.svc/

To        dataSources > mainSerivce > uri: v2/northwind/northwind.svc/



Though we have configured the Fiori launchpad configuration in our previous step. System creates the cross navigation for us with details we have provided. These navigation properties are required for your custom-developed SAPUI5 app so it can be integrated into an SAP Cloud Platform Launchpad site. Click here for more detail.



11. From now we need to make changes and add a destination file to meet our criteria for serverless BTP application.

Create any file under for defining the destination. In our case, I have created destination.json under the project and paste the following code.

12. Open mta.yaml file and replace the and include JSON file in the resource definition of the destination service instance.


13.  Define route in xs-app.json to the correct router


14. Now Build the MTA project and deploy it.


15. Open your BTP Trail Account. Goto HTML5 Applications section. There you will find your application. (customers). Click on customers.




I hope this post will help you to create Fiori application without setting the destination.



Debashish Das

1 Comment
Labels in this area