Skip to Content
Author's profile photo Milton Chandradas

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

** 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

          WebIDE1.png

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

          WebIDE2.png

  • Complete install

Export SAP Web IDE project to local development machine

  • Right click on SAP Web IDE project and click Export

          WebIDE4.png

  • 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.

          WebIDE5.png

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.

          WebIDE6.png

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

          WebIDE7.png

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>

          WebIDE8.png

Download SAP UI5 resources and copy them to www folder

          WebIDE9.png

Copy datajs file to www folder

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

          WebIDE10.png

  • 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

          WebIDE11.png

  • 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

          WebIDE12.png

  • 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();

          WebIDE15.png

Run the project

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

          WebIDE16.png

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

Assigned Tags

      Be the first to leave a comment
      You must be Logged on to comment or reply to a post.