Create an SAP Fiori App Consuming HubSpot Data

Go to Services, click on SAP Web IDE Full-Stack, and then click on Go to Service.

Click on New Project from template to create a project.

Click on SAPUI5 Application and then click Next.

Fill the following details:

Click Next.

Click Finish to create the project.

Open neo-app.json and copy the following code:

{
  "path": "/<replace_by_account_id>trial/HubSpotCRM/Basic_Companies",
  "target": {
    "type": "destination",
    "name": "API_Portal",
    "entryPath": "/<replace_by_account_id>trial/HubSpotCRM/Basic_Companies"
  },
  "description": "API_Portal OpenConnectors"
},

Make sure you right-click on the editor and select Beautify to format the code.

Add the headerWhiteList.

"headerWhiteList": [
"authorization"
],

Go to the folder model and open model.js and replace the code with the following code:

createDataModel: function () {
var oModel = new JSONModel();
var sHeaders = {};
oModel.loadData("/<you_number>trial/HubSpotCRM/<your common Resource template name>", null, true, "GET", null, false, sHeaders);
return oModel;
}

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.

In the Component.js file, paste the following code:

this.setModel(models.createDataModel(),"data");

Paste the following table control XML in to View1.view.xml:

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

Go to the i18n folder and open i18n.properties, change the title of the page as follows:

title = Accounts Data from HubSpot CRM

Save all the changes and run your SAP Fiori app as Web Application

Now the contents of the Open Connectors are visible in the app.