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.
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)
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
– Script Contribution – the methods
– Additional properties HTML – where you define what you see in the additional properties panel
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.
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).
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.
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.