SDK of type SAPUI5 – Practicable Building Blocks

Here I cust collect for you building blocks for SDK components, which can be used “copy&paste” with “search&replace” afterwords.

There are always 3 parts:

• contribution.xml
• contribution.ztl
• component.js (or a JS file as you name it)

This blog is just a start. I will try to extend this as soon I have more.

Create New SAPUI5 Component (in this example, we start with Absolute Layout)

• contribution.xml

<component

    id=”%YourComponentId%“

    title=”%Your Component Id Title%“

    icon=”res/%your subfolder%/%YourComponentId%.png”

    handlerType=”sapui5″

    group=”%YourComponentGroupId%“>

    <jsInclude>res/%your subfolder%/%YourComponentId%.js</jsInclude>

    <cssInclude>res/%your subfolder%/%YourComponentId%.css</cssInclude>

… here will be more content – delete for now this line …

</component>

• contribution.ztl

          Important: your component is located in some package, you have to sync the package on all places!

          here: %your.sdk.package% == org.kalisz.karol.scn.pack

/**

* Class for MenuButton

*/

class %your.sdk.package%.%YourComponentId% extends Component {

… here will be more content – delete for now this line …

}

• component.js (or a JS file as you name it – eg %YourComponentId%.js)

sap.ui.commons.layout.AbsoluteLayout.extend(“%your.sdk.package%.%YourComponentId%“, {

  /** here we will insert all parameters later */

  metadata: {

        properties: {

            … here properties extensions – delete for now …

        }

  },

  /** this method is used later for init*/

  initDesignStudio: function() {

  },

  renderer: {},

  /** this method is requried for content update */

  afterDesignStudioUpdate : function() {

  },

});

Add Simple Property (Sting, Boolean)

• contribution.xml
  • what is important here?
    • I have used the prefix “d” to avoid collisions with any property of SAPUI5 component “AbsoluteLayout”
    • but this is not requried if you knwo that SAPUI5 does not have this property

      instead of this line:
      … here will be more content – delete for now this line …

      insert…

    <property

      id=”dText“

      type=”String”

      title=”Text Value”

      tooltip=”Button text displayed at runtime”

      group=”Display”

      visible=”true”/>

    <property

      id=”dEnabled“

      title=”Enabled”

      tooltip=”Switches enabled state of the control”

      type=”boolean”

      group=”Display”

      visible=”true”/>

• contribution.ztl
  • what is important here?
    • the variable names must be same as in the contribution.xml

      instead of this line:
      … here will be more content – delete for now this line …

      insert…

  /** some documentation */

  String getText () {*

    return this.dText;

  *}

  /** some documentation */

  void setText (String value) {*

    this.dText= value;

  *}

  /** some documentation */

  String getEnabled () {*

    return this.dEnabled;

  *}

  /** some documentation */

  void setEnabled (boolean value) {*

    this.dEnabled= value;

  *}

• component.js (or a JS file as you name it – eg %YourComponentId%.js)

sap.ui.commons.layout.AbsoluteLayout.extend(“%your.sdk.package%.%YourComponentId%“, {

  /** here we will insert all parameters later */

  metadata: {

        properties: {

           “dText”: {type: “string”},

           “dEnabled”: {type: “boolean”},

        }

  },

  /** this method is used later for init*/

  initDesignStudio: function() {

  },

  renderer: {},

  /** this method is requried for content update */

  afterDesignStudioUpdate : function() {

      // access the properties

     var oText = this.getDText();

     var oEnabled = this.getDEnabled();

  },

});

Add Array Property

• contribution.xml

    <property

      id=”dElementsContent“

      type=”String”

      title=”Property For Elements”

      group=”Display”

      visible=”false“/>

• contribution.ztl
  • what is important here?
    • the variable is “dElementsContent“
    • always this variable must be set, independent what you do in the script

  /** remove all elements */

  void removeAllElements () {*

      var elementsArray = [];

      this.dElementsContent= JSON.stringify(elementsArray);

  *}

  void addElement (

      /**Element Key (must be unique)*/ String elementKey,

      /**Element Text*/ String elementText,

      /**Some Optional Boolean*/ optional boolean isActive) {*   

 

    // default

    if(isActive== undefined) {

      isActive= true;

    }

 

    var itemDef = {

      “key”: elementKey,

      “text”: elementText,

      “active”: isActive

      };

    if (this.elementsContent === undefined || this.elementsContent === “” || this.elementsContent === “<delete>”){

      this.elementsContent = “[]”;

    }

 

    var elementsJson = JSON.parse(this.dElementsContent);

 

    var alreadyFound = false;

    for (var i = 0; i < elementsJson.length ; i++){

      if (elementsJson[i].key == elementKey) {

        alreadyFound = true;

        break;

      }

    }

 

    if(!alreadyFound) {

      elementsJson.push(itemDef);

    }

    this.dElementsContent= JSON.stringify(elementsJson);

  *}

• component.js (or a JS file as you name it – eg %YourComponentId%.js)
  • what is important here?
    • dElementsContent is the name, SAPUI5 will automatically generate set and get methods: getDElementsContent() and setDElementsContent(value)
    • the way how to read this property is a standard jeson parse algorithm
      

metadata: {

        properties: {

           “dElementsContent”: {type: “string”},

        }

  },

/** this method is requried for content update */

  afterDesignStudioUpdate : function() {

    var lElementsToRender = this.getDElementsContent();

 

    if(lElementsToRender != null && lElementsToRender != undefined && lElementsToRender != “”){

      var lElementsToRenderArray = JSON.parse(lElementsToRender);

      // distribute content

      for (var i = 0; i < lElementsToRenderArray.length; i++) {

        var element = lElementsToRenderArray[i];

        var lNewElement = this._createElement(i, element.key, element.text, element.active);

      }

    }

},

Special Area: Initialization / Default Values

• contribution.xml
  • what is important here?
    • you should initialize all layout properties
    • you should also set defaults for your own properties

at the place of this line.

… here will be more content – delete for now this line …

<initialization>

  <defaultValue property=”WIDTH”>400</defaultValue>

  <defaultValue property=”HEIGHT”>40</defaultValue>

  <defaultValue property=”TOP_MARGIN”>0</defaultValue>

  <defaultValue property=”LEFT_MARGIN”>0</defaultValue>

  <defaultValue property=”RIGHT_MARGIN”>auto</defaultValue>

  <defaultValue property=”BOTTOM_MARGIN”>auto</defaultValue>

  <defaultValue property=”dEnabled“>true</defaultValue>

  <defaultValue property=”dText“>Some Text</defaultValue>

  </initialization>

The examples above are quite basic, you can see such examples in my components. Of course, there are many ways to acieve the same.

With this you can simply prepare your own SDK component and this will be rendered as empty Absolute Layout…

If someone wants to try out and you get any troubles, please comment – I will fix and update

If you have another snippet which can be used, just post it.