An overview of the DesignStudio SDK development workshop

Last week i attended the SDK workshop in Walldorf that was presented by Reiner Hille Döring and Lorenz Wiest. These guys developed the SDK tool so they brought a lot of knowledge to the workshop. It was alsno nice to finally meet Mustafa Bensan after I’ve already seen a lot of contributions from him on SDN.

In the two days we covered a lot of topics. First of all we looked at the basics. Installing the software, creating a new SDK. From there we looked at the inner workings of an SDK extension. The  contribution.xml file is the central place in the extension. in the file you will find the definitions of the extension with all the components and their properties.  Additionally there are also other files that help to make the extension work:  The JavaScript component to render the component, the ztl file for the script contributions and the additional properties html+js file for creating the option for users to use the additional properties pane at design time.

From there we went over events, additional property sheets and databinding. Additionally we looked at some special features such as Cascading Style Sheets, using jQuery, using D3, and finally using SAP UI5 based SDK extensions.

so what is a Design Studio SDK?

– with it you can create SDK extensions

– SDK extensions are libraries of extension components (components)

– extensions are created using Javascript, jQuery,, HTML and CSS
     not java as that is reserved for the internal working of Design Studio

What are relevant files  in a SDK extension?

– Contribution.xml – main definitions

– Component JavaScript – where you build the visualization and functionality

– Script Contribution – the methods

– Additional properties HTML – where you define what you see in the additional properties panel

– Additional properties Javascript

Additionally you can insert a CSS file , icon file or additional javascript files as you go.

In the contribution.xml file you can find the main settings for the extension. This is the place where you define the components, the properties of those components and where the source files for the functionality of the component.

Additional things you can set here is the group where the component belongs to in the component pane and the group where the component property belongs to in the properties pane.

Scripting.

The most important picture of scripting is to know that scripting happens in three separate parts.. The central place is the Design Studio script and that the additional properties HTML and the component javascript only can communicate to each other via the Design Studio Script. So When you set a property in the additional property sheet. This will first inform the Design Studio Script (the ZTL file) and this will in turn inform the Component javascript via the property getter/setter functions.

At design time you even could make a graph renderer into the additional property pane and only transfer the properties when you hit a commit button. Only then would the graph on the canvas change shape.

Also very interesting was to learn that there are possibilities in the Design Studio Script. This is the place where you would be able to ‘talk’ to the rest of the application outside the extension. (for example with the datasource).

If you look at the Component Javascript there is a specific Call Sequence

1) init () – When the component is initialized (or resized at design time)

2)  beforeUpdate() – before the component’s properties are updated

3) Property getter/setter functions – these are called during properties update

4) afterUpdate() –  called after all component’s properties are updated

5) componentDeleted() – called after component was deleted from the application

a thing to notice is that internal variables should represent the state of the rendered component. For example if your component would render a value 0 after init() the internal variable should also show 0.In that case the property getter/setter will notice that the value at the component is different from the value at the server side and will update the variable AND the afterUpdate() will be called. This will start the code that uses the property value.

if you want to inform the server (Design Studio Script) of some change or you want to trigger a script you use event methods.

for signalling a changed property you use .firePropertiesChanges() with a list of changed properties and .fireEvent(“scriptname”) you call the script on the server. These are properties and scripts that you have defined in the contributions.xml file.

Data-Binding

now one of the most important things. The data binding. This is the way you can connect the content of the datasource to your component.

the first step is to signal that you want to data bind with the property “databound=true”.

Additionally you define one or more properties that can hold the data. You have a couple of types that are able to respectively hold one value, a row/column, a combination of rows/columns or the entire dataset.

The result will be at runtime a Data Json file with a specific structure that holds the data, tuple references to the metadata and selection. This variable you will be using as input for your graphs and tables.

The metadata json is a separate json variable that contains all the metadata such as dimension lists, formatting, keys, texts and so on.

some final remarks

It was a nice 2 days where we got a comprehensive overview of the SDK. Even if you are already experienced using the SDK you will find interesting bit of information throughout the workshop. Some basic options in the XML files with regard to grouping, or how you can control the name that is being rendered when added to the application. Sometimes an advanced topic was thrown into the mix. jQuery, D3, SAPUI5. A lot of information that would make you wish that the workshop was longer so you could go more into depth with these topics.