Santhosh Gowda

June 13, 2015 4 minute read

Metadata Binding in UI5

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>

</EntityType>

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

</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,

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.

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

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

4 Comments

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

Nick Yang

March 8, 2017 at 12:28 am

I came across the same issue that is mentioned in the bottom of the blog.

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'" />

I use JS built-in function 'parseInt' to convert string to integer.

So, it is looking like this:

<Input maxLength="path:'{oRefModel>/#EntityTypeName/PropertyName1/@maxLength}' formatter:'parseInt'"/>

simple and easy.

Denis MUZHZHUKHIN

August 21, 2018 at 10:35 am

how did you get it working?

maxLength={path:'{oRefModel>/#EntityTypeName/PropertyName1/@maxLength}', formatter:'parseInt'}"

brings undefined value to formatter

Dominik Augustin

November 26, 2018 at 8:21 am

Hi Denis,

remove the inner { }.

At least for me:

maxLength="{path: '/#Checkpoint/Costobj/@maxLength', formatter: 'parseInt'}"

works.

Note that i'm using the default model, so if you're on a named model, prefix the path like:

maxLength="{path: 'otherModel>/#Pruefpunkt/Kostentrg/@maxLength', formatter: 'parseInt'}"

If you're using a custom formatter it would be .className.function .

Kind regards

Dominik

Former Member

March 27, 2018 at 8:38 am

Hi Santhosh,

I am facing an issue and came across your blog. You, being an expert on this topic, I would really appreciate if you could point out what I have to do to take care of the following issue:

We have an Entity which has a property called EndTimestamp, type of this EndTimestamp is a complex type called DTimestamp. EndTimestamp property has a sap:lable annotation.

<Property Name="EndTimestamp" Type="com.sap.hc.pe.programmanager.DTimestamp" sap:label="End Date"/>

the above-mentioned type DTimestamp is a complex type and is defined in the metadata as given below:

<ComplexType Name="DTimestamp">
<Property Name="UtcTimestamp" Type="Edm.DateTime"/>
<Property Name="TimezoneUtcOffsetInSeconds" Type="Edm.Int32"/>
</ComplexType>

With above set up we are not able to consume sap:label annotation present in EndTimestamp property.

When I check the aBinding aggregation of OData Model, I see that for EndTimestamp property. value is undefined. Could you please suggest what should be done here to take care of this.

My understanding is that since Type is not a simple type, that is the reason why sap:label annotation is not consumable.

Thanks a lot!

Aman

Metadata Binding in UI5

Assigned Tags