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
- HTML/DOM manipulation
- CSS manipulation
- HTML event methods
- Effects and animations
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
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.
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.
Click on controls to zoom in; Click outside to zoom out
Ability to drag and drop visualizations to rearrange controls
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. To try out jQuery integration capabilities, download a trial version of VBX Extensions for SAP Design Studio here.