I got many questions on this topics, so let’s talk about how we can ue UI5 in HANA Cloud Portal.
There are 2 ways to consume UI5 application with HANA Cloud Portal:
Option 1 - HTML viewer that includes html code with UI5 controls
Building UI5 application and use the CDN link for UI5. Then when the application is ready, you can upload it as HTML code that is loaded to the out of the box HTML viewer. Just consume it as written in UI5 documentation (you can get it here: https://sapui5.netweaver.ondemand.com/).
You need to put the following tag in your HTML code -
<script id="sap-ui-bootstrap"
type="text/javascript"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_goldreflection"
data-sap-ui-libs="sap.ui.commons"></script>
The sap-ui-bootstrap ID is used for loading the latest version of the UI5 library from the Cloud Portal servers. To get your own hosted version, just change the script ID to a different one. For more information refer to SAP UI5 page.
Then, if your HTML code is working, do the following:
- In the side-panel menu, click
(Content Catalog). The Content Catalog opens, displaying the available widgets.
- Browse through the Content Catalog to find your content. You can filter the widgets by entering text in the filter field. The results are displayed in the Content Catalog as you type. The filter remains active when you move to a different category in the Content Catalog.
- To add a widget to your site, you can:
- Double-click the widget in the Content Catalog. The widget is added to the bottom of the page. You can then drag the widget to the desired location on the page.
- Drag the widget directly from the Content Catalog to the desired location on the page.
Below, you can find an HTML sample code (form) that was built in UI5 and then I uploaded the html file to simple html viewer widget.
You can see this working in the following site - https://cloudportaltrial.hanatrial.ondemand.com/sample2#page/8beaf248-22e0-401b-9a8e-da694d3d064a
________________________________________________________________________________________________
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Contact Us Form</title>
<style type="text/css">
*{
direction:ltr!important;
}
label.sapMLabel {
display: block;
margin: 0.5em 0 0 0;
}
body{
overflow: hidden;
}
.padding{
padding: 16px;
}
.sapMDialog
{
width:100%;
}
.sapMBtnReject,
.sapMBtnAccept{
background-color: #00AAFF !important;
}
</style>
<script src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js"
type="text/javascript"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal">
</script>
<script type="text/javascript">
//Create UI5 Dialog
var oDialog = new sap.m.Dialog("dialog1", {
title: "Register Now",
stretch: true,
icon: "sap-icon://employee",
contentHeight: "600px",
content: [
new sap.ui.core.HTML({content:"<h3 style='margin:0;padding: 0;'>Save $100 on early registration</h3>"}),
new sap.m.Label({text: "Name"}),
new sap.m.Input({type: sap.m.InputType.Email, placeholder: "Fisrt and last name"}),
new sap.m.Label({text: "Role"}),
new sap.m.Input({type: sap.m.InputType.Email, placeholder: "Description of your role"}),
new sap.m.Label({text: "E-mail address"}),
new sap.m.Input({type: sap.m.InputType.Email, placeholder: "Your e-mail address"}),
new sap.m.Label({text: "Date"}),
new sap.m.Input("startDate" ,{type: sap.m.InputType.Date, dateFormat: "dd.MM.YYYY", width: "150px"}),
new sap.m.Label({text: "Phone Number"}),
new sap.m.Input({type: sap.m.InputType.Email, placeholder: "Your phone number"})
],
leftButton:
new sap.m.Button({
text: "Register",
type: sap.m.ButtonType.Accept,
press : function() {
window.open('mailto:test@example.com');
}
}),
rightButton:
new sap.m.Button({
text: "Cancel",
type: sap.m.ButtonType.Reject,
press : function() {
oDialog.close();
}
}),
initialFocus: "startDate"
});
//Place the dialod in the html Div
oDialog.placeAt("oDialog");
</script>
</head>
<body id="body" class="sapUiBody">
<div id="oDialog"></div>
</body>
</html>
______________________________________________________________________________________________
Option 2 - OpenSocial widget with UI5 controls
Develop an open social widget that uses UI5. HANA Cloud Portal provides an API to use UI5 libraries.
The following section is taken from the dev Guide that was recently published:
"In order to easily adapt an existing UI5 application into an OpenSocial widget, you need to do the following:
- Create a spec XML file and set the url property to the UI5 application. You should create the spec XML file in the same folder as the HTML page of the UI5 application.
- Add the sap-xhrwrapper feature to the spec XML:
- <Require feature="sap-xhrwrapper" />
This feature enables loading of UI5 modules and any relative application resource and performing oData AJAX calls. This feature will ‘proxify’ all AJAX requests using Cloud Portal proxy.
Note: Deprecated SAP-UI5 feature. There is another option for loading the UI5 library by requiring the sap-ui5 feature in the spec XML. This feature is deprecated and should not be used anymore. In addition, this feature does not enable usage of new capabilities provided by the Cloud Portal framework."
Don't forget to deploy your application on HANA Cloud platform and then to add the spec XML as openSocial widget to the content tab. Read more - https://help.prod.jpaas.sapbydesign.com/cloud_portal/frameset.htm?6db70e3590c749c7a4346cbc63a2780a.h...
You are welcome to contact me for any related question - inbal.sabag@sap.com
HANA Cloud Portal rocks,
Inbal
- SAP Managed Tags:
