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.
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.
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.
Blank page is displayed when clicked on customer application . not able to see any data