Development of Fiori app for CF using SAP API Businesses HUB in SAP WEB IDE

[Former Member]

 

Hi,

In this blog I will show how to create a Fiori app in SAP Web IDE, multi-cloud version using an OData service from the SAP API Business Hub. I will then deploy this application to the new SAP Cloud Platform Cloud Foundry environment.

I’ll use the “Opportunity Entity Type” service from the “SAP Hybris Cloud for Customer - OData API” package. You can use any OData V2 service that is enabled in SAP API Business Hub.

You can learn more about SAP Web IDE, multi-cloud version here.

 

Let’s create an app…

1. We first open the new SAP Web IDE, multi-cloud version.
   Make sure to enable the new version in SAP Cloud Platform cockpit as described here.


2. We start from creating a new multi-target application.
   In SAP Web IDE, we go to: File > New > Project from Template and select the Multi-Target application tile.
   When developing applications for the Cloud Foundry environment, the main project is a Multi-Target application (in short MTA). The MTA is a bundle of multiple modules having a common lifecycle such as DB, business logic, and UI. It can also contain only parts of it. In this blog I’ll focus on UI only.


3. Now we need a new HTML5 module for the project we just created.
   
   
   
   1. We right-click on the MTA project and select New > HTML5 Module.
      Currently there are three templates which you can start a module with.
      We’ll use the CRUD Master-Detail Module template.
   
   
   2. We fill in the Basic Information fields. For example:
      Module Name: Opportunities
      Title: Opportunities
      Namespace: my.app.opp
   
   
   3. In the Data Connection step, let’s select SAP API Business Hub from the drop-down list.
      When prompted, enter your SAP Business user name and password to receive all available OData V2 services in the SAP API Business Hub. You can explore the services as any other service using the Show Details option and see the entities and some sample data using the SAP API Business Hub sandbox.Use your SAP Business user name and password to fetch the API key you need to get the information from the SAP API Business Hub sandbox. Let’s search for and select the Opportunity Entity Type service.
   
   
   4.  In the last step of the wizard, we will customize the template as follows:
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      

      Property	Value
      Object collection	OpportunityCollection
      Object Title	Name/content
      Object Numeric Attribute	ExpectedValue/content
      Object Unit of Measure	ExpectedValue/currencyCode
      Line Item Collection	OpportunityProduct
      Line Item Title	ProductDescription/content
      Line Item Numeric Attribute	ProposedValue/content
      Line Item Unit of Measure	ProposedValue/currencyCode

      
      Now we only need to click Finish.
   
   
   
   


4. Once we have the app, we can customize it.
   
   
   
   1. Using the layout editor, we’ll add a few fields to the Details page.
   
   
   2. Let’s add a Form to the Icon Tab bar.
   
   
   3. Now we can add the following fields:
      
      
      
      • AccountName/content
      
      
      • PrimaryContactName/content
      
      
      • PublishToForecast
      
      
      • ProbabilityPercent
      
      
      
      
   
   
   
   


5. We save our work and preview the app by simply clicking the green Run and selecting the flpSandbox.html file.
   Once again, the data is coming from SAP API Business Hub sandbox.


6. Once we decide this is what we want, we can replace the dependency from the SAP API Business Hub sandbox to our service.
   We need to make sure we have a destination in our cockpit and then we need to update the neo-app.json file so that we can preview the app in Web IDE using it.
   We also need to update the resources section in the mta.yaml, for the deployment to Cloud Foundry.


7. Build and deploy the app
   Finally, we can export the project to the file system and follow this guide to build the project into an MTA archive file (mtar) and deploy the crated .MTAR to cloud foundry.

Till next time, Elina

 

If you have any questions, ask our community , check out our documentation ,or contact us.

Register here to get the latest news and updates from SAP Web IDE.