Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
yogananda
Product and Topic Expert
Product and Topic Expert

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

Create a file according to the below

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_horizon'
			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://ui5.sap.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:5000Application 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
3 Comments