In my last blog I showed you how to find the version of the jQuery library being used by sap-ui-core.js. In this blog I’ll show you how to change the jQuery version used by SAPUI5 runtime environment to a custom jQuery version. So let’s get going!
Prerequisites
Create an Application Project for SAPUI5
Open Eclipse and go to the menu option, File -> New -> Other…. In the New window, open the node SAPUI5 Application Development and select the option Application Project. Click on the Next button.
Provide a name to the project. Let’s call it sapui5.jqverchange.demo. Select the library sap.m and check the option Create an Initial View. Click on the Next button.
In the next window, provide a name to the view. Let’s call it main. Select the Development Paradigm as XML. This will create a view in XML. Click on the Finish button.
A project structure similar to the one shown below should be created
Add a custom version of jQuery
Create a new folder in the WebContent of the application and give it any name. Let’s call it jquery. Download your desired version of jQuery and place it in this folder.
Modify index.html
Open the index.html file and update it with the following code. The path to the new jQuery file has been added along with the path to jquery-ui-position.js. SAPUI5 uses jQuery UI Position 1.10.4 for positioning popups, tooltips, etc. jQuery UI version 1.10.4 contained incompatible changes to jQuery UI version 1.8.23. A major incompatible change is in jQuery.ui.position, where the offset property has been removed. SAPUI5 runtime adopted this change, for example in Popup, but applications may need to adopt their logic too.
To skip the use of jQuery by SAPUI5 runtime, the resources/sap-ui-core-noJQuery.js file is included in bootstrap section.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<!-- include some jQuery version -->
<script src="jquery/jquery-2.1.0.js" ></script>
<!-- SAPUI5 uses jQuery UI Position 1.10.4 for positioning popups, tooltips, etc. -->
<script src="resources/sap/ui/thirdparty/jqueryui/jquery-ui-position.js" ></script>
<!--
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal">
</script>
-->
<script src="resources/sap-ui-core-nojQuery.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal">
</script>
<script>
sap.ui.localResources("sapui5.jqverchange.demo");
var app = new sap.m.App({initialPage:"idmain1"});
var page = sap.ui.view({id:"idmain1", viewName:"sapui5.jqverchange.demo.main", type:sap.ui.core.mvc.ViewType.XML});
app.addPage(page);
app.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
Deploy and Run Application
Start your server and deploy the application. Open a new browser window (this example uses the Chrome browser) and open the Developer Tools.
Open the following URL in browser http://localhost:8180/sapui5.jqverchange.demo/
Please use the port number according to your server configuration.
In the browser console, type the command $.fn.jQuery and you’ll see the new jQuery version 2.1.0
Hope that helps. See you in the next blog!