Skip to Content
Author's profile photo Rui Nogueira

Lightweight HTML5 apps and Git on SAP HANA Cloud Platform

Screen Shot 2014-05-07 at 11.50.53 PM.pngWith today’s update on the trial landscape we have an option to deploy lightweight HTML5 apps on the SAP HANA Cloud Platform. Under the tabs for HANA XS Applications and Java Applications you see now an additional tab called HTML5 Applications.

I’d like to show you in a short video how you can leverage this functionality to create a small sample SAPUI5 app which connects to a public weather API. It’s not intended to be used in productive environments, but rather helps you understand the concepts with a useful application.

While watching the video you can follow all the steps I’ve described below.

But first I’ll explain what this sample app is about I’m using to show you the functionality of the HTML5 Applications on SAP HANA Cloud Platform.

The code for the app

You can find the code for this small app in the listing below for the file index.html. The code for the SAPUI5 app consumes the API of openweathermap to get the current weather of a city. In this case you’ll get the current weather in Lisbon and the city of Neustadt an der Weinstrasse which is defined in row 81 and 85 of this app.

The access to the API is not done. Instead we are using the path /openweathermap (also in line 81 and 85) which is mapped to a destination called openweather. The mapping between the path and the destination is done in a file called neo-app.json.

The neo-app.json file

The neo-app.json file needs to be deployed in the same folder as the index.html file. It creates the connection between the path we want to use to access the API (/openweathermap) and the destination configuration we have to configure in the Destinations panel of your trial account on SAP HANA Cloud Platform Cockpit.

With this file you tell the dispatcher for the HTML5 apps to re-direct all calls on /openweathermap to the destination openweather.

The destination configuration for openweathermap

The destination describes now where the resource is that the application is looking for. The name of the destination needs to map to the name defined in the neo-app.json file above. So in our case it’s openweather. You can find the file content in the listing at the end of this blog post called openweather.txt.
Later on you simply import it as destination in the Destinations panel on your account.

How to deploy the app on SAP HANA Cloud Platform

Creating the HTML5 app in the cockpit

Accessing the Git repo and pushing all files to Git

  • Start Eclipse and switch to the Git perspective
  • Click on “Clone a Git Repository
  • Paste the Git-URL you’ve copied from your cockpit into the URI field of the popped-up window, provide your user name and password of your SAP HANA Cloud Platform trial account into the fields User and Password, click on Next, click on Next again and click on Finish.
  • Now right click on the Git repository and select the command Import Projects
  • Select Import as general project, click on Next and after that on Finish
  • Switch to the Web perspective in Eclipse
  • Create a file called index.html and copy and paste the code from the listing below for the index.html file into that file and save it
  • Do the same for the file neo-app.json. You get the source for that file from the listing below for the neo-app.json file
  • Right-click on your Eclipse project and select Team and Commit
  • Provide your credentials
  • Provide a short commit message and select both files in the box below so that are selected
  • Click on Commit
  • Right-click on your Eclipse project and select Team and Push to Upstream
  • Provide your credentials
  • Click on OK

Creating the destination and deploying the app

  • Now switch back to your cockpit for your trial account on SAP HANA Cloud Platform
  • Select your HTML5 app
  • Click on the tab Development
  • You’ll notice that there is a new commit listed up with the comment you’ve provided before
  • Now create the destination
    • Switch to account level on your cockpit and click on the Destinations tab
    • Click on New Destination
    • Click on Import from File and import the destination as a file with the content of the listing below for the file openweather.txt
    • Save it
  • Click on the tab HTML5 Applications
  • Click on the name of the your app
  • Click on the Development tag
  • Click on the link of the commit message
  • Your app shows up now and should show you the current weather in Walldorf
  • This link is only accessible to you as a developer

Provide others access to your app

If you want to make your app externally accessible you need to create a version of your code, activate it and start your app. This is what you’d have to do:

  • In the list of available commits select the commit that you want and click on the “Create Version” icon at the right end of the line
  • Provide a version name like 0.1 and click on Add
  • Now switch to the tab Version Management
  • You should see the version you’ve just created before
  • Now click on the icon at the right end of the line to Activate this application version
  • You get a message telling you that the version has been activated and that the Changes will be effective after (re)-start of the application. Confirm the question if you really want to do this with by clicking on Yes.
  • Switch to the HTML5 Application Dashboard and click on the Application Url
  • This is the URL under which others can now access your app

In the video you can see a few more things that you can do with HTML5 apps on SAP HANA Cloud Platform as the easy versioning of commits as well as the activation of the different versions of your HTML5 app.

/wp-content/uploads/2014/05/screenshot1_566692.png

Let the party begin

So now that this is working why not adding an additional tile which retrieves information from another source? Add another “route” to the neo-app.json file and an corresponding additional destination. Share your ideas on SCN.

Hope you enjoy using it.

Code for file index.html

<!DOCTYPE HTML>

<html>

<head>

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

<title>Lightweight HTML5 apps and Git on SAP HANA Cloud Platform</title>

<script src=”/sapui5/sap-ui-core.js”

    type=”text/javascript” id=”sap-ui-bootstrap”

    data-sap-ui-libs=”sap.ui.commons, sap.suite.ui.commons, sap.m”

    data-sap-ui-theme=”sap_bluecrystal”>

