Creating a extension for Lumira Designer

[former_member330010]

I'm working on an SDK extension that passes an array to a component.js function. In debug mode the array has no data, when it should. Here is the function:

this.tableheader = function(value) {
	for (var int = 0; int < value.length; int++) {
		alert(value[int]);
	}
}

here is the contribution.xml property:

		<property
			id="tableheader"
			title="Table Header"
			type="Array"
			group="Display"/>

here is the contribution.ztl (I have tried both):

  void setHeader(Array value) {*
    this.tableheader = value;
  *}

  void setHeader(StringArray value) {*
    this.tableheader = value;
  *}

this is the error I get in eclipse:

TABLE_1.setHeader(test);" "java.lang.RuntimeException: java.lang.ArrayIndexOutOfBoundsException: 0

Chrome has the same error in debug.

I can change the property type to a string and it sends

value = '[","data","moredata","more","]'

Thanks for you help.

[Martin-Pankraz]

Hi Justin,

I didn't check your problem in detail yet but I'd like to share a thought that crossed my mind while reading your question. Usually the sdk properties values are passed to a specific javascript pattern on the js files to deal with updates (getter and setter in one function). It looks like this:

this.tableheader = function(value) {
   if (value === undefined) {
	return saveTableheader;
   }
   else {
	saveTableheader = value;
   }
};

So in your case you would put your alerting code on the else block. The saveTableHeader variable needs to be defined globally on your js file to contain the passed values cross functions.

Did you mean that the alert block promts the message you expect when changing the property type from array to string (or StringArray)?

Kind regards

Martin

[former_member330010]

This is the real function. So it should look like this?

this.appendtablerows = function(value) {
	if (value === undefined) {
		return appendRow;  //Not sure what goes here.
	} else {
		value = value.replace('[', '').replace(']','').split(',');
		var rowhtml = '<tr>';
		if (value.length > 0) {
			for (var int = 0; int < value.length; int++) {
				rowhtml = rowhtml + '<td>' + value[int] + '</td>';
			}
			rowhtml = rowhtml + '</tr>';
			$(rowhtml).appendTo($('.responsivetable .tbl-content table tbody'));
		}
	}
};

appendRow is the name of the function from the contribution.ztl file. This is because I do not know what saveTableHeader is in your example.

My question above, was how can pass value as an array and not a string? In my example I use a string and split it into an array.

[Martin-Pankraz]

Hi Justin,

I was trying to introduce you to the pattern how the DesignStudio framework invokes functions during the SDK component's lifecycle.

During the first call the value of the function is undefined, therefore the first if clause should handle the "getter" part. I realized that by using a global variable which then keeps the current value of that property. The second call is the "setter" part, where the value argument of the function contains the value coming from the designer.

Your example above is mixing update code with property value handling. After every property change the framework method "afterUpdate" or "afterDesignStudioUpdate" (depending on which sdk handler you use) is being called. Your logic should be handled there.

It might be worth to have a look at the SDK examples from SAP. They have a good set of implementation variations and patterns in there.

Kind regards

Martin