When we write sapui5 code, we often need get the UI5 controls basic meta information: the property, aggregation, events, associations. It is not convenient in current Eclipse environment, as the normal process would be:

  1. Download the latest UI5 source code
  2. Create a specific project and import all the ui5 source files
  3. When need see one control/element information, switch from current project to the specific project, open the xx-dbg.js file, then scroll to the control definition part.

  (In Eclipse use the F3 ‘Open Declaration’ will jump to the embedded ui5 library file, but which only contain the function prototype, don’t have the meta data information).

    And another annoying thing is for the enumerable property:  if developer want to know the available enum property value, he needs search it from the big whole source files. And find out which one is the property definition and which one is the reference. In Chrome debug window we can a better way: just type the property type in console, then it will list all the property, but it is still not convenient as we need switch often between different windows.

      How to solve this problem? One solution is use the sapui5 itself to generate basic meta information file.

sapui5 Metadata

    For each ui5 class, we can get the metadata by call getMetadata(), then from the metadata you can get all the information such as property, aggregation, event….

var meta = sap.m.Button.getMetadata()

var prop = meta.getAllProperties(), it looks like: 

text: Object

    1. defaultValue: null
    2. group: “Misc”
    3. name: “text”
    4. type: “string”
  1. type: Object
    1. defaultValue: “Default”
    2. group: “Appearance”
    3. name: “type”
    4. type: “sap.m.ButtonType”

  2. Library information

  3.     By call  sap.ui.getCore().getLoadedLibraries(),  we can get the library information, how many library, all the controls/element/types for one library.

  4. Type information:

        If the property start by ‘sap’, then it may be a enumerable property. We can get the object by eval the string, then do the further check:

        if all the value by key is string, then it is enumerable property, otherwise, like the ‘sap.ui.core.CSSSize‘ it is a special type.


    Class hierarchy information:

        call the getParent() we can get the parent of one class.  Then for all the class, we can easily build the hierarchy information.


    How to generate the metadata information:

      With the available ui5 meta information, it is easy to build the files. I use a famous template http://handlebarsjs.com/ to do so.

  5.   In order for easy use, I integrated it into the ‘Fast UI5 tool’, you can get more information from http://scn.sap.com/community/developer-center/front-end/blog/2013/12/18/fast-sapui5-develop-tool, it look like
  6. MetaTool.png
  7. Just choose the ‘Development Assistant’–>’Meta Information’, then can get you wanted file by click ‘Generate Content’, also you can customize the library, content and file options. The content look like:
  8. Note:
  9.   In order for user easy access, for all the enumerable property, i also generate the property candidate. And generate the parent/child information.


//extends from: sap.ui.core.Control

sap.m.Button = function() {

    var metadata = {

  properties : {

        “busy”              : { type: “boolean”            , defaultValue: false    },

        “busyIndicatorDelay”: { type: “int”                , defaultValue: 1000      },

        “text”              : { type: “string”            , defaultValue: null      },

        “type”              : { type: “sap.m.ButtonType”  , defaultValue: “Default” },  // Default, Back, Accept, Reject, Transparent, Up, Unstyled, Emphasized

        “width”            : { type: “sap.ui.core.CSSSize”, defaultValue: null      },

        “enabled”          : { type: “boolean”            , defaultValue: true      },

        “visible”          : { type: “boolean”            , defaultValue: true      },

        “icon”              : { type: “sap.ui.core.URI”    , defaultValue: null      },

        “iconFirst”        : { type: “boolean”            , defaultValue: true      },

        “activeIcon”        : { type: “sap.ui.core.URI”    , defaultValue: null      },

        “iconDensityAware”  : { type: “boolean”            , defaultValue: true      },

        },

  aggregations : {

            “tooltip”    : { type: “sap.ui.core.TooltipBase”, multiple: false,  altTypes: “string”  },

            “customData” : { type: “sap.ui.core.CustomData” , multiple: true , singularName: “customData”,  },

            “layoutData” : { type: “sap.ui.core.LayoutData” , multiple: false, singularName: “layoutData”,  },

        },

  events: {

            “validationSuccess”: {},

            “validationError”  : {},

            “parseError”      : {},

            “formatError”      : {},

            “tap”              : {},

            “press”            : {},

        }

    };

};

sap.ui.core.TextAlign = {

  Begin  : “Begin”,

  End    : “End”,

  Left  : “Left”,

  Right  : “Right”,

  Center : “Center”,

};


  1. sapui5 1.18.0 version meta files:

  2.     I attached it in this blog, so you can import it into the ui5 project then see all the information easily just in one file.



To report this post you need to login first.

4 Comments

You must be Logged on to comment or reply to a post.

  1. Jason Moors

    Hi Lucky,

    Thanks for the information, it’s really useful!!

    I know you are using the JavaScript libraries to retrieve the metadata, however I wondered if there is any difference between the information contained in the .control files and the metadata contained in the .js files?  as the .control files also include the documentation that supports the properties etc.

    Many thanks,

    Jason

    (0) 
    1. Lucky Li Post author

      hello, Jason

          The .control file is xml format, the format like below:  

      <property group=”Appearance” name=”type” type=”sap.m/ButtonType” defaultValue=”Default”>

        <documentation>Type of a button (e.g. Default, Accept, Reject, Back,  etc.)</documentation>

      </property>

      It contain most important information is the documentation, with this information, it is easy to generate the help files.

      Now in my tool, it can’t get the documentation for the property.  When i have time, i will try to get the documentation from the .control files. 

      Lucky

      (0) 
    2. Lucky Li Post author

      Also it contain the .type file look like, based on those information, it can generate the xml schema file, then it would be more easy to build the xml format view.

      <simple-type xmlns=”http://www.sap.com/sap.ui.library.xsd” >

        <name>ListType</name>

        <author>SAP AG</author>

        <documentation>List types</documentation>

        <baseType>sap.ui.core/string</baseType>

        <enumeration>

        <value name=”Inactive”>

        <documentation>Inactive</documentation>

        </value>

        <value name=”Detail”>

        <documentation>Detail</documentation>

        </value>

        <value name=”Navigation”>

        <documentation>Navigation</documentation>

        </value>

        <value name=”Active”>

        <documentation>Active</documentation>

        </value>

        <value name=”DetailAndActive”>

        <documentation>DetailAndActive</documentation>

        </value>

        </enumeration>

      </simple-type>

      (0) 
    3. Andreas Kunz

      Hi Jason,

      the JS file content is actually generated from the .control file content. The documentation from the .control files is generated as JsDoc. It’s planned to get rid of these generation steps and maintain the control API directly in the JS files (documentation as well).

      Regards

      Andreas

      (0) 

Leave a Reply