jQuery has been around for a while and it has become one of the de-facto web development plugin due to its powerful DOM manipulation capabilities. While SAP Design Studio does not directly support jQuery (inside its default BIAL script editor), we shall see ways in which we can integrate jQuery with SAP Design Studio to enhance the features & capabilities of the applications.
JQuery and DOM
For the beginners in us, JQuery is a JavaScript library that helps us “do more for less code”. It essentially wraps the common JavaScript tasks into functions that allow web developers great flexibility and use. Its ability to manipulate DOM (Document Object Model) – using which containers and elements in a web page are arranged in a logical tree hierarchy – is extremely powerful. The following are some of the things that JQuery can do.
- HTML/DOM manipulation
- CSS manipulation
- HTML event methods
- Effects and animations
- AJAX
- Utilities
In addition to the above, jQuery can also do a lot more which is outside the scope of our review. Its popularity can be seen by the fact that 63% of the top million sites by traffic volume use it today (Source: Libscore).
Adding JQuery in Design Studio
While jQuery cannot be used inside the BIAL Script Editor in SAP Design Studio, it can be used in the following scenarios:
- Using the HTML Box and Script Box editors that are part of the VBX Extensions for SAP Design Studio released by Visual BI.
- jQuery can be used inside the SDK custom extensions – but this is outside the scope of our topic
HTML Box
The HTML box is a simple but powerful utility that delivers HTML editing capabilities to SAP Design Studio.
You can paste your HTML code in the additional properties sheet (see image) of this component to get started.
Script box
The script box is a similar component using which you can incorporate custom JavaScript into your SAP Design Studio application. It natively includes the JQuery library and supports all JQuery scripts.
The usage is very similar to HTML box, and the script is applied globally to the application developed.
JQuery + SAP Design Studio in Action
I have included some samples of what is possible by leveraging jQuery inside SAP Design Studio.
The possibility of JQuery is limitless. The following are few of the things that are done using JQuery in SAP Design Studio.
Zoom
Click on controls to zoom in; Click outside to zoom out
Dynamic Grid
Ability to drag and drop visualizations to rearrange controls
Rock-Paper-Scissors
Have fun playing Rock-Paper-Scissors on SAP Design studio.
These are just simple ideas, and the potential for using jQuery with SAP Design Studio is much larger.