Metadata Binding in UI5

[santhu_gowdaz]

  Hi All,

                Here I’m going to explain how to do Metadata Binding in UI5. Actually, In UI5 Application, We are Hard Coded some Properties like Label’s and MaxLength, etc… from i18n.properties file or directly.

According to me it’s not a good approach because, if we develop the application in English Language and need to give same Application to German or any other Language, And for example MaxLength is increased or decreased by Abap on any fields like amount, phone number, etc..,  . Now changes have to do from Abap side as well as UI5 side (So many Changes!! Bad idea right?).

So Why should we hardcode these things, If we directly bind from metadata, No changes from UI5 side, No rework.

                For this binding purpose SAP provided 2 Ways,

1. Absolute Binding – means we should give Full Path to access a file.

Example,

     C:\Windows\calc.exe

2. Relative Binding- means don’t want to give Full Path to access a file, directly we can give file name.

Example,

                     calc.exe

Now, Enter Your metadata url to get metadata,

In Google Crome I entered my url/$metadata . below is my metadata.

<edmx:Edmx xmlns:edmx="http://schemas.microsoft.com/ado/2007/06/edmx" xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata" xmlns:sap="http://www.sap.com/Protocols/SAPData" Version="1.0">

<edmx:DataServices m:DataServiceVersion="2.0">

<Schema xmlns="http://schemas.microsoft.com/ado/2008/09/edm" Namespace="NameSpace" xml:lang="en" sap:schema-version="0000">

<EntityType Name="EntityTypeName" sap:content-version="1">

<Key>

<PropertyRef Name="PropertyRefName"/>

</Key>

<Property Name="PropertyName1" Type="Edm.String" Nullable="false" MaxLength="12" sap:label="Label Name1" sap:creatable="false" sap:updatable="false" sap:sortable="false" sap:filterable="false"/>

<Property Name="PropertyName2" Type="Edm.Edm.Decimal" Nullable="false" MaxLength="4" sap:label="Label Name2" sap:creatable="false" sap:updatable="false" sap:sortable="false"/>

<Property Name="PropertyName3" Type="Edm.DateTime" Nullable="false" MaxLength="30" sap:label="Label Name3" sap:creatable="false" sap:updatable="false" sap:sortable="false"/>

</EntityType>

<EntityContainer Name=" NameSpace _Entities" m:IsDefaultEntityContainer="true">

<EntitySet Name="EntitySetName" EntityType=" NameSpace.EntityTypeName" sap:creatable="false" sap:updatable="false" sap:deletable="false" sap:pageable="false" sap:content-version="1"/>

</EntityContainer>

<atom:link xmlns:atom="http://www.w3.org/2005/Atom" rel="self" href="http://URL/$metadata"/>

<atom:link xmlns:atom="http://www.w3.org/2005/Atom" rel="latest-version" href="http://URL/$metadata"/>

</Schema>

</edmx:DataServices>

</edmx:Edmx>

In my component.js,

I initialize my model with ”oRefModel” because I used multimodel so I give reference name for that model.And for setting model I used this.setModel() and sap.ui.getCore().setModel() because sometimes, In .xml this.getModel() not working properly and .js sap.ui.getCore().getModel() not working properly.

              var sServiceUrl = "URL";

              var oModel = new sap.ui.model.odata.ODataModel(sServiceUrl, true);

              this.setModel(oModel, "oRefModel");

              sap.ui.getCore().setModel(oModel, " oRefModel ");

In my .xml view,

                Here, you can bind using any one of way.

Way1. Absolute Binding

1. For the Properties starts with “sap:” bindings like sap:label , sap:creatable etc,..

                Example,

                <Label text="{oRefModel>/#EntityTypeName/PropertyName1/@sap:label}"></Label>

2. For the Properties does’t starts with “sap:” bindings like MaxLength , Type, etc,..

Example,

<Input maxLength="{oRefModel>/#EntityTypeName/PropertyName1/@maxLength}" />.

type="{oRefModel>/#EntityTypeName/PropertyName1/@type"}"

In metadata MaxLength , Type are in capital letters but in that name you can’t get the metadata values.

If you get the metadata in debug mode, there you will see these properties with small letters like mexLength, type, etc..,

Here, #-referred address,

oRefModel>/#EntityTypeName – refered the direct path to the properties.

Way2. Relative Binding

1.  For the Properties starts with “sap:” bindings like sap:label , sap:creatable etc,..

                Example,

                <Label text="{oRefModel>/EntitySetName/PropertyName1/#@sap:label}"></Label>

2. For the Properties does’t starts with “sap:” bindings like MaxLength , Type, etc,..

Example,

<Input maxLength="{oRefModel>/EntitySetName/PropertyName1/0/#@maxLength"}" />.

type="{oRefModel>/EntitySetName/PropertyName1/0/#@type"}"

In metadata MaxLength , Type are in capital letters but in that name you can’t get the metadata values.

If you get the metadata in debug mode, there you will see these properties with small letters like mexLength, type, etc..,

Here, #-referred address,

oRefModel>/ EntitySetName – refered the in-direct path to the EntityType.

See in metadata file,

<EntitySet Name="EntitySetName" EntityType=" NameSpace.EntityTypeName" sap:creatable="false" sap:updatable="false" sap:deletable="false" sap:pageable="false" sap:content-version="1"/>

So, its indirect path, half path or relative path to access the metadata properties.

Note: 

In backend “PropertyName2”  is of Type="Edm.Edm.Decimal" so <Input maxLength="{oRefModel>/#EntityTypeName/PropertyName2/@maxLength}" /> will work.

<Property Name="PropertyName2" Type="Edm.Edm.Decimal" Nullable="false" MaxLength="4" sap:label="Label Name2" sap:creatable="false" sap:updatable="false" sap:sortable="false"/>

In backend “PropertyName1”  is of Type="Edm.Edm.String " so <Input maxLength="{oRefModel>/#EntityTypeName/PropertyName1/@maxLength}" /> will not work.

<Property Name="PropertyName1" Type="Edm.Edm.String " Nullable="false" MaxLength="4" sap:label="Label Name2" sap:creatable="false" sap:updatable="false" sap:sortable="false"/>

For that you need to convert string to integer bec now the MaxLength is comes in String Format but MaxLength Property will allow only integer. so it will give error.

For that convert you can use formatter or else any other methods.

<Input maxLength="path :’{oRefModel>/#EntityTypeName/PropertyName1/@maxLength}’ formatter:”call your formatter method”" />

Reference- Property Metadata Binding - UI Development Toolkit for HTML5 (SAPUI5) - SAP Library

Regards,

Santhosh Gowda