Create Serverless SAP Fiori Apps using SAP Fiori Elements and Northwind Service, Cloud Foundry Environment

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 Marius Obert

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
modules:
- name: northwind-destination-content
  type: com.sap.application.content
  requires:
  - name: northwind-destination-service
    parameters:
      content-target: true
  - name: northwind_html_repo_host
    parameters:
      service-key:
        name: northwind_html_repo_host-key
  - name: uaa_northwind
    parameters:
      service-key:
        name: uaa_northwind-key
  parameters:
    content:
      instance:
        destinations:
        - Name: north_service_northwind_html_repo_host
          ServiceInstanceName: northwind-html5-app-host-service
          ServiceKeyName: northwind_html_repo_host-key
          sap.cloud.service: north.service
        - Authentication: OAuth2UserTokenExchange
          Name: north_service_uaa_northwind
          ServiceInstanceName: northwind-xsuaa-service
          ServiceKeyName: uaa_northwind-key
          sap.cloud.service: north.service
        existing_destinations_policy: ignore
  build-parameters:
    no-source: true
resources:
- name: northwind-destination-service
  type: org.cloudfoundry.managed-service
  parameters:
    config:
      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
  parameters:
    service: html5-apps-repo
    service-name: northwind-html5-app-host-service
    service-plan: app-host
- name: uaa_northwind
  type: org.cloudfoundry.managed-service
  parameters:
    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 – https://services.odata.org/v2/northwind/northwind.svc/

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.

Regards,

Debashish Das