Integrating jQuery plugins in SAPUI5


Introduction

Since jQuery (a JavaScript library on which UI5 is based) has been available and widely used on the web for quite some time, a lot of useful plugins have already been created by various developers throughout the web. These plugins make lots of developers lives easier and help standardizing solutions for certain use cases.

SAPUI5 and Fiori are both made to make the end-users life easier by standardizing the look -and feel of applications. A lot of UI components are already available in SAPUI5 and it’s even possible to create your own UI components within the framework. However, it might not always be necessary to reinvent the wheel.

Since SAPUI5 is based on the jQuery framework, this means that jQuery plugins are compatible with SAPUI5! If a certain use-case isn’t foreseen by the standard framework, maybe somewhere a plugin is already available.

Let’s see an example…

Recently we developed an application for a customer where users would enter their mobile phone number to receive automated text messages (multi-factor authentication).

 
Blog Dries november '17 afb 4.png
 

Just letting users entering a mobile phone number freely would be possible, but each user might use a different format for the number. E.g. +32471234567, +32(0)471234567, 0471234567.
For an automated system to send text messages we would prefer to have the phone numbers in a specific (standardized) format. Surely there must be a more efficient way to achieve this!

Well luckily there is! After searching for a little while we discovered a plugin someone already created, called jQuery International Telephone Input.

Integrate the plugin in SAPUI5

First of all, we need the built source code for the plugin, which can be found here.

Download all the source files, and place them in your UI5 project (in a new folder called “res”):

 
Blog Dries november '17 afb 1.png
 

The next step is to register the plugin as a module within SAPUI5:

 
Blog Dries november '17 afb 2.png
 

After this, we still need to include the CSS files that came with the plugin:

 
Blog Dries november '17 afb 2.png
 

Alright, the library is now ready for use in SAPUI5, let’s convert SAPUI5 InputField “iMobilePhoneNumber” to an International Phone Number Input:

 
Blog Dries november '17 afb 2.png
 

The reason there is a $().find(‘input’) in the above code is because the jQuery plugin library works on a HTML Input field. The SAPUI5 Input Component is actually rendered as a DIV that contains a HTML Input field. That piece of code looks for the input field within the DOM element of the SAPUI5 InputField.

When pressing the Save button, we should ofcourse still validate if the user’s entry is indeed a valid phone number, but this is also something the jQuery plugin takes care of. If the phone number is invalid, we show a popup with a translated error message.

 
Blog Dries november '17 afb 3.png
 

After this, all that’s left to do is retrieve the phone number and save it to the back-end:

 
Blog Dries november '17 afb 3.png
 

This small set of actions allows the users to enter phone numbers in a very user-friendly way, that leaves no room for error or different formats of phone numbers:

 
Blog Dries november '17 afb 4.png
 

Conclusion

jQuery is a powerful library that’s been around since 2006. In the past years, lots of web developers already created multiple powerful plugins for jQuery. Knowing that SAPUI5 has jQuery in its DNA, it’s very cool to know that you have a lot more “UI elements” at your disposal, next to the standard UI5 controls.

jQuery plugins in your SAPUI5 project might save you from having to reinvent the wheel one day. As a bonus you could use this technique to create your own SAPUI5 controls, based on jQuery plugins! 😊

 

Thanks to Dries Van Damme for writing this article.

 

For questions or additional information on this subject, please contact Wouter Van Peteghem.