Google Drive hosting SAPUI5 apps

Technology Blogs by Members

Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!

3,978

SAP Managed Tags:
SAPUI5,
SAP Enterprise Portal

Hi guys.

This is my first post here and I'm going to talk a little bit about how to host a SAPUI5 App on Google Drive and share with everybody.

You don't need neither a domain nor a webserver. You can use Google Drive to publish and to use your UI5 apps.

It's very simple :wink:

1 - Access your Google Drive account

Go to the link https://drive.google.com/

2 - Create a new folder

Click on "CREATE" button.

Click on "Folder" button.

Give a name to your new folder.

Your new folder (SAPUI5 - GoogleDrive) has been created.

4 - Share your folder - Public access

Right-click on your new folder (SAPUI5-GoogleDrive), go to "Share" > "Share".

Your folder is not public, you can see the status: Private - Only you can access.
Click on "Change" to change the access permission.

Choose the option "Public on the web" and save.

Now your folder has public access and it has a hosting link. You can see clicking on Details button.

Everything that you upload to this folder can be accessed using the hosting URL.

5 - Create a SAPUI5 app

Create your new app: index.html

You can use the example below.



<!DOCTYPE html>

<html>

<head>

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<meta charset="UTF-8">

<title>SAPUI5 + Google Drive</title>

<meta name="author" content="Mauricio Lauffer">

</head>

<body class="sapUiBody" role="application">

<div id="content"></div>

<script id="sap-ui-bootstrap"

src="https://sapui5.hana.ondemand.com/sdk/resources/sap-ui-core.js"

data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m">

</script>

<script type="text/javascript">

var oApp = new sap.m.App("myApp");

var oLabel = new sap.m.Label({

text : "Hello World"

});

var oPage = new sap.m.Page("page1", {

title : "SAPUI5 + Google Drive",

content : [ oLabel ]

});

oApp.addPage(oPage);

oApp.placeAt("content");

</script>

</body>

</html>