SAP UI5 and Newer JQuery

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