sap.designstudio.sdk.Component

[robert_schmidt01]

Hi,

I am learning the SDK. I see that we are subclassing the sap.designstudio.sdk.Component object. In all the examples, we are to copy existing components and modify them to our needs. This is great, but where are the details on how the environment behaves? What are the methods and properties of sap.designstudio.sdk.Component? I see that init, afterUpdate and other functions get called, but what are all of the functions that get called? What properties are available?

I hope that some of these questions can be answered.

Thanks and happy New Year.

[Former Member · Accepted solution]

Hi Robert,

     I understand the initial learning phase can be quite tricky. The methods and properties are briefly described in the sdk developer guide here. The details as to how the environment behaves isn't exactly documented but will rather be clear as you work with the SDK. The JavaScript Function calls(methods) are described in section 4.2.1 of the developer guide. The section 4.1 describes all the properties available which will be defined in the contribution.xml. You could also have a look at components developed by Micheal in the Design Studio Utility Pack here. It may help you as you learn.

Regards & a Happy New Year,

Stephen

[robert_schmidt01 · Accepted solution]

Thanks.

This is for the Div Event Handler? The UI5 Event Handler calls different methods?

In these events, we are able to access This. What is This and what is That? That seems to have different properties, then This. We set That to This when the component is first created? So I am thinking that That is some kind of master container, and This is the individual component? When I refer to This, there is a pop-up menu with available properties, but not all properties seem to be available, for example: this.$().attr("id"); If this property were available, then would This's id be different from That's id?

So that's it, just these three series of events?

When the extension component is rendered for the first time, the SDK framework performs the following sequence of JavaScript function calls:●init()●beforeUpdate()●
Update all extension component properties using their setter/getter functions (see next section)●afterUpdate()

When the extension component is only updated (after it has already been rendered once),the SDK framework performs the following sequence of JavaScript function calls:●beforeUpdate()●
Update all extension component properties using their setter/getter functions (see next section)●afterUpdate()

When the extension component is deleted from the application, the SDK framework calls JavaScript function●componentDeleted()

Thanks. I want to keep this discussion going, because I think that it will definitely help me, but will also help others who are using this board to learn the SDK.

[Former Member · Accepted solution]

Hi Robert,

     This is for the DIV event handler & yes the UI5 event handler use slightly different methods.    

Ok this may seem confusing but you will have to learn some Javascript, jquery basics for 'this'.In Javascript, this refers to the current scope(within a function). However when you are outside this function, the scope changes. So we cannot access objects or variables in the original function.

So we create an alias referred to as that, so that you can still access the original function.

Let me show you this with a very simple example

$('#element').click(function(){
    // here 'this' is a reference to the element clicked on(current scope)
    var that = this;
    $('.elements').each(function(){
        // here 'this' is a reference to the current element in the loop
        // 'that' is still a reference(alias) to the element clicked on
    });
});

It is not necessary that you declare it as that ,you can even declare it as

var self = this;

Or as _this as in this article Scope and this in JavaScript

You can refer to this page from jquery for the this keyword.

Yes those four events are called at runtime. You can write all your Javascript within these functions. You can use Jquery as it is already included in the SDK. You can include your own javascript libraries by using <jsinclude> in the contribution.xml file.

Regards,

Stephen

[robert_schmidt01 · Accepted solution]

Thanks Stephen.