Skip to Content
Technical Articles
Author's profile photo Yogananda Muthaiah

Build Application using Python – SAP UI5 & Deploy to SAP BTP

Dear All,

In this article, you will learn easily to develop a Python flask framework with designing your own SAP UI5 application template which can be tested locally and finally deploy it SAP BTP for users to access.

Prerequisites

  • Python
  • Github Repo to clone
  • Cloud Foundry (CLI v7)

Let’s Get Started

To test locally

templates/index.html

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv='X-UA-Compatible' content='IE=edge'>
		<meta charset="utf-8">

		<title>Sample App created to test</title>
		<style>
			html {height: 15vh;}
		</style>

		<script id='sap-ui-bootstrap'
				src='https://ui5.sap.com/resources/sap-ui-core.js'
				data-sap-ui-theme='sap_fiori_3'
				data-sap-ui-libs='sap.m,sap.f,sap.viz,sap.ui.integration'
				data-sap-ui-xx-bindingSyntax='complex'>
		</script>

		<script id="myXml" type="text/xmldata">
			<mvc:View
					xmlns:mvc="sap.ui.mvc"
					xmlns="sap.f"
					xmlns:m="sap.m"
					height="10%"
					controllerName="myController" >
				<ShellBar
						title="Bundesliga"
						secondTitle="Football Players"
						homeIcon="https://sapui5.hana.ondemand.com/resources/sap/ui/documentation/sdk/images/logo_ui5.png"
						homeIconPressed="onHomeIconPressed"
						avatarPressed="onAvatarPressed"
						showMenuButton="false"
						showCopilot="true"
						showSearch="true"
						showNotifications="true"
						showProductSwitcher="true">
						<profile>
							<Avatar initials="UI"/>
						</profile>
				</ShellBar>				
			</mvc:View>
		</script>

		<script>
			sap.ui.controller("myController", {
				onInit: function() {					
				},
				doSomething: function() {
					alert("Hello World!");
				},
				
				onAvatarPressed: function () {
					alert('Avatar is pressed');
				},
				
				/* 
				 * Issue: Event Callback is not triggered!
				 */
				onHomeIconPressed() {
					alert("home icon pressed!");
				},				
				
				onMenuItemSelected() {
					alert("menu item has been selected!");
				}
			});
			sap.ui.xmlview({ viewContent: jQuery('#myXml').html() }).placeAt("content");
		</script>
	
	<script>
		sap.ui.require([
			"sap/ui/model/json/JSONModel",
			"sap/m/Table",
			"sap/m/Column",
			"sap/m/Text",
			"sap/m/ColumnListItem",
			"sap/m/Page",
			"sap/m/App"
		], function(JSONModel, Table, Column, Text, ColumnListItem, Page, App) {
			// create the data

			// create some dummy JSON data
			var data = {
				names: [
					{firstName: "Sadio", lastName: "Mané"},
					{firstName: "Thomas", lastName: "Mueller"},
					{firstName: "Joshua", lastName: "Kimmich"},
					{firstName: "Leroy", lastName: "Sane"},
					{firstName: "Jamal", lastName: "Musiala"}
				]  
			};

			// create a Model with this data
			var model = new JSONModel();
			model.setData(data);


			// create the UI

			// create a sap.m.Table control
			var table = new Table({
				columns: [
					new Column({header: new Text({text: "Last Name"})}),
					new Column({header: new Text({text: "First Name"})})
				],
				//items: new ColumnListItem()
			});

			// bind the Table items to the data collection
			table.bindItems({
				path : "/names",
				template : new ColumnListItem({
					cells: [
						new Text({text: "{lastName}"}),
						new Text({text: "{firstName}"})
					]
				})
			});

			// set the model to the Table, so it knows which data to use
			table.setModel(model);

			// create the page holding the List
			var page = new Page({title: "FC Bayern Munich Players List",content: table});

			// create a mobile App holding the page and place the App into the HTML document
			var app = new App({pages: [page]}).placeAt("content");});

	</script>


	</head>
	<body id='content' class='sapUiBody'>
	</body>
</html>

app.py

import os

from flask import Flask, render_template, make_response, send_from_directory

app = Flask(__name__)

# Render index.html initially
@app.route('/')
def render_index():
    return render_template('index.html')


port = int(os.getenv("PORT", 0))
if __name__ == '__main__':
    if port != 0:
        app.run(host='0.0.0.0', port=port)
    else:
        app.run(debug=True)

Run the python code and test the application from the browser with localhost:5000

Application is running locally with all the UI5 controls.. we can see the data in table


To Deploy application to SAP BTP via Cloud Foundry

cf login --sso
 cf push <appname>

References

https://ui5.sap.com/#/controls

Assigned Tags

      Be the first to leave a comment
      You must be Logged on to comment or reply to a post.