Using jQuery in SAP BusinessObjects Design Studio Dashboards

[shankarsgs]

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.

Read more @ http://visualbi.com/blogs/design-studio/general/using-jquery-in-sap-businessobjects-design-studio-da...