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
Subscribe
Login
Please login to comment
0 Comments