Tutorial for creating a simple Custom Data Source (Part 2)

Hello, and welcome back to this three part series on creating custom data source extensions for Design Studio. As mentioned in the title, this is part 2, and part 1 can be found here. With these blog posts, I hope to help first time developers explore and understand the various intricacies of the Design Studio SDK.

In part 1, we saw how we can create a rudimentary data extension to access JSON data from the World Bank API. We covered what an SDK extension is made of, how to define an SDK extension, and how to fetch and push data into a Design Studio component using JavaScript.

BI Action Language and the Script Contribution File

Now the extension I’d developed would provide the end user with very little functionality; all the power lay with the Analysis Application developer. The end user had no control over the data they were consuming. So how do we provide end users with this control?

The answer is BIAL scripting. BIAL stands for BI Action Language, and BIAL scripts are used to enable user interaction at runtime. The application designer write scripts that are executed when the user performs an action in the executed application. For example, you can place the button component in the application and assign a script to the button’s On Click event.

In the Design Studio script editor with the help of BIAL, you can access the properties of an extension component with Design Studio scripts by adding a Script Contribution file contribution.ztl to the same folder as the Contribution XML. The purpose of the Script Contribution file is to define setter and getter functions for the properties defined in Contribution XML. These functions can then be called using the BIAL scripts.

A few pointers on the Script Contribution file:

• The content of contribution.ztl is a mix of Java syntax (script method signatures) and JavaScript syntax (script method bodies).
• Enclose script method bodies in {**} pairs.
• Enclose method blocks within script body methods in regular braces ({}).
• Access properties defined in the Contribution XML file with the notation this.<propertyName>
• The following types are available:
  • String
  • Int
  • Float
  • Boolean
  • Comments are automatically included in content assistance and tooltips of the Design Studio script editor.

Let’s look at an example of a Script Contribution file.

class com.tcs.worldbankdatasource.WorldBankDataSource extends SdkDataBuffer {}

class com.tcs.worldbankdatasource.WBDynamicDataSource extends SdkDataBuffer {

       /* Sets the country parameter for the API URL. */

       void setCountries(/* Countries */ String newCountries) {*

              this.countries = newCountries;

       *}

       /* Sets the indicator parameter for the API URL. */

       void setIndicators(/* Indicators */ String newIndicators) {*

              this.indicators = newIndicators;

       *}

       /* Sets the range parameter for the API URL. */

       void setRange(/* Range */ String newRange) {*

              this.range = newRange;

       *}

}

As you can see it contains the script contributions for two different components, WorldBankDataSource and WBDynamicDataSource. WorldBankDataSource, the extension component created in part 1, has no script contributions and its class is left empty.

Coming to the script contribution for the WBDynamicDataSource, three setter functions have been provided for each of the component’s properties. The comment that precedes a function or parameter provides a description for it. Given below is an example of how these functions are called in the Design Studio Script Editor.

I’ve created a new Analysis Application which uses the WBDynamicDataSource extension component. Along with the chart and data source components, the application has three buttons; each of which will change one property of the data source.

  Step 1: Insert the chart component, data source and button controls, and run the application.

Step 2: Change the countries

Step 3: Change the indicator

Step 4: Change the range

Conclusion

So that is how we, as developers, can provide the end user the ability to request whatever data they want without being dependent on the application designer. While I’ve just provided buttons to change the properties to predefined values, there is scope for a lot more flexibility. You can for instance, provide drop down boxes will all the countries and indicators that World Bank provides and give the user total freedom to choose whatever value they want.

For the third and final entry in the series, I will explore and explain the Additional Properties Sheet HTML and JavaScript files. Till then I’m glad to answer any questions and please let me know your views in the comment section below.

Cheers!