Skip to Content
Author's profile photo Former Member

How to use SAPUI5 with Windows 8 and Neptune

We have seen an increase in the adoption of windows 8 for desktop in the enterprise market recently and companies are also looking at the new Surface and other Windows 8 tablets. How cool would it be to run SAPUI5 windows 8 apps on these?

/wp-content/uploads/2013/10/im1_300781.png

Being a Microsoft partner as well as a SAP partner focusing on HTML5 we took on this challenge and are happy to announce that with the 2.12 version of Neptune Application Designer this is really very easy.

The major issue with combining WinJS and SAPUI5 is that Microsoft has made it very difficult to inject content dynamically which basically what SAPUI5 does.

Anyhow, we worked around this issue and created some global overrides to the methods that caused the issues and the apps can be exported to Windows 8 in a matter of minutes now.

You will need Visual Studio with JavaScript support for creating these applications.

First step is to create a new project in VS. Choose Blank App:

/wp-content/uploads/2013/10/im2_300782.png

Next, save the project and exit VS

/wp-content/uploads/2013/10/im3_300783.png

Go to the new Export to Windows 8 transaction in Neptune

/wp-content/uploads/2013/10/im4_300784.png

Add a local directory and the app you wish to export

/wp-content/uploads/2013/10/im5_300786.png

Copy the Default.html and the Neptune folder and add you SAPUI5 folder (This you need to get from SAP) And move it to the VS project folder (Overwrite the default.html)

/wp-content/uploads/2013/10/im6_300787.png

/wp-content/uploads/2013/10/im7_300788.png

Start VS and in the Solution Explorer click show all files and include the Neptune and the SAPUI5 folder to the project (right click on the folders and chose include in project)

/wp-content/uploads/2013/10/im8_300790.png

Run the application and you see that you now have SAPUI5 apps with access to the SAP Business Suite

/wp-content/uploads/2013/10/im9_300795.png

To add icons/splash screens etc open the appxmanifet file and import what you need.

/wp-content/uploads/2013/10/im10_300796.png

/wp-content/uploads/2013/10/im11_300798.png

Since you have access to the WinJS capabilities you can play around with cool features like badges on the live tiles etc.

/wp-content/uploads/2013/10/im12_300822.png

If you need more information we will be at TechEd Las Vegas and Amsterdam, come to our booth for a demo

/wp-content/uploads/2013/10/tec1_300809.jpg

/wp-content/uploads/2013/10/tec2_300810.jpg

Assigned Tags

      3 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Rajkumar Shanmuganathan
      Rajkumar Shanmuganathan

      Hi Njal,

      First of all thanks for letting us try the innovative solution from SAP. 🙂

      I have downloaded the latest version "UI Development Toolkit for HTML5 Version SAPUI5 1.16.3" from the SDN. Have you used the same version here?

      I'm asking this because i'm getting the following error in the Visual Studio. 

      " Unhandled exception at line 18, column 2 in ms-appx://86be978a-3280-45a6-910e-f7e2f6e08e19/default.html

       

      0x800a1391 - JavaScript runtime error: 'sap' is undefined

       

      If there is a handler for this exception, the program may be safely continued. "

      To be more specific on the code, getting error in this line of code.

      var FromDate = new sap.me.Calendar("FromDate",{});

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Rajkumar. From the error message it looks like SAPUI5 is not loaded. Check that the SAPUI5 folder is added to the project

      Author's profile photo Former Member
      Former Member

      Hello Njal,

      Following this procedure I am still getting error HTML1701 objecting to dynamically generated code. The code that is causing this error is standard Neptune code related to AppCache config. One line that throws this error is:

      var AppCache_inUsername = new sap.m.Input("AppCache_inUsername",{width:"100%",change: function(oEvent) {AppCache_inPassword.focus();}});

      Thanks,