In this post, I demonstrate how to create SAP Fiori Apps using Fiori elements and northwind service.
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
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
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
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
- SAP Managed Tags:
1 Comment
