I don't have a full component, I've tried only with an skeleton and debuging Javascript, I can't see a meta_data object like in other custom components.
My code:
Contribution.ztl
class com.sap.sample.ui5.Sample extends Component { String getSelectedValue(){* return this.selectedValue; *} }
Contribution.xml
<?xml version="1.0" encoding="UTF-8"?><sdkExtension xmlns="http://www.sap.com/bi/zen/sdk" id="com.sap.sample.ui5" title="Design Studio SDK Extension Sample SAPUI5" version="1.0" vendor="SAP"> <group id="sapui5" title="SAP UI5 Custom Components"/> <component id="sample" title="Sample" icon="res/icon.png" handlerType="sapui5" databound="true" group="sapui5"> <jsInclude>res/js/components.js</jsInclude> <property id="selectedValue" title="selectedValue" type="String" visible="false"/> <property id="onChange" title="On Change" type="ScriptText" group="Events"/> <initialization> <defaultValue property="WIDTH">300</defaultValue> <defaultValue property="HEIGHT">30</defaultValue> </initialization> </component></sdkExtension>
Component.js
sap.ui.commons.Sample.extend("com.sap.sample.ui5.ComboBox", { metadata : { properties : { "metadata": null, "selectedValue" : null } }, setSelectedValue : function(value) { this.selectedValue = value; }, getSelectedValue : function() { return this.selectedValue; }, setMetadata : function(value) { this.metadata = value; }, getMetadata : function() { return this.metadata; }, renderer : { }, initDesignStudio: function() { try { var that = this; // access to metadata??? this.attachChange(function() { that.setSelectedValue('Hello'); that.fireDesignStudioPropertiesChanged( [ "selectedValue" ]); that.fireDesignStudioEvent("onchange"); }); } catch (e) { // TODO: handle exception } }, renderer: {} });
Thanks!