</script>

<script type=”text/javascript”>

    // #####################################

    // Model – Start

    // #####################################

    var getModelFromURL = function(url) {

        var url = url;

        var oModel = new sap.ui.model.json.JSONModel();

        oModel.loadData(url, null, false);

        return oModel;

    };

    // Model – End

    // #####################################

    // Views – Start

    // #####################################

    // builds the main page

    var buildMainPage = function(id, title, content) {

        var page = new sap.m.Page(id, {

            title : title,

            showNavButton : false,

            content : content

        });

        return page;

    };

    // builds the weather tile

    var buildWeatherTile = function(id, oModel) {

        var tile = new sap.m.StandardTile(id, {

            numberUnit : “Celsius”,

            infoState : “Success”,

            press : function() {

                var link = “http://openweathermap.org/city/” + oModel.oData.id;

                window.open(link, “_blank”);

            },

            tap : function() {

                var link = “http://openweathermap.org/city/” + oModel.oData.id;

                window.open(link, “_blank”);

            }

        });

        // Bind weather icon

        tile.bindProperty(“icon”, “/weather/0/icon”, function(bValue) {

            return “http://openweathermap.org/img/w/” + bValue + “.png”;

        });

        tile.setModel(oModel);

        // Bind name of city to the tile title

        tile.bindProperty(“title”, “/name”, function(bValue) {

            var longTitle = “Current weather in ” + bValue;

            return longTitle;

        });

        // Bind weather details to info field of tile

        tile.bindProperty(“info”, “/weather/0/description”);

        // Bind temperature to the number field of the tile

        tile.bindProperty(“number”, “/main/temp”, function(bValue) {

            // We want Celsius

            var degreesCelsius = Math.round(bValue – 273.15);

            // Also add the Celsius sign to the temperature value

            //Switch to Fahrenheit

            //var degreesFahrenheit = Math.round(((bValue – 273.15) * 9/5) + 32);

            //return degreesFahrenheit + “\u00b0”;

            return degreesCelsius + “\u00b0”;

        });

        return tile;

    };

    // Views – End

    // #####################################

    // Main SAPUI5 application – Start

    // #####################################

    var idPageMain = “main”;

    var app = new sap.m.App(“myApp”, {

        initialPage : idPageMain

    }); // page1 should be displayed first

    // Create a tile for the current weather in Lisbon

    var oModelWeatherCity1 = getModelFromURL(“/openweathermap?q=:Lisbon”);

    var weatherTileCity1 = buildWeatherTile(“myWeatherTileCity1”, oModelWeatherCity1);

    // Create another tile for the current weather in another city

    var oModelWeatherOther = getModelFromURL(“/openweathermap?q=Neustadt an der Weinstrasse”);

    var weatherTileOther = buildWeatherTile(“myWeatherTileOther”, oModelWeatherOther);

    // Now create the page and place it into the HTML document

    var mainPage = buildMainPage(idPageMain, “Lightweight HTML5 apps and Git on SAP HANA Cloud Platform”, [weatherTileCity1,weatherTileOther ]);

    app.addPage(mainPage);

    app.placeAt(“content”);

    // Main SAPUI5 application – End

    // #####################################

</script>

</head>

<body class=”sapUiBody”>

    <div id=”content”></div>

</body>

</html>

Code for file neo-app.json

{

      “authenticationMethod”: “none”,

    “routes”: [

        {

            “path”: “/openweathermap“,

            “target”:

            {

                “type”: “destination”,

                “name”: “openweather

            },

            “description”: “OpenWeather System”

        },

        {

                “path”: “/sapui5”,

                “target”: {

                                “type”: “service”,

                                “name”: “sapui5”,

                                “entryPath”:”/resources”

                },

                “description”: “SAPUI5”

        }

    ]

}

Code for the destination file openweather.txt

Name=openweather

URL=http\://api.openweathermap.org/data/2.5/weather

ProxyType=Internet

Type=HTTP

CloudConnectorVersion=1

Authentication=NoAuthentication

UPDATES

June 10th, 2014

You might want to check the blog post from Ankur Kumar around ESPM Webshop on light weight HTML5 applications. Good read and goes far beyond my simple example in this blog post.

Jul 9th, 2014

Based on the feedback of a colleague today (thanks Tobias!) I’ve cleaned-up the code in the index.html a bit and also provided some pattern you can use to create additional weather tiles.

Best,

Rui

Assigned Tags

      107 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Chris Paine
      Chris Paine

      Thanks for sharing Rui.

       

      I hope this is the first step to doing real app deploys via git/maven. Would be so much more efficient (not to mention faster) for HCP to do maven build of application from a git url.

       

      Any which way, it's cool!

       

      What will be the limit on number of HTML5 applications that can be deployed on a trial account?

       

      Cheers,

      Chris

      Author's profile photo Rui Nogueira
      Rui Nogueira
      Blog Post Author

      Thx Chris. Not sure about the limitations, but I'll ask the colleagues to jump-in here.

       

      Rui

      Author's profile photo Stefan Lay
      Stefan Lay

      The limitations are:

      - max 100 MB per trial account (summing up all repositories)

      - max file size 20MB (to avoid performance issues with large files)

       

      The number of repositories is unlimited.

      Note that currently deletion of git repositories is not yet possible.

       

      Stefan

      Author's profile photo DJ Adams
      DJ Adams

      Great stuff Rui, really nice and clear (btw did you realise the YouTube video still has status "unlisted"?)

       

      This is the perfect storm of tech (at least for me) - hosting, UI5, git and proxying. Thanks to the SAPHCP team!    

      Author's profile photo Rui Nogueira
      Rui Nogueira
      Blog Post Author

      Thanks DJ for the hint. I wasn't sure whether the audio was good enough, so I could substitute the video in my blog post with a new video with improved audio.

       

      Rui

      Author's profile photo Rui Nogueira
      Rui Nogueira
      Blog Post Author

      I've just fixed the sound issue and uploaded a new version of the video which is listed now as "public" on youtube.

      Rui

      Author's profile photo Robin van het Hof
      Robin van het Hof

      This is so utterly cool, I may want to kiss you and the HCP team!

       

      Like Chris, I hope this is a step forward to (full?) Git/Maven integration, and seeing this I am quite hopeful it will eventually happen!

       

      Keep up the good work and progress!

      Author's profile photo Rui Nogueira
      Rui Nogueira
      Blog Post Author

      Bedankt Robin! 🙂

      Author's profile photo Matthias Sohn
      Matthias Sohn

      On Mac (and other flavors of Unix) you should set core.filemode=true

      or leave out this setting since true is the default [1]. Also git is auto-detecting

      this parameter when you are cloning or initializing a repository.

       

      [1] https://www.kernel.org/pub/software/scm/git/docs/git-config.html

      Author's profile photo Richard Hirsch
      Richard Hirsch

      Pretty cool.

       

      Are there plans to use git for other programming languages as well?

       

      Are there size limits regarding the amount of code that I can store in my git repositories?

       

      D.

      Author's profile photo Rui Nogueira
      Rui Nogueira
      Blog Post Author

      Thx Dick! Not sure about the limitations on the Trial landscape. I've asked the colleagues from the development team to add a comment to your question.

       

      Best,

      Rui

      Author's profile photo Matthias Sohn
      Matthias Sohn

      For trial accounts the quota is max 100 MB storage in total for all repositories owned by a trial account.

      Author's profile photo Stefan Lay
      Stefan Lay

      The limitations are:

      - max 100 MB per trial account (summing up all repositories)

      - max file size 20MB (to avoid performance issues with large files)

       

      The number of repositories is unlimited.

      Note that currently deletion of git repositories is not yet possible.

       

      Stefan

      Author's profile photo Former Member
      Former Member

      Thanks, Rui. Nice blog. Excellent to see HTML5 and Git integration working well.

      Author's profile photo Sascha Scholz
      Sascha Scholz

      Thanks for putting this together, Rui! Nice video and blog!

       

      Sascha

      Author's profile photo Rui Nogueira
      Rui Nogueira
      Blog Post Author

      Much bigger thanks are going to the team that put this great enhancement on SAP HANA Cloud Platform!

      So thx Martin Hermes, Matthias Sohn, Stefan Lay, Sascha Scholz and all the others to provide this on our great platform. I love it!

       

      WIll also show more details in the new openSAP course 'Next steps in SAP HANA Cloud Platform'

       

      Rui

      Author's profile photo Renald Wittwer
      Renald Wittwer

      Hi Rui,

       

      great stuff! Thanks for sharing this.

       

      Best regards

      Renald

      Author's profile photo Rui Nogueira
      Rui Nogueira
      Blog Post Author

      You are welcome. Although I'm pretty busy with the recordings for the new openSAP courses I HAD to write this blog. I really, really like this new feature.

       

      Rui

      Author's profile photo Gunnlaugur Th Einarsson
      Gunnlaugur Th Einarsson

      Great feature!

       

      Allthough I've imported the destination file I can't get the destination in html5applicon/development to be available.

       

      Any ideas.

       

      Regards, Gulli

      Author's profile photo Jason Scott
      Jason Scott

      Same here.... The destination shows a red square saying: "Required destination is not available. Deploy the required destination to use the application"... There is no "deploy" button or link anywhere for destinations though and I added the neo-app.json file as explained...??

      Author's profile photo Sascha Scholz
      Sascha Scholz

      To "deploy" the destination, navigate back to the account level (by clicking on the account name in the Focus Object area on the left side), then navigate to Destinations.

      Author's profile photo Jason Scott
      Jason Scott

      Hi Sascha, I have done that a few times but when you see the destinations window there is no button or capability to "deploy" the destination. I only have edit, clone, export (to file) and delete with the saphcp trial.

      Author's profile photo Sascha Scholz
      Sascha Scholz

      Hm, it should be there. Could you please try to follow the steps Rui shows in his video starting at around 8:50?

      Author's profile photo Jason Scott
      Jason Scott

      Have followed both the video and written instructions. Have deleted and re-created the destination twice.

      Have also done this on two diff computers (windows/mac).

       

      There is absolutely, positively no button or link to "deploy" a destination.

      Author's profile photo Jason Scott
      Jason Scott

      Just cloned the repo again and checked - the json file is exactly the same as the copy attached to this blog; so its definitely there. I don't see any "deployment" step in Rui's video either....   ;-(

      Author's profile photo Jason Scott
      Jason Scott

      fyi. The fix mentioned by Vasil further below in the comment stream has sorted this issue.  😉

      Author's profile photo Rui Nogueira
      Rui Nogueira
      Blog Post Author

      We are checking the issue and will get back to you soon.

      Sorry for the trouble.

       

      Rui

      Author's profile photo Former Member
      Former Member

      Hi Rui,

      The issue is with the Destination Editor and affects just some old accounts. We are already providing a hotfix for it and I'll notify you here when it is available on Trial.

      Regards,

      Vasil

      Author's profile photo Jason Scott
      Jason Scott

      Thanks for letting us know... There have been a number of issues over time that have only effected your "old" accounts.. Why is that? Us "old" account holders are your best evangelists of the platform!

      Author's profile photo Former Member
      Former Member

      The fix is available now, so all should be fine.

      Regards,

      Vasil

      Author's profile photo Jason Scott
      Jason Scott

      Thanks Vasil, the fix deleted the existing destination but upon recreating it, all is good. Thanks for sorting it out so quick!

      Author's profile photo Dibyajyoti Nanda
      Dibyajyoti Nanda

      Hi Rui,

      Thanks for a excellent blog .

      we have developed one Odata service  which is available in company network .

      we have exposed that service to internet through web dispatcher.

      we have both http and https url for this .

      we are consuming the service through https url in an SAPUI5 application deployed in Hana Cloud Developer Trial instance .

      we are getting cross origin error fro this.

      how ever we have developed one servlet to avoid the cross origin error .

      but while we are trying to call the https url through the servlet we are getting an error

      Target not allowed

      please help us with the issue .

      as well as please let us know ,is there any otherway we can avoid the cross origin error .

      Tanks&Regards

      Dibyajyoti Nanda

      Author's profile photo Rui Nogueira
      Rui Nogueira
      Blog Post Author

      Hi Dibyajyoti, have you added the destination to your Destinations panel of that SAP HANA Cloud Platform account and created the correct routing in the neo-app.json file as I described and showed in the video inside this blog? That should do the trick.

      Best,

      Rui

      Author's profile photo Dibyajyoti Nanda
      Dibyajyoti Nanda

      Hi Rui,

      Thanks for your suggestion.

      I have tried all the steps as per your suggestion.

      but I am getting below error.

      Error message: Target service not allowed

      FYI....

      Below is the url i am calling from my code

      var localservice = new sap.ui.model.json.JSONModel(); 

        $.ajax({

              url: "/myservice/ServiceOrderCollection/?$format=json /",

           contentType: 'application/json; charset=utf-8',

           type: 'GET',

           dataType: 'jsonp',

           error: function (xhr, status) {

        alert(status);

           },

           success: function (result) {

        console.log(result);

        localservice.setData(result);

           }

        });

      json file

      -----------

      {

          "routes": [

              {

                      "path": "/myservice",

                      "target": {

                                      "type": "destination",

                                      "name": "ZSERVICEDEST"

                      },

                      "description": "OpenWeather System"

              }

          ]

      }

      I have activated basic authentication for this destination .

      we are trying to replicate below url in which we are getting the data

      the bold section is the configured  destination url

      http://mydomain.com:447/sap/opu/odata/sap/ZSERVICEMANAGER/ServiceOrderCollection/?$format=json /

      please suggest

      Thanks&Regards

      Dibyajyoti Nanda

      Author's profile photo Former Member
      Former Member

      HI Dibyajyoti,

      if you are using https try adding the property TrustAll=TRUE to your destination.

      Best Regards,

      Martin

      Author's profile photo Dibyajyoti Nanda
      Dibyajyoti Nanda

      Hi Martin,

      Thanks for your input.

      I have tried by adding the property as per your suggestion on https url .

      I am getting status code

      1. Status Code:403 Forbidden error
      2. FYI we don't have cloud connector installed on our premises
      3. we are using web dispatcher to expose our services to internet

      4. but while creating destination i have selected

      ▼ == 

      = 1

      and authentication type =basic authentication

      along with username and password

      so please clarify, Is cloud connector is compulsory to consume url in cloud ?

      please let me know if I am missing any other steps in this development process.

      Thanks & Regards

      Dibyajyoti Nanda

      Author's profile photo Former Member
      Former Member

      Hi Dibyajyoti,

      If you get a 403 now I would expect that this is send by your backend or web dispatcher, isn't it? Can you test your service URL directly with a REST client and basic auhentication using the credentials you have provided in your destination?

      Best Regards,

      Martin

      Author's profile photo Dibyajyoti Nanda
      Dibyajyoti Nanda

      Hi Martin,

      thanks for your input.

      I am able to get data in rest client by using the https url and basic authentication .

      Thanks&Regards

      Dibyajyoti Nanda

      Author's profile photo Former Member
      Former Member

      o.k. Did you also check the log files in the web dispatcher?

      Author's profile photo Dibyajyoti Nanda
      Dibyajyoti Nanda

      HI Martin,

      thanks again for your response.

      we have checked the dispatcher the request generated from our project is not reaching to web dispatcher .but from rest client it is reaching .


      here i am attaching one error screenshot FYR

      i think the cloud server it self blocking the request.

      please let me know your suggestion on this  ./wp-content/uploads/2014/05/error3_455222.jpg Thanks & Regards

      Dibyajyoti Nanda

      Author's profile photo Former Member
      Former Member

      Hi Dibyajyoti,

      could you please switch on the traces (link) for your application for package org.apache.http.* to ALL and rerun the test?

      Please download and attach the log file afterwards for analysis.

      Thanks, Timo

      Author's profile photo Former Member
      Former Member

      Hi Dibyajyoti,

      could you please add the externally accessible url to this discussion? I like to make a test on my side to access the URL.

      Thanks, Timo

      Author's profile photo Ross HIghtower
      Ross HIghtower

      Did you ever resolve this issue? I'm having the same problem.

      Ross

      Author's profile photo Former Member
      Former Member

      Hi Rui,

                 Thanks for great blog.

                 This is my first effort on developing one HTML 5 app on HANA cloud platform.


                 however I got stuck on eclipse ->windows->preferences->git window .


                 I am using windows 64 bit machine.

                 I am putting my SAP I number and SAP machine password.When clicking next it gives an

                 error message.


                 It says Possible Reasons

                       1. Incorrect URL

                        2. No network connection

                        3. .git is missing

                        4. ssl host could not be verified...


                 Can you help me with that please ??





      Thanks


      With Regards

      Adesh

        

      Author's profile photo Matthias Sohn
      Matthias Sohn

      Maybe you are behind a proxy, then you need to configure the proxy in Eclipse preferences click "Window > Preferences" and enter proxy settings under "General > Network Connections" for the https schema. See [1] for details.

      [1] Help - Eclipse Platform

      Author's profile photo Stefan Lay
      Stefan Lay

      Hi Adesh,

      I think you need to provide your scn password, not your SAP password.

      Stefan

      Author's profile photo Former Member
      Former Member

      Thanks Stefen,

      Yes you are absolutely correct , I have given SCN password and then I am able to connect with hana cloud instance as well as with GIT repository.

      Thanks

      With Regards

      Adesh

      Author's profile photo Former Member
      Former Member

      Great stuff!

      Git integration sounds really good, easy to use and it represents a really good choice.

      Thanks for sharing.

      Mirco

      Author's profile photo Rui Nogueira
      Rui Nogueira
      Blog Post Author

      You are very welcome Mirco.

      Best,

      Rui

      Author's profile photo Hemendra Sabharwal
      Hemendra Sabharwal

      Thanks Rui,

      I am great fan of you. This is great blog and helped me a lot.

      Thanks,

      Warm Regards

      Hemendra

      Author's profile photo Rui Nogueira
      Rui Nogueira
      Blog Post Author

      Happy that you find this useful. I was pretty busy with the recordings for the upcoming openSAP course, but when the HTML5 Apps functionality went live on the trial landscape I simply HAD TO write this blog so that others could also use it right away.

      Best,

      Rui

      Author's profile photo Matthias Roebig-Landau
      Matthias Roebig-Landau

      Great!

      Excellent entry into the workfield 🙂

      Thanks and regards Matthias

      Author's profile photo Krishna Kishor Kammaje
      Krishna Kishor Kammaje

      Wow. Rui. You explained it so simple and to the point. I have a question.  Thanks a lot.

      - If I have to develop a UI5 application, and deploy it through SMP, is this the same way you do it?

      - Why do you call it a lightweight? Is there any alternative approach for heavyweight?

      Author's profile photo Robert Wetzold
      Robert Wetzold

      Yes, the heavyweight way before HTML5 was to wrap your HTML5 sources into a WAR archive and deploy it on a Java VM in the HANA Cloud Platform, take care of scaling yourself, implement proxying yourself etc.

      Author's profile photo Vladislav Iliev
      Vladislav Iliev

      Good tutorial, I went through it without any issues.

      I like the check for missing destination and corresponding notification via the red box.

      Wouldn't be useful if there is a direct link to the destination editor?

      Author's profile photo Former Member
      Former Member

      Hi Vlasislav,

      Absolutely! That's already on our list. Thanks for the feedback.

      Best Regards,

      Martin

      Author's profile photo Gregor Wolf
      Gregor Wolf

      Dear Rui,

      do you know if HTML5 apps support also connections via the SAP Cloud Connector to a on premise system on the HCP trial accounts? I have the connector running and successfully made a connection via a Java application. XS applicaitons unfortunately don't support it on the trial landscape: Connecting for XS app to an OnPremise service. I get the error message:

      Cannot open tunnel with id account:///sXXXXXXXXtrial

      In the Cockpit the Required Destinations for my HTML5 app show all green lights.

      Best regards

      Gregor

      Author's profile photo Markus Tolksdorf
      Markus Tolksdorf

      Hi Gregor,

      you can access On-Premise systems via the SAP HANA Cloud connector from HTML5 applications. If it doesn't work for you, there is obviously some erroreunous situation, that needs to be investigated.

      Best regards,

      Markus

      Author's profile photo Rolf Hoven
      Rolf Hoven

      I'm trying to add an extra tile , by calling the getWeatherTile function, but I only get an exact copy of my "Walldorf tile"...  😕

      Anybody that can give me a hint ?

      Author's profile photo Former Member
      Former Member

      Hi Rolf,

      If you call the method twice, you will just overwrite the model with the data from the second call. As both tiles are bound to the same model they display the same data. So you have to separate the data in the model for each city and bind the tiles to the corresponding entries in the model.

      Best Regards,

      Martin

      Author's profile photo Rolf Hoven
      Rolf Hoven

      Thanks Martin,

      What's the easiest way of doing that ?

      Sending in the model as a parameter ?  - Where are you DJ ?  😉

      Author's profile photo Former Member
      Former Member

      Hi Rolf

      Just bind the model to the tile. So remove the line

      sap.ui.getCore().setModel(oModelWeather);

      and add th line

      tile.setModel(oModelWeather);

      after the tile has been created

      Good luck 🙂

      Author's profile photo Rolf Hoven
      Rolf Hoven

      I guess you are all interesting in weather forecast for Mandal, Stord and Kristiansand ? 😉

      /wp-content/uploads/2014/06/weather_467514.png

      Author's profile photo Robert Wetzold
      Robert Wetzold

      Interesting fact of the day: Today SAP announced its new SAP River Rapid Development Environment. Have you tried it out yet and payed attention to the URL? It will look something like this:

      https://rde-somenametrial.dispatcher.hanatrial.ondemand.com/


      It is actually an HTML5 application running on the new HTML5 infrastructure served from a GIT repository on HANA Cloud Platform 🙂

      SAP Web IDE - Overview

      Author's profile photo Former Member
      Former Member

      Hi Experts,

      I have follow the step that mentioned under this blog.

      When i Commit the into the Git its gives the "Not Authorization error"

      "https://git.hanatrial.ondemand.com/xxxxxxxxxxxtrial/myapp1312: not authorized"

      Please suggest me how to remove this error.

      How i can get the access of Git Repository login details from SAP?  

      Many Thanks,

      Mithun

      Author's profile photo Stefan Lay
      Stefan Lay

      Hi Mithun,

      you need to provide your SCN username and password when you push to the git repository. If you select the check box "Store in Secure Store" you do not need to enter your credentials anymore when you push again.

      Best Regards,

      Stefan

      Author's profile photo Matthias Sohn
      Matthias Sohn

      Use your SCN user for accessing the git server.

      Commit is a local operation creating a new version in your local clone of the repository which resides in your private workspace and does not require authentication to the central git server at https://git.hanatrial.ondemand.com.

      Can you please provide detailed steps to reproduce ?

      Author's profile photo Ranju Gupta
      Ranju Gupta

      hi Rui, very nice blog...Thanks for sharing...

      Kind Regards

      Ranju

      Author's profile photo Rui Nogueira
      Rui Nogueira
      Blog Post Author

      Thanks Ranju!

      Did you also already see this blog post here:

      ESPM Webshop on light weight HTML5 applications

      Very nice, too.

      We'll be able to show a lot of new and cool stuff at d-code this year 🙂

      Best,

      Rui

      Author's profile photo Ranju Gupta
      Ranju Gupta

      Hello Rui, oh it is already out 🙂   thanks...

      we also have SHINE light weight UI5 application now, which we plan to release via GITHUB soon...

      yes of course looking forward to D-code 🙂

      Author's profile photo Former Member
      Former Member

      Hi Rui,

      thanks for the great tutorial.

      Is it also possible to use the openweather destination in a common xs application, deployed to the cloud (without using the HTML5 Applications feature)? I created a xs project in HANA studio, added your index and neo-app files and configured the destination, but opening the app in a browser results in a 404 error for https://xs<accountid>.hana.ondemand.com/openweathermap?q=walldorf... . Any suggestions?

      Thank you and best regards,

      Fabian

      Author's profile photo Chris Xu
      Chris Xu

      I also had 404 issue when I tried to deploy a SAPUI5 to a on-premise HAHA server. It seems that the neo-app.json not work.

      Any idea on this?

      Thanks!

      Author's profile photo Former Member
      Former Member

      Hi Fabian, Xu,

      this HTML5 infrastructure  is only available on the Hana Cloud Platform, not on Hana XS

      Best Regards,

      Martin

      Author's profile photo Former Member
      Former Member

      thanks ! brilliant work

      Author's profile photo Former Member
      Former Member

      Hello Rui, I found this article nice and easy, steps are very convenient as i have some experience in setting up the system ready like installing eclipse, installing sap cloud etc software, creating trial instance etc,

      This is a first Html5 application i created through the sap hana cloud platform.

      I recommend this article which explains all the required steps to configure setup and keep running your first free html5 cloud application.

      I felt that i may not go through git perspective very easily but remembering the personal passwords makes lot of sense.(i made it well because i carefully followed this article)

      For freshers working here also look into the SHINE or some sap hana examples from the eclipse right click in explorer import->sap hana content-> sample applications.

      my html5 cloud application is here below

      Lightweight HTML5 apps and Git on SAP HANA Cloud Platform

      Thanks

      Prashanth.

      Author's profile photo Former Member
      Former Member

      Hi,

      The GIT URL for any apps looks to be down. What can be done?

      https://git.hanatrial.ondemand.com/i070514trial/ssuiteapps

      --

      Regards,

      Vinay

      Author's profile photo Stefan Lay
      Stefan Lay

      Hi Vinay,

      this URL is not meant to be used in the browser, it can only be used for accessing it with a git client. Please try to clone your repository using this URL.

      Best Regards,

      Stefan

      Author's profile photo Former Member
      Former Member

      Hi Rui,

      Very nicely explained and very clear steps.

      Thanks much.

      Farooq

      Author's profile photo Former Member
      Former Member

      ...great blog!

      Even with an trial account I cannot add/edit a destination after I pushed the app.

      (You can also inspect my account for analysis - D063255)

      Kind regards,

      Daniel

      Author's profile photo Daniel Koller
      Daniel Koller

      ...already solved: I could enter/upload the destination via the cockpit top level ...after that the destination get valid (=green) and the API showed the right information from the API.

      Author's profile photo Sunil Kumar Maurya
      Sunil Kumar Maurya

      Hi Rui,

      Thanks for the blog, I am learning SAPUI5 and other HANA development technology.

      things are bit new for me.

      I want to understand use of this file I mean how it is working execution time. "neo-app.json".

      I wrote an SAPUI5 program to consume Odata service, which is hosted in company network, there cloud connector is already installed, I can consume odata service with original url.( it require to disable the chrome web security). but using Cloud connector now I want to consume same virtual URL in our program so that we dont need to disable chrome web security.

      Thanks

      Sunil

      Author's profile photo Gregor Wolf
      Gregor Wolf

      Dear Sunil,

      you can check out HTML5 app and SAP HANA Cloud Connector: Cannot open tunnel with id where I have included a sample neo-app.json with screenshots for my Destination Settings.

      Best regards

      Gregor

      Author's profile photo Sunil Kumar Maurya
      Sunil Kumar Maurya

      Thanks Gregor,

      I check that link and I guess you have developed your app in HTML5 with git repository.

      I just want to learn two things

      1. What is this nea-app.json file, and how it work in HTML5 application with git project.

      2. How can I do the same thing/make a connection with cloud connector with simple SAPUI5 application, which I will deploy in HANA account (this is not trial account).

      like I said I can consume odata service with original url, however there is some browser security need to set to work with,  but now how to use cloud connector setting I mean virtual URL to consume odata service in application, so that we dont have to remove browser web security.

      Regards

      Sunil Maurya

      Author's profile photo Former Member
      Former Member

      Great Blog i've implemented the app and modified it to show my current city weather, Amazing stuff !!! Thanks Rui 🙂

      Author's profile photo Former Member
      Former Member

      Great Blog I did implement for the local weather and city of our corporate headquarters and it worked like a charm. There are few changes to the cloud plaftform cockpit what referenced in the article but it is not that hard to figure out. Thank you. 🙂

      Author's profile photo Rui Nogueira
      Rui Nogueira
      Blog Post Author

      Thanks Thareesh. Happy this blog post helped you to get started on HTML5 apps on SAP HANA Cloud Platform

      Best,

      Rui

      Author's profile photo sridevi garapati
      sridevi garapati

      Hi,

      Thanks for a great blog.

      By following your blog we created application and deployed in Hana cloud Platform.

      Can you please explain how to subscibe HTML5 application in Hana cloud Platform.

      We have a partner account. We created a consumer account and we can subscribe Java applications using Console Client. When we are doing same thing with HTML5 applications we are  getting Path not found Error.

      Any Idea on this?

      Regards

      Sridevi

      Author's profile photo Rui Nogueira
      Rui Nogueira
      Blog Post Author

      Hi Sridevi, I think you've posted a similar question in the SCN Forum already (Not able to subscribe HTML5/SAPUI5 app in Hana cloud Platform).

      And my colleague Martin answered that "as of today there are no APIs to create your own subscription candidates for HTML5 applications on HCP."

      Best,

      Rui

      Author's profile photo sridevi garapati
      sridevi garapati

      Hi Rui Nogueira,

      Thanks for your reply.

      Using Hana cloud Platform we can create both Java and HTML5 applications. Like that we thought there is also a way to subscribe HTML5 applications for Partner account like Java applications.



      Regards

      Sridevi

      Author's profile photo raghavendra nookala
      raghavendra nookala

      Hi Rui,

      I had a problem to consume the gwaas services in sap ui5 applications


      Denise Nepraunig has suggested Matthias Schmalz for this problem but Matthias also do not have the idea.


      below is the url for my post


      Re: How to consume gaas(HCI OData Provisioning)  services in Web IDE

      please help out to solve this.



      Regards,

      Raghu Nookala

      Author's profile photo Denise Nepraunig
      Denise Nepraunig

      I suggeste Matthias Steiner --> Matthias Steiner's Profile | SCN and not Schmalz.

      Author's profile photo Former Member
      Former Member

      Hello Rui,

      Thanks for the blog (and also for the openSAP courses!) I am now trying to deploy my HTML5 applications.

      I used WebIDE to develop and deploy my app. My app works fine after the first deployment. Later, I found out I needed to modify my XML view. I opened the view and modified it using WebIDE. Then, I deploy the changes into a new version (say version 2).

      Now I have problem. When I run the active version (version 2) from HCP, HCP is showing me contents from version 1. It appears changes done in version 2 never went into HCP.

      Now, I went back to WebIDE and run a test as web application directly from within WebIDE. This time I see the changes I did in version 2.

      Going back to the active application link from HCP, I again see my version 1 even though version 2 is active.

      Any idea on what did I do wrong?

      Thanks and best regards,

      Edi

      Author's profile photo Former Member
      Former Member

      Hi Edi,

      you can check on the versioning panel in the cockpit whether your commit was deployed to HCP. Please check as well if a version is created on this commit and this version is the active version.

      Martin

      Author's profile photo Ankit Gupta
      Ankit Gupta

      Hello Rui,

      I see openweathermap api needs a key as applicable from 9th Oct. I assume a change will be required in the code.

      Ref:# Frequent Asked Questions from openweathermap

      Regards,

      Ankit

      Author's profile photo Lukasz Richter
      Lukasz Richter

      Sample @Ankit Gupta:

      Zrzut ekranu 2015-10-28 15.19.04.png

      Author's profile photo Former Member
      Former Member

      Is it not possible to add weathermap API key to destination directly as a custom property ?

      Author's profile photo Sascha Scholz
      Sascha Scholz

      Hi Soujanya,

      currently, it's not possible to add the API key as a custom property to the destination.

      Sascha

      Author's profile photo Amber .
      Amber .

      I have an exactly same requirement given in this article. I followed the steps but getting 404 error when i use destination for odata url . Please find my issues in the following post.

      destination not working from neo-app.json after deploying from eclipse to HCP

      Author's profile photo Thomas Andreas Muller
      Thomas Andreas Muller

      // add appid

          var appid = "&appid=2de143494c0b295cca9337e1e96b00e0"

          // Create a tile for the current weather in Lisbon

          var oModelWeatherCity1 = getModelFromURL("/openweathermap?q=:Lisbon" + appid);

          var weatherTileCity1 = buildWeatherTile("myWeatherTileCity1", oModelWeatherCity1);

          // Create another tile for the current weather in another city

          var oModelWeatherOther = getModelFromURL("/openweathermap?q=Neustadt an der Weinstrasse" + appid);



      apply this and it should work.

      Author's profile photo Ross HIghtower
      Ross HIghtower

      It works like this:

      var oModel = new sap.ui.model.json.JSONModel();

      oModel.loadData("/openweathermap",{"q":"Singapore","APPID":"YOURID"});

      this.getView().setModel(oModel);

      Replace YOURID with your app id.

      Ross

      Author's profile photo Nick Robinson
      Nick Robinson

      I'm an HCP newbie. How do I pick up the App ID? I'm not sure where to find it.

      Author's profile photo Nick Robinson
      Nick Robinson

      Nevermind, I figured it out!

      Author's profile photo Former Member
      Former Member

      Thanks for this great post. It makes the start with HCP very easy.

      Author's profile photo yasser aoujil
      yasser aoujil

      Hi, thank you for this post, I am very new to the HCP, I am facing a problem that I couldn't solve, and the other posts saying the same didn't solve this issue.

      I have copied the same text of the index.html and the neo-app.js showed above, I configured the destination as indicated too, but I get a 404 when calling the weather api because the url of the request is not correct, it makes a call to this url:

      Request URL:https://html5weatherapp-p0000000trial.dispatcher.hanatrial.ondemand.com/openweathermap?q=Lisbon&APPID=111111111

      I see that the destination binding didn't work but I have no idea how to fix it, I have tried to make the call to the weather api without using the destination config as follows (and it worked):

      var oModelWeatherCity1 = getModelFromURL("http://api.openweathermap.org/data/2.5/weather?q=Lisbon&APPID=1111111111");

      But with the once this one it just gives the 404 error:

      var oModelWeatherCity1 = getModelFromURL("/openweathermap?q=Lisbon&APPID=1111111111");
      Author's profile photo Former Member
      Former Member

      When I am using URL like below..

      var oModelWeatherCity1 = getModelFromURL("http://api.openweathermap.org/data/2.5/weather?q=Lisbon&APPID=1111111111");
      

      I am getting error

      Mixed Content: The page at 'https://webidetesting6366445-p1942639940trial.dispatcher.hanatrial.ondemand…ional-url=index.html&sap-ui-appCacheBuster=&sap-ui-xx-componentPreload=off' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://api.openweathermap.org/data/2.5/weather?q=Lisbon&appid=MyAppId'. This request has been blocked; the content must be served over HTTPS.
      Author's profile photo Former Member
      Former Member

      Hey Rui and Community!

       

      When I start the application I always get the following message:

      Can anyone please help me with this?

      • I set the Destination as described
      • I have a API key from Openweathermap.org and implemented it like the Example from Lukasz Richter

      I have no idea why it does not work.

      Hope somebody had the mistake and can help me!

       

      Kind Regards,

      Nadine

       

      Author's profile photo Daniel Cunha
      Daniel Cunha

      Olá Rui,

      Estive numa formação de iniciante de FIORI e vi o seu link.

       

      estava a tentar correr o seu exemplo SAP IDE Full-Stack

      Ao correr tenho o seguinte erro:

      Antes de mais perceber se isto é sequer possível correr e testar neste ambiente e se é necessário modificar algum código como cidade ou algo do género.

       

      Sei que as minhas dúvidas são vagas, mas estou numa fase de descoberta e auto-estudo.

       

      Cumprimentos,

      Daniel.