Published
Edited
Jul 4, 2021
Insert cell
# Sample UI5 App
Insert cell
html`
<!DOCTYPE html>
<html>
<head>
<title>DatePicker</title>
<style>
html, body {
max-height: 500px;
}
</style>
<script
src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js'
id="sap-ui-bootstrap"
data-sap-ui-theme="sap_belize"
data-sap-ui-libs="sap.m"
data-sap-ui-bindingSyntax="complex"
data-sap-ui-compatVersion="edge"
data-sap-ui-preload="async">
</script>

<script id="view1" type="ui5/xmlview">

<mvc:View controllerName="view1.initial" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" xmlns:m="sap.m">
<m:App>
<m:pages>
<m:Page title="{i18n>title}">
<m:VBox>
<m:Label text="Start" required="true"/>
<m:TimePicker value="" valueStateText="test" id="TP1" valueFormat="HH:mm" displayFormat="HH:mm" width="20%" placeholder="Enter time..."/>
<m:Label text="End" required="true"/>
<m:TimePicker value="" valueStateText="test" id="TP2" valueFormat="HH:mm" displayFormat="HH:mm" width="20%" placeholder="Enter time..."/>
<m:Button id="save" text="submit" type="Accept" width="20%" press="saveButton" class="save"/>
</m:VBox>
</m:Page>
</m:pages>
</m:App>
</mvc:View>

</script>
</head>

<body class="sapUiBody">
<div id="uiArea"></div>
</body>
</html>
`
Insert cell
{
sap.ui.controller("view1.initial", {
onInit: function(oEvent) {
}
});
var app = new sap.m.App({});

var oView = sap.ui.xmlview({
viewContent: document.getElementById("view1").getInnerHTML()
});

app.addPage(oView);
app.placeAt("uiArea");
}
Insert cell
import { sap } from "@marianfoo/import-ui5-libraries"

Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more