How to run SAP Web IDE Offline application in Windows 10 (Obsolete)

[miltonc]

** Note **:  This blog is now obsolete.  Hybrid Application Toolkit now supports Windows platforms.  Please refer to the following blog for more details.  Running SAP Web IDE applications using HAT in Windows

Ever wondered how to run your SAP Web IDE application in Windows 10 laptops or desktops.  Hybrid Application Toolkit (HAT) only supports Android and iOS platforms.  The steps below show how you can run the SAP Web IDE application in Windows platforms. Since running an Offline application has a few additional steps, this blog talks about the Offline application. For Online application, some of the steps are not required. I have marked the steps not required for Online applications.  Simply skip those steps for Online applications.

Installing Visual Studio 2015 Community Edition

• Browse to http://www.visualstudio.com
• Download and run the Community Edition 2015

         

• Choose the Custom option.  Select HTML/JavaScript (Apache Cordova) under Cross Platform Mobile Development

         

• Complete install

Export SAP Web IDE project to local development machine

• Right click on SAP Web IDE project and click Export

         

• Extract the downloaded zip file

Create Apache Cordova Visual Studio project

• Create a new project in Visual Studio.  Select the option Apache Cordova Apps under JavaScript.

         

Copy SAP Web IDE project files into Visual Studio project

• Copy the extracted files from the SAP Web IDE project into the www folder of the newly created Visual Studio project.  Do not delete any files in the www folder, but you can overwrite the files.

         

Rename .project.json file and any reference to it

• Rename .project.json file to project.json in Visual Studio
• Also edit devapp.js file to use project.json instead of .project.json

         

Edit Index.html file

• The index.html file gets overwritten by the SAP Web IDE project files.  However, there are 2 lines of code that needs to be restored. Modify index.html to add the following 2 lines of code

<script src="scripts/index.js"></script>

<script src="scripts/platformOverrides.js"></script>

         

Download SAP UI5 resources and copy them to www folder

• Download SAP UI5 from https://sapui5mobile-sapui5.dispatcher.hanatrial.ondemand.com/sapui5-mobile.zip
• Extract the zip file
• Copy the resources folder into the www folder of the Visual Studio project

         

Copy datajs file to www folder

• Download the latest datajs file from http://datajs.codeplex.com/
• Copy this file to the www folder of the Visual Studio project

Add Kapsel plugins to Visual Studio project

• Open config.xml file in Visual Studio and click on Plugins tab in the left pane
• Click on Custom tab.  Browse to desired Kapsel plugin and click Add

         

• Note that you will have to add any SAP Kapsel dependencies one by one.  Dependencies available on the public git repository are automatically installed by Visual Studio
• Note that the OData Kapsel plugins has dependency on certain native Windows libraries. The following section will show you how to add those dependencies

Adding references to native Windows libraries (Offlineonly)

• Build the solution (do not run).  Select Windows x-64 as the solution platform
• Close the Visual Studio project
• Browse to the following folder <Solution folder>\<Solution>\platforms\windows
• Open the CordovaApp.sln file.  Select x-64 as the solution platform
• Right click on the CordovaApp.Windows (Windows 8.1) project and add the following references

         

• Add Microsoft Visual C++ Runtime Package for Windows as a reference

• Add the *.winmd files (add all 3 of them) found in the OData plugin folder as references

         

• Click OK to complete adding the references
• Your references should now look like this without any warnings or errors

Disabling sap.Xhook (Offline only)

• This step is necessary to fix a bug with synchronous requests.  Once the bug is fixed in SP11, you do not have to do this step…
• Edit the file www\dev\devlogon.js and add the following line in openStoreSuccessCalllback function

sap.Xhook.disable();

         

Run the project

• Select x64 as Solution Platforms and LocalMachine.  Run the project

         

In the next blog, I will show you how to debug the SAP Web IDE application running in Windows platforms.