Skip to Content
Technical Articles
Author's profile photo Divya Mary

Build Fiori application connecting to non-SAP applications

Application developers can quickly build extensions application (such as for Line of Business applications), mobile applications or web applications by consuming the SAP Cloud Platform API Management managed APIs directly from SAP Cloud Platform Web IDE or iOS SDK Assistant.

SAP Cloud Platform Web IDE is a powerful, web-based integrated development tool that simplifies end-to-end application development and enables developers to quickly build Fiori applications connecting to APIs from SAP or non-SAP.   From SAP Web IDE, application developers can discover and consume any APIs from SAP Cloud Platform API Management.

To securely connect to APIs from SAP Cloud Platform API Management, we can use the newly launched Create Data Source  functionality in SAP Cloud Platform Web IDE. Using this functionality the required destinations to discover and consume APIs from SAP Cloud Platform API Management can be very easily created from a simplified wizard in a single step.  Follow this blog to create the required destination to connect to APIs from SAP Cloud Platform API Management in your Fiori application.

Prerequisites

 

This blog is a continuation of our Blog series on Building enterprise digital application via SAP Cloud Platform Integration Suite and in Part 1: Use Common Resource templates for Harmonized APIs to non-SAP CRM Hubs was showcased and in Part 2: Manage APIs from non-SAP CRM Hubs using SAP Cloud Platform API Management.

Build a simple Fiori application using SAP Web IDE

Keeping it very simple in this blog we would be building a simple Fiori application which would show all the accounts maintained in a non-SAP CRM applications of your choice.

Note:- In this blog, UI binding has been done based on the response from the basic-companies common resource templates and therefore the same binding can be re-used irrespective of the actual non-SAP CRM application that you would be connecting to.

 

  • From the services tab in SAP Cloud Platform cockpit, search and select SAP Web IDE Full-Stack tile and click on the Go to Service link.

 

  • You will be navigated to the SAP Web IDE Full-Stack. Select the option, New project from template to create an SAP UI5 application.

 

  • Select SAP UI5 application from the Template Selection screen and select Next.

  • Enter your Fiori Project name say MyCompanies and namespace say ocn and select Next.

  • Enter the name of your main View say App and select Finish.In this blog, XML View type has been used. Alternatively you can select other View Types as well.

 

  • This would generate a Fiori application.
  • From the generated Fiori application, expand and select the neo-app.json file and enter SAP Cloud Platform Open Connectors destinations details to seamless connect to third-party application from Fiori application. Copy and paste the below snippet to your generated neo-app.json file. Change the value of the name property to the destination name that you would have used

Note based on your tenant configuration, if you had used a different destination name to connect to the API Proxified host from SAP Cloud Platform, the below snippet would have to adjusted.  Update the name attributes in the sample snippet to provide the name of your SAP Cloud Platform API Management destination file.

{
      "path": "/apimanagement_api_proxy_gen",
      "target": {
        "type": "destination",
        "name": "apimanagement_api_proxy_gen"
      },
      "description": "SAP Cloud Platform API Management"
},

 

 

 

  • To easily get data from authenticated non-SAP CRM connectors from SAP Cloud Platform Open Connectors, JSONModel can be used.  To create and load the JSONModel with data from the non-SAP CRM connectors from SAP Cloud Platform Open Connectors, expand the model folder and select the file model.js .  Copy and paste the snippet below to the model.js file.
  • From the copied code, enter your API Proxy URL to your non-SAP CRM Hub application. Details of this URL is available in the blog here.

Note:- The URL format should be /{name_of_your_apimanagement_destination}/{your_apimanagement_proxy_basepath}/{your_commonresources_name}

createDataModel: function () {
			var oModel = new JSONModel();
			oModel.loadData("/apimanagement_api_proxy_gen/{your_api_management_proxified_url}/basic-companies", null, true, "GET", null, false);
			return oModel;
		},

 

 

  • The created data model would have to be set to the UI5 view. For this select the Component.js file and then copy and paste the snippet below to the init method.
//set the data model
this.setModel(models.createDataModel(),"data");

 

  • Using the data binding, JSONModel can be bound to the UI elements to render the response from the third-party application in a simple table view. Expand and select the App.view.xml file from the generated code and copy and paste the snippet below.
<Table items="{data>/}">
							<columns>
								<Column>
									<Text text="Name"/>
								</Column>
								<Column>
									<Text text="Phone"/>
								</Column>
								<Column>
									<Text text="Website"/>
								</Column>
								<Column>
									<Text text="Industry"/>
								</Column>
								<Column>
									<Text text="Shipping Address"/>
								</Column>
								<Column>
									<Text text="Billing Address"/>
								</Column>
							</columns>
							<items>
								<ColumnListItem>
									<cells>
										<ObjectIdentifier title="{data>name}"/>
										<Text text="{data>phone}"/>
										<Text text="{data>website}"/>
										<Text text="{data>industry}"/>
										<Text text="{data>shippingAddress/composite}"/>
										<Text text="{data>billingAddress/composite}"/>
									</cells>
								</ColumnListItem>
							</items>
						</Table>

 

 

 

 

  • Click on the Save button to save all changes and then Click on Run/Play button to Run the Web applications.

 

This will launch the Fiori application in a new browser tab and after successful user login, data from your non-SAP application via SAP Cloud Platform Open Connectors which is secured and managed via SAP Cloud Platform API Management would be shown.

 

 

With this we come to an end of our blog series on Building enterprise digital application using SAP Cloud Platform Integration Suite. In the blog series, we had showcased the following functionality of SAP Cloud Platform Integration Suite:-

  • Ease of connecting to any non-SAP applications of your choice via the pre-built connectors from SAP Cloud Platform Open Connectors.
  • Benefits of using harmonized resources, leveraging the common resources templates from SAP Cloud Platform Open Connectors.
  • Discover, explore and manage the non-SAP connectivity via the Open Connectors providers in SAP Cloud Platform API Management.
  • Securely connect to SAP Cloud Platform API Management APIs to build, deploy an enterprise grade Fiori application connecting securely to a non-SAP application.

SAP Cloud Platform Integration Suite is a cohesive Integration Suite on the cloud to simplify integration for our customers by combing together the right set of services.

To know more about SAP Cloud Platform Open Connectors visit us at SAP Community

Assigned tags

      7 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Rashmi Joshi
      Rashmi Joshi

      Divya Mary

       

      Thanks for sharing details step by step document.

      However, I am getting error while giving detination on models.js page I am getting below error and hence not able to proceed. Please help to understand what this error is and how to resolve it –>

       

      1. Error Screen Shot from Models.js page –>

       

      2. In the above screen I have used below values –>

       

      /{name_of_your_apimanagement_destination}/{your_apimanagement_proxy_url}/{your_commonresources_name}

       

      /openconnectors/https://p1223928671trial-trial.apim1.hanatrial.ondemand.com/p1223928671trial/HubSpotCRM/basic-companies-rash

       

      3. In SCP –> Destinations –> I have created HTTP type destination by name openconnectors with URL –>

       

      https://apiportaluXXXXXf-pXXXXXXXtrial.hanatrial.ondemand.com

       

      Please help to understand what step I am doing wrong.

       

      Thanks & Regards,

      Rashmi

      Author's profile photo Divya Mary
      Divya Mary
      Blog Post Author

      Hi Rashmi,

      Kindly use the API Proxy base path URL instead of the fully qualified URL. So it should be something like :-

      /openconnectors/p1223928671trial/HubSpotCRM/basic-companies-rash

       

      This should resolve the issue for you.

      Best Regards,

      Divya

      Author's profile photo Rashmi Joshi
      Rashmi Joshi

      Thanks Divya Mary , issue fixed now 🙂

       

      Regards,

      Rashmi

      Author's profile photo Divya Mary
      Divya Mary
      Blog Post Author

      Hi Rashmi,

      Glad to hear that the solution proposal resolved the issue.

      Best Regards,

      Divya

      Author's profile photo Mostafa Mahmoud
      Mostafa Mahmoud

      can you explain the URL if it : http//-mydomain/api/helpview/-function

       

      what should be in neo-app.json and In the model ?

      Author's profile photo Sekhar Dachepalli
      Sekhar Dachepalli

      Great blog series. Thanks Divya.

      I am able to complete it with all this information.

      Author's profile photo Divya Mary
      Divya Mary
      Blog Post Author

      Hi Sekhar,

      Thanks a lot for your kind words.

      Best Regards,

      Divya