Skip to Content

SAP UI5 and Newer JQuery

October 8, 2013 | 229 Views |
 gantt chartshigher versionjqueryui5
Follow

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:

SAPUI5RezisableGannt1.PNGSAPUI5RezisableGannt2.PNGSAPUI5RezisableGannt3.PNG

Hope this helps exploring interesting usecases using SAP UI5!

Cheers,

Jemin

To report this post you need to login first.

4 Comments

You must be Logged on to comment or reply to a post.

  3. Andreas Kunz

    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

    (0) 

Leave a Reply