Integrating jQuery plugins in SAPUI5
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).
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”):
The next step is to register the plugin as a module within SAPUI5:
After this, we still need to include the CSS files that came with the plugin:
Alright, the library is now ready for use in SAPUI5, let’s convert SAPUI5 InputField “iMobilePhoneNumber” to an International Phone Number Input:
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.
After this, all that’s left to do is retrieve the phone number and save it to the back-end:
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:
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.