So…JQuery is going ahead at much faster rate than SAP UI5. For the both the reasons are justified. On one hand SAP UI5 needs to make sure that its entire library stack is stable enough and on other hand we need new JQuery based features included on top of sap UI5 control.
After following some discussions around…I concluded the following:
1. We must not replace the wrapped jquery version on UI5 control. Simply because it is the ownership of SAP UI5 itself
2. We can use the newer version as a parallel library accessing it via a different root node access to avoid conflict with $
So here is my little rnd
Usecase
Gannt Tree showing the scheduling lines. The scheduling lines must be resizable.
References
SAP UI5: https://sapui5.hana.ondemand.com/sdk/#test-resources/sap/ui/table/demokit/TreeTable.html
JQuery Resizable: http://jqueryui.com/resizable/
Merging Solution
In the index.html just before including the sap lib reference, add the the newer version on JQuery and story the reference of $ to a new variable. We cannot include the newer jQuery in the end assuming that SAP UI5 wouldhave loaded with the older JQuery as doing so will result in js errors in callback stack of UI5.
So this simple variable referencing technique should do the trick
<script src=”http://code.jquery.com/jquery-1.9.1.js“></script>
<script src=”http://code.jquery.com/ui/1.10.3/jquery-ui.js“></script>
<script>
var jptNew = $;
</script>
<script src=”resources/sap-ui-core.js” id=”sap-ui-bootstrap”
data-sap-ui-libs=”sap.ui.commons, sap.ui.table”
data-sap-ui-theme=”sap_goldreflection”>
</script>
Now post this in all code to follow $ shall refer to the JQuery lib initiated by SAP UI5 library and jptNew will be the root access to newer jQuery library.
So, once the TreeTable is rendered we can now take reference of the content in the scheduling column of the tree and make it resizable
for(var r=0; r<rows.length;r++){
for(var c=1;c<rows[r].getCells().length;c++){
rows[r].getCells()[c].addStyleClass(“jdraggable”);
jptNew(“#”+rows[r].getCells()[c].getId()).resizable({
stop: function( event, ui )
{
sap.ui.getCore().byId(“__button0-col1-row0”)
.setWidth( (ui.element.context.style.width.replace(“px”,””)*100/jptNew(“#__column1”).css(“width”).replace(“px”,””))+”%”
);
}
});
}
}
The final output would be a standard SAP UI5 controll enhance with the newer JQuery funtions:
Hope this helps exploring interesting usecases using SAP UI5!
Cheers,
Jemin
Nice blog 🙂
Thanks Venkatesh
Don’t you think it would be better if you use jQuery.noConflict() function?
jQuery.noConflict() | jQuery API Documentation
Hi Jemin,
are you aware that UI5 comes with different jQuery versions and there is a special version of the UI5 core that can be easily combined with other jQuery versions?
If you load sap-ui-core-nojQuery.js instead of sap-ui-core.js, UI5 will use any already loaded jQuery version.
You don’t need the trick described above then. Just load a jQuery version of choice (only tested with 1.7-1.10) and then start the UI5 bootstrap without jQuery.
UI5 1.18 also comes with jQuery 1.10.1 included as an option, see:
https://openui5.hana.ondemand.com/resources/sap/ui/thirdparty/jquery/jquery-1.10.1-dbg.js
The next version will include jQuery 1.10.2. But you are right, the included version is lagging behind (1.11 is not included yet, either) because we need to do testing and our own development time and the releases of jQuery and UI5 are not in sync.
By the way: I’d disagree about jQuery going much faster than UI5. 🙂
UI5 has bi-weekly patch releases and quarterly upgrades with new features: there were 3 months between UI5 1.16 and 1.18, but 8 months between jQuery 1.10 and 1.11.
This doesn’t say much about the content of the respective releases, but if you consider that jQuery is at least twice as old and the UI5 scope is MUCH wider (keep the 180 controls in mind!) the development speed of UI5 doesn’t look so bad… 😉
Regards
Andreas