Create SAP Fiori App with Mysql in SAP Cloud Foundry using (SAP Open connector + SAP API Management) PART IV

[SilasCosta]

Link to Part I

Link to Part II

Link to Part III

At this moment we already have almost everything set to createa our SAP Fiori App using Mysql as datasource. Now we first have to create an Destination to the API Management that we have created in the last post to be used in the Fiori App.

1. Configuring Destination in Neo account

In the API portal copy the url that you have in your API View:

This should be the configurations of your destination; you must set everything and save it.

2. Creating SAPUI5 Example application using data from the table that we want.

To start open the WebIDE and follow the steps:

Open the neo-app.json and paste this code in the file.

,{

"path": "/PACCOUNTTRIAL/MySQL/t_category",

"target": {

"type": "destination",

"name": "API_Portal", "entryPath": "/ PACCOUNTTRIAL /MySQL/t_category"

},

"description": "API_Portal OpenConnectors"

},

Now you have to change the Componet.js, follow bellow how it should look like.

Open your models.js document and let it like this:

In the View.xml document paste this document

<mvc:View controllerName="ns.kkkkkk.controller.View1" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m">

	<Shell id="shell">

		<App id="app">

			<pages>

				<Page id="page" title="SILAS TEST API">

					<content>

						<Table items="{data>/}">

							<columns>

								<Column>

									<Text text="Category_Name"/>

								</Column>

								<Column>

									<Text text="Begin_Date"/>

								</Column>

								<Column>

									<Text text="Control"/>

								</Column>

								<Column>

									<Text text="Id_Category"/>

								</Column>

								<Column>

									<Text text="End_Date"/>

								</Column>

							</columns>

							<items>

								<ColumnListItem>

									<cells>

										<ObjectIdentifier title="{data>Category_Name}"/>

										<Text text="{data>Begin_Date}"/>

										<Text text="{data>Control}"/>

										<Text text="{data>Id_Category}"/>

										<Text text="{data>End_Date}"/>

									</cells>

								</ColumnListItem>

							</items>

						</Table>

					</content>

				</Page>

			</pages>

		</App>

	</Shell>

</mvc:View>

Follow the steps bellow to run the application.

 

The app should look like this and showing the data from the database:

 

Now you can access all the data in the table Category by a secure way from a Mysql Database on Azure without the need to use cloud connectors, external service provider or user provided service.

Hope I have helped with the post, if you want to comment or to add somethins fill free to do it!