sap/openui5

OpenUI5 lets you build enterprise-ready web applications, responsive to all devices, running on almost any browser of your choice.

OpenUI5. Build Once. Run on any device.

What is it?

OpenUI5 lets you build enterprise-ready web applications, responsive to all devices, running on almost any browser of your choice. It's based on JavaScript and follows web standards. It eases your development with a client-side HTML5 rendering library including a rich set of controls and supports data binding to different data models (JSON, XML and OData).

And... it's free and open source: OpenUI5 is licensed under the Apache License, Version 2.0 - see LICENSE.txt. It also contains third-party open source modules. See the list and respective licenses in THIRDPARTY.txt. Third-party module license information is also available in machine-readable format in the .reuse/dep5 file.

Try it!

Check out our control playground as well as a number of sample applications.

Get it!

Go to the download page and get the complete UI5 runtime and the UI5 SDK containing the documentation and many example apps as well as the complete runtime.

Or use UI5 Tooling, the recommended tool for working with OpenUI5! It allows you to manage your framework dependencies and to build optimized packages for all applications, components and libraries. Get started here.

Get started!

Try the Hello World, read the Developer Guide and refer to the API Reference. Use App Templates as a foundation for your developments (available in SAP Business Application Studio or here on GitHub). Check out the SAP Community Forum for 20,000+ questions and answers and stackoverflow (use the tag "sapui5") to discuss code-related problems and questions. Or join the OpenUI5 Slack.

Hack it!

You can get the sources and build UI5 on your own, please check the documentation for the UI5 development setup. You might then want to understand how control libraries are structured and controls are developed. Maybe there's a bug you could analyze and fix?

openui5's Issues

sap.m.Dialog using xmlview as content issue

I am trying to use a sap.m.Dialog popup where the contents comes from a view, because fragments does not fully allow using custom controller.

The basic things are working as expected, but the controller fire onInit, but does not fire onAfterRendering (no output in lifecacle event!?!).

I tried to attach ValdiationError/Success handler, but the dialog input fields does not fire Validation errors!

All the code works well for Pages inside apps, but i think there is something wrong with Dialogs using Views.

The core models are also not available inside the view.
For my app/pages this works out-of-the-box.

After workaround
oView.setModel(oCore.getModel("i18n"), "i18n");
i am able to access i18n model inside view.

So i think there is something going wrong in the core.

I am not able to reproduce this easily for you on jsbin because using views, but i added the main used logic. I also tried to stripdown the view to dialog/input only but got the same result (thaught the issues are inside simpleform or gridlayout).

The Dialog is shown using

if (!this._selfregistrationView) {
    this._selfregistrationView = sap.ui.xmlview(
        "selfregistration-view", "view.login.SelfregistrationDialog"
    );
}
this._selfregistrationView.byId("selfregistrationDialog").open();

The controller looks like this:

var oCtrl = sap.ui.controller("view.login.Selfregistration", {
    onInit: function() {
        var oView = this.getView(),
            oCore = sap.ui.getCore();

        console.log("onInit");
        oCore.attachValidationSuccess(this.onValidationSuccess, this);
        oCore.attachValidationError(this.onValidationError, this);

   var oViewModel = new sap.ui.model.json.JSONModel();
        oViewModel.setData({
            username: "Holger",
        });
        oView.setModel(oViewModel);
        oView.setModel(oCore.getModel("i18n"), "i18n");

    onAfterRendering: function() {
        console.log("onAfterRendering");
    },

onValidationSuccess : function(oEvent) { 
      console.log("onValidationSuccess");
      if (oElement.setValueState) oElement.setValueState(sap.ui.core.ValueState.None);
    },

    onValidationError : function(oEvent) {
        console.log("onValidationError");
        if (oElement.setValueState) oElement.setValueState(sap.ui.core.ValueState.Error);
    }
});

The XML view is something like

<core:View controllerName="view.login.Selfregistration" 
    xmlns="sap.m"
    xmlns:core="sap.ui.core"
    xmlns:l="sap.ui.layout"
    xmlns:f="sap.ui.layout.form" >
    <Dialog title="{i18n>UME_SELFREGISTRATION_TITLE}" icon="sap-icon://activity-individual"
        id="selfregistrationDialog"
        contentWidth="96%" contentHeight="96%" stretchOnPhone="true">
        <content>   
            <l:Grid defaultSpan="L12 M12 S12" xwidth="auto">
                <l:content>
                    <f:SimpleForm id="SimpleForm" class="editableForm" 
                        xminWidth="1024" maxContainerCols="2" editable="true" layout="ResponsiveGridLayout"
                        labelSpanL="3" labelSpanM="3" emptySpanL="0" emptySpanM="0" columnsL="2" columnsM="2">
                        <f:content>
                            <core:Title text="{i18n>GENERAL}" />
                            <Label text="{i18n>UME_USER_NAME}" required="true" />
                            <Input id="username" name="username" placeholder="{i18n>UME_USER_USERNAME}"
                                valueStateText="Min 2 chars"  
                                value="{
                                    path: 'username',
                                    type: 'sap.ui.model.type.String',
                                    constraints: {
                                        minLength: 2,
                                        search: '^(?=[\\w\\d]{5,}$)'                                            
                                    }                           
                                }" >
                        </f:content>
                    </f:SimpleForm>
                </l:content>
            </l:Grid>
        </content>
        <beginButton>
            <Button text="{i18n>REGISTER}" type="Accept" icon="sap-icon://accept" press="onDialogSubmitButton" />
        </beginButton>
        <endButton>
            <Button text="{i18n>CANCEL}"  type="Reject" icon="sap-icon://sys-cancel" press="onDialogCancelButton" />
        </endButton>        
    </Dialog>
</core:View>

Maybe i am doing something wrong or Dialog Popups are not supported, but everything is working as expected but the core event handling seems to fail (Input field validation) and also some lifecycyle hooks like onAfterRendering are not fired. Event the global model is not accessible from dialog view.

Any Idea?

xsd files for XML validation not found

When building XML views for UI5 it is very helpful to have the xsd to validate, aid with build, yet I cannot find these in the openUI5 downloads.

Could these be added?

Bug about open UI5 control sap.ui.ux3.CollectionInspector

Hi,

For UI5 control sap.ui.ux3.CollectionInspector, there is one property "fitParent", according to the API documentation, if it's set as true, the control will try to fit the parent control. In my example(refer to: http://jsbin.com/jeqahuxi/1), I put it into the second panel of one horizontal splitter control(distribute the height as 14% and 86%), I suppose if I set "fitParent" as true, it will occupy 86% height of visible body page, which is equal to its parent's height, but actually it will occupy the 100%, and I checked the style in debug mode, the div for CollectionInspector has the following style info:
position: absolute,
top: 0
left: 0
right: 0
bottom: 0

I believe there is a bug to calculate the style for fitParent, the correct way should check the size and position of its parent control and set the relative position and percentage. Any feedbakc is highly appreciated!

Regards
Patrick

test bug

test

sap.m.FlexBox center alignment issue in chrome (1.20.4)

Trying to center align sap.m.Link with other widgets, link will always be out of line.

Currently links will be rendered correctly with disabled
display: inline-block;
that is different to the other widgets like Text, CheckBox, etc.

I do not know the reason but i think it is a small ui issue that can be fixed inside css.

sap.m.TextArea does not show valueState (chrome)

Currenllty the sap.m.TextArea does not hover/show a ValueState for errors, if i am using it inside a DialogBox (maybe a general issue).

http://jsbin.com/pukum/3/edit

There are also layout issues for sap.m.Inpout concerning fast clicking into input field, where state div will not be hidden correctly.

Reproduceable by multiclicking into input.

All issues seen in Chrome.

Cheers Holger

demoapps.html is blank

I just downloaded the SDK. The demoapps.html page is blank
except for the title "Demo Applications". Also I see lots of interesting stuff under
\test-resources\sap\ui\core\samples but no explanation of how to run the samples.

sap.ui.ux3.Shell more than 2 level workset

Hello Guys,
Thank you for this great job.

By the way i noticed that in the Shell control we are able to put only 2 levels of worksets, for example:

1. Sales:
   a. Invoice
   b. Orders
2. Customers
   a. Contacts
   b. Activities

but in my case i should have the following structure:

1. Sales:
   a. Invoice
   * New Invoice
   * Open Invoices
   b. Orders
   * New Orders
   * Open Orders
2. Customers
   a. Contacts
   b. Activities

I tried to implement this by attach a callout to the header workset and put in the callout a Tree contains my sub level menu.

The problem of my solution that if i click on the header or choose something in the tree the active workset must set in the code also the design is not so nice.

could you please think about something like this, so on the HOVER we have the sub-worksets (more than one level) and if we click on the header workset it could be nice to have option to show the Tree and not the Page of the clicked workset.

please if there is anything not clear don't hesitate to ask me,

sap.m.Input ui padding issue on valueState != none

There is a cosmetic padding issue on on input fields placeholder using valueState error.

When i implemented a form validation that automatically highlights all binded validation errors, the layout is visually shifted.

Live example (chrome issue, but i think general browser issue)
http://jsbin.com/gehowera/8/edit?html,output

The issue:
The default input padding is
padding: 0 0.75;

The highlighted padding is
padding: 0.563rem 0.563rem 0.5rem 0.563rem;

My Workaround
padding: 0 0.7rem /* best fit for me */

The problematic thing is that the border size is changed on highlight to 2px, but the padding is handled global relatively "rem".
Issue depends on placeholder and value.

Maybe your css guru's have a better solution for this ;-)

Class-Databinding in XML-Views not working

I can't set new CSS-classes dynamically via data-binding to a list item. It renders the path as a name directly in the class attribute.

For reproduction I made an easy example:

index.html

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" type="text/javascript"
            id="sap-ui-bootstrap"
            data-sap-ui-libs="sap.m, sap.ui.commons"
            data-sap-ui-theme="sap_bluecrystal"
            data-sap-ui-xx-bindingSyntax="complex">
        </script>
    </head>
    <body class="sapUiBody">
        <div id="content"></div>
    </body>
    <script>
        jQuery.sap.registerModulePath("page", "page/");
        sap.ui.xmlview("app", "page.App").placeAt("content");
    </script>
</html>

App.view.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE View>
<mvc:View controllerName="page.App" xmlns:m="sap.m" xmlns:core="sap.ui.core"
          xmlns:mvc="sap.ui.core.mvc" xmlns:html="http://www.w3.org/1999/xhtml">
    <m:App>
        <m:Page title="My App">
            <m:content>
                <m:List items="{listData>/entries}">
                    <m:items>
                        <m:StandardListItem title="{listData>title}" class="{listData>className}" />
                    </m:items>
                </m:List>
            </m:content>
        </m:Page>
    </m:App>
</mvc:View>

App.controller.js

sap.ui.controller("page.App", {
    onInit: function () {
        var listData = {
            entries: [
                {title: "Entry 1", class: "css1"},
                {title: "Entry 2", class: "css2"},
                {title: "Entry 3", class: "css3"}
            ]
        };

        var listDataModel = new sap.ui.model.json.JSONModel();
        listDataModel.setData(listData);
        this.getView().setModel(listDataModel, "listData");
    }
});

sap.m.Explored MessageBox example wrong usage of dialog icon

The sap.m.Explored example
https://sapui5.netweaver.ondemand.com/sdk/test-resources/sap/m/demokit/explored/index.html#/code/sap.m.sample.MessageBox

shows a wrong usage of dialog icon.

The used icon
"sap-icon://hint",
is not working, because it has to be of type "sap.m.MessageBox.Icon".

So replacing it by
sap.m.MessageBox.Icon.INFORMATION
(without ")

would show the expected icon.

Cheers Holger

IconTabBar: problems hiding an IconTabFilter

OpenUI5 version: 1.18.9

Browser/version (+device/version): Chrome 33.0.1750.154 m

Any other tested browsers/devices(OK/FAIL): Chrome Mobile (Fail)

URL (minimal example if possible): http://jsbin.com/lexax/1/edit

User/password (if required and possible - do not post any confidential information here):
./.

Steps to reproduce the problem:

1. run the above example and press "Hide"

What is the expected result?
After pressing "Hide" the content of the first IconTabFilter should be hidden as well

What happens instead?
The content of the first IconTabFilter stays visible

FlexBox Issue On Chrome

OpenUI5 version:

Browser/version (+device/version): Version 34.0.1847.131 m

Any other tested browsers/devices(OK/FAIL): FireFox

URL (minimal example if possible): http://jsbin.com/jelexizo/8/edit

User/password (if required and possible - do not post any confidential information here):

Steps to reproduce the problem:

1. Created a nested FlexBox with ScrollContainer with one of the containing controls
2. Run the sample on chrome and Firefox
3. The output on chrome is incorrect but the outcome on Firefox is correct

What is the expected result? The layout should render correctky in Flexbox to include ScrollContainer correctly

What happens instead? The ScrollContainer is thrown out side the layout

Any other information? (attach screenshot if possible) The code and running sample are available here:

http://jsbin.com/jelexizo/8/edit

RowRepeater does not work with named binding

First off, thanks for all this work, guys. 👍 Maybe (as soon as source code will get pushed to Github) I will collaborate as well... At the moment this feels a bit... cumbersome... But back on topic.

OpenUI5 version: 1.20.7

Browser/version (+device/version): Chromium 37.0.2030.0 (274795)

Any other tested browsers/devices(OK/FAIL): Chrome (most recent), IE9, Firefox (most recent) - all fail.

URL (minimal example if possible): http://jsbin.com/wudazika/2/edit

Steps to reproduce the problem:

1. Open the JSBin
2. change line "sap.ui.getCore().setModel("rowModel", oModel);" to "sap.ui.getCore().setModel(oModel);"
3. change line "oRowRepeater.bindRows("rowModel>/data", oRowTemplate);" to "oRowRepeater.bindRows("/data", oRowTemplate);"

or simply have a look at this JSBin: http://jsbin.com/wudazika/3/edit

What is the expected result? RowRepeater should take the named binding and display given data.

What happens instead? RowRepeater does not display data. Haha, who would have thought?

Any other information?
So far I am quite new to UI5.
But probably I am able to provide more information if I have some time to dig deeper in the coding over the next days..

If I missed something please let me know...

Best regards..
tobiaswerner

sap.m.Input suggestions popup opens when Value Help Icon clicked on Cordova

Also reproducible on "sap.m Explored" on SDK site (with sap-ui-xx-fakeOS=iphone):
https://sapui5.netweaver.ondemand.com/sdk/test-resources/sap/m/demokit/explored/index.html?sap-ui-xx-fakeOS=iphone#/sample/inputAssisted

Browsers: Cordova iOS

Expected result: suggestion popup does not open when Value Help icon clicked.

Works as expected on Mobile Safari, but not on cordova.

To Reproduce:
-Running on cordova and also in desktop browser in phone mode
-sap.m.Input control with both showSuggestion and showValueHelp

When the value help icon is clicked, the suggestion popup opens first and then the value help dialog on top.

This causes the virtual keyboard to open and close quickly.

Then when an item is clicked from the value help dialog the suggestion popup remains open (and also does not have the new selected value). When it is closed, it reverted the value assigned in the closing of the value help dialog.

TypeError extending static function object with inheritance level > 1

OpenUI5 version: latest

Browser/version (+device/version): Chrome, Firefox, latest versions

Any other tested browsers/devices(OK/FAIL):

URL (minimal example if possible):

User/password (if required and possible - do not post any confidential information here):

Steps to reproduce the problem:

1. Create new module FirstPanelRenderer that extends sap.ui.commons.PanelRenderer
2. Create new module SecondPanelRenderer that extends FirstPanelRenderer

What is the expected result? When using SecondPanelRenderer, expect this to work properly without an exception

What happens instead? Get following exception:
"Uncaught TypeError: Cannot read property 'apply' of undefined Renderer.js:7:168"

Any other information? (attach screenshot if possible)
Possible fix could be to add following code to sap.ui.core.Renderer.extend:
oChild['_super'] = oParentClass;
(can be added before the extend() API returns; to reset the _super property to parent renderer object.)

The "TDG" (the definite guide) demo app fails

The "TDG" (the definite guide) demo app (https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/tdg/index
.html) demonstrating the newly documented "Application Best Practices" fails to load because the proxy in uilib-sample is hardcoded, so it accesses
https://openui5.hana.ondemand.com/uilib-sample/proxy/http/services.odata
.org/V2/(S(sapuidemotdg))/OData/OData.svc/$metadata

(UI5 version 1.20.5)

Does odata.org support CORS? Then it might be sufficient to check for
the existence of the proxy with HEAD request and just not use the proxy
when it is not there.

sap.m.Input._doSelect has inconsistent return types: void & this

In openui5-runtime-mobile-1.20.6.zip\resources\sap\m\Input-dbg.js, line 785, _doSelect has inconsistent return types:
"return;" in line 787
"return this;" in line 796

/**
 * Selects the text of the InputDomRef in the given range
 * @param {int} [iStart=0] start position of the text selection
 * @param {int} [iEnd=<length of text>] end position of the text selection
 * @return {sap.m.Input} this Input instance
 * @private
 */
sap.m.Input.prototype._doSelect = function(iStart, iEnd){
    if(sap.ui.Device.support.touch){
        return;
    }
    var oDomRef = this._$input[0];
    if (oDomRef) {
        //if no Dom-Ref - no selection (Maybe popup closed)
        var $Ref = this._$input;
        oDomRef.focus();
        $Ref.selectText(iStart?iStart:0, iEnd?iEnd:$Ref.val().length);
    }
    return this;
};

Data binding using maxFractionDigits doesn't restrict value stored in model

OpenUI5 version: Version available from https://openui5.hana.ondemand.com/resources/sap-ui-core.js

Browser/version (+device/version): Replicated on Chrome and Firefox on Desktop.

Any other tested browsers/devices(OK/FAIL): N/A

URL (minimal example if possible):

User/password (if required and possible - do not post any confidential information here): N/A

Steps to reproduce the problem:

1. Create a data binding that specifies a maxFractionDigits value
2. Run the app and enter in more fraction digits than allowed above
3. Examine the resulting value stored in the model

What is the expected result?
Given this data binding:

value: {
path: "value",
type: new sap.ui.model.type.Float({
maxFractionDigits: 2
})
}

One would expect that the value of the associated control (e.g. sap.m.Input)
would only accept a maximum of 2 digits after the decimal place.

What happens instead?
It turns out that this only applies to formatting, not to parsing. If I enter a value of 10.556, the control will display 10.55 but the value saved in the underlying model is 10.556. This leads to unexpected behavior because the user sees one value, but the system is using a different value under the covers.

I'm not sure whether this should be considered a validation error, or if it should just truncate/round the value to the appropriate number of digits. I would vote for truncate/round, but I guess that is a usability decision.

Any other information? (attach screenshot if possible)

Custom theming no more possible in v1.20.4 (missing base.less)

Using 1.18.12 i was able to automatically change blue_theme properties using ant and compile it using less. This was quit nice because i was able to recreate theme on library updates.

Inside 1.20.4 there is a line

@import "../../../../../Base/baseLib/baseTheme/base.less";

including some base parts that are not part of the SDK?!?

I think to be able to create your custom theme this file should also be part of the sdk!

Besides SAPUI5 using the server side theme generator i think inside openui5 it should be possible to create custom themes using less!

Cheers Holger

jQuery.sap.focus and iOS keyboard issue

Currently using
jQuery.sap.focus(oDomRef)
will work as expected but has some issues on iOS devices.

If it is fired onAfterRender sap.m.Input will be focused as expected, but iOS keyboard will not be shown.

As a workaround, i can use:

var oElement = jQuery.sap.byId("myInput");
Query.sap.delayedCall(100, oElement, "focus");

Now the input will be focused and the iOS keyboard will shift my layout up so that current focused input will be visible above keyboard.

I think the general behavior should not be changed, but what about a convenience function like

jQuery.sap.focus(oDomRef, iDelay)
where the focus can be delayed via param (default: 0).

Maybe it would also be clever to use combined iDelay|bDelay where true means an optimal delay across all devices. For me, 100 did the iOS trick but maybe there is someone who knows a better way.

This is the way Sencha did it:

Ext.Component.focus( [selectText], [delay], [callback], [scope] )

What do you mean?

Cheers Holger

Typo in documentation

OpenUI5 version: Online version: openui5.hana.ondemand.com

URL: https://openui5.hana.ondemand.com/#docs/api/symbols/sap.ui.layout.form.ResponsiveGridLayout.html

Steps to reproduce the problem:
2nd sentence: Internally the Grid is used. On the FormContainers, Labels and Fields GridData can be used to cahnge the default rendering

cahnge -> should be change

sap.m.Bar not responsive

Hi,

it may well be part of the design and an accepted limitation of the control,

But when bars are used (as header/footers of pages, or just as an item in a page) if the page is resized such that the content of the bar no longer fits, there is no easy way to access the overflowing content:

e.g. http://jsbin.com/juwuj/3/

I would expect that if a bar could not display all its content that it would implement some scrolling to allow access to the content - like the IconTabBar I've added

Or would start wrapping the content , more in the manner of the buttons that I've added under the bar in a scroll container.

In the meantime I can achieve a responsive option by styling the content of a scroll container or build my own custom bar control.

I'm pretty sure you'll flag this as an enhancement rather than a bug, but I'm not sure the sap.m.Bar is a good pattern to encourage until it becomes responsive.

Thanks,

Chris

sap.m.List doesn't redisplay items when filtered model has bindings and the data changes

OpenUI5 version: Latest version

Browser/version (+device/version): Tested on latest Chrome/Firefox/IE

Any other tested browsers/devices(OK/FAIL):

URL (minimal example if possible):http://jsbin.com/hinaw/1/edit

User/password (if required and possible - do not post any confidential information here): N/A

Steps to reproduce the problem:

1. Run the jsbin sample and note the List is filtered down to 1 item (from 3 total)
2. Press the Toggle button to change the data and toggle the filtered state of each item.
3. Note that the list, which is bound to the filtered property, doesn't update to reflect the modified data.

What is the expected result? There's a binding on the data, and it's expected that when the data is changed, the bindings are triggered and would force the list to redisplay and apply the filter against the new data.

What happens instead? The list doesn't reapply the filter and redisplay the data. You can call the model's refresh method or make a call to update the bindings in order to redisplay the filtered data, but it's expected that the binding should take care of that for us.

Any other information? (attach screenshot if possible)

sap.m.SearchField clear is running the search

I'm using the sap.m.SearchField. When I click the (x) icon, it actually executes the search.
Same result if I run the .clear() method on the control (which is not a documented method though).

I checked the control source, and it seems to be the intentional behaviour. But it seems odd to me and to my users.

sap.m.SearchField.prototype.clear = function(){
    if(!this._inputElement || this.getValue() == "") return;
    this.setValue("");
    this.fireLiveChange({newValue: ""});
    this.fireSearch({query: ""}); // <-----------why?
};

Currently I override the method in my controller as a workaround.

Segmented button fails to identify selected button -> crashes

Hi, sorry, I will try to add more detail at a later date, in a bit of a rush.

I have this my XML view def:

<html:div id="grid-header-container">
    <html:div id="grid-layout-option-container">
                    <SegmentedButton id="grid-layout-option-container-seg-button"
                        selectedButton="list">
                        <Button id="list" text="List View" />
                        <Button id="btn-layout-option-network" text="Network View" />
                    </SegmentedButton>
                </html:div>
                         </html:div>

The control for some reason thinks that the id of the selected button is
pagename--grid-header-container--list

when in fact it is

pagename--list

error occurs:

How to get Vkontakte Login authentication and get user all Upload photos

"Shopping Cart" demo app fails to display any data

The "Shopping Cart" demo app at

https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/cart/inde
x.html?responderOn=true

fails because it has "/uilib-sample/proxy/..." hartcoded and hence accesses

https://ESPM_TEST:[email protected]/uilib-sample/proxy/
http/ec2-54-225-119-138.compute-1.amazonaws.com:50000/sap
/opu/odata/IWBEP/EPM_DEVELOPER_SCENARIO_SRV/$metadata

Internally tracked as 0120031469 0000492413 2014.

Theming issues using SAP Theme Designer 1.20

SInce my theming issue #42 is still in the work (missing Base less), i am currently evaluating some customer theme in SAP Theme Designer 1.20.

There is a cloud based Theme Designer so i think i can address this issue here also.

I am trying to build customer dark theme meaning the BaseColor has to be black.
This was no huge task using a custom theme, defining some @variables and replacing some Variables from @sapUiList = darken(...) to lighten(...).

Currently a global switch would be helpful like
@IsDarkTheme = true|false

because darken(#000, 10%) does not make sense (sencha did id the same way ;-).

Besides this little feature Request i tried to fullfuill such theme in Theme Designer.

Issues:

• Currently i am not able to overwrite params that are not part of expert theming. I can not redeclare @sapUiBgListBackground = lighten(...) so that every dependend less part takes care of that
• The custom CSS section is able to support less since 1.20 but it is only appended after the normal theme process, so i can not overwrite/redeclare library widgets. I am able to overwrite base classes like .sapUiBody {} but that would lead to 40 overwrites only for sap.m.lib (things that would be very easy, if overwritting some addtional baseParams would be allowed directly inside theme expert section.
• Exported theme (via /UI5/THEME_TOOL) contains absolute URLs() that are pointing to some base images. I noticed this after downloading and trying to use the theme as SAPUI5 Theme standalone inside my project. I have to manually replace this image URIs like "http://sapecc.domain.de:8000/sap/bc/..." through "/resources/sap/..". I think the downloader should be able to replace absolute refs.

It would be great, if a future update of theme designer would let me overwrite all used @baseParams to be easily able to customize a theme more efficent. Also a global light/dark-Theme-Switch with the corresponding @if constructs at needed places would be helpfull.

Currently theming is a hard task...

Cheers Holger

Typo in documentation on Custom Data

Hi all,

there is a closing bracket missing in documentation on Custom Data.
Please refer to this page: https://openui5.hana.ondemand.com/docs/guide/91f0c3ee6f4d1014b6dd926db0e91070.html

alert(myButton.data("myData");     // alerts "Hello"

should be

alert(myButton.data("myData"));     // alerts "Hello"

Also you should consider "deep linking" your docs.
If I open a link in a new tab I assume the navigation will get displayed as well. People are not able to share links to documentation in a usable manner.

I am not sure if this is a feature but please see this screenshot:

If I search for something the autosuggest-field will not get hidden if I choose a result. It will get stuck to the top left corner. This is reproducable in Chromium (37.0.2030.0 (274795)) and Safari (most recent).

I know the "one issue per issue" request but this refers all to the documentations so I summarized all in here.

Best regards,
tobias

The TDG demo app fails on routing

OpenUI5 version: 1.20.5

The TDG example application in the SDK at test-resources/sap/m/demokit/tdg does not instantiate the custom router MyRouter.js in UIComponent - therefore the custom methods such as myNavToWithoutHash() cannot be found causing the app to fail.

[me.Calendar] wrong style attribute

OpenUI5 version: (sap.ui.version =) "1.18.8"
Browser/version (+device/version): w32/ "Google Chrome 33.0.1750.146 m"

Steps to reproduce the problem:

1. used "me.Calendar" (monthview)
2. view resulting code
3. find "<div class="sapMeCalendarMonth sapMeCalendarMonthNotSingle" style="width:Infinity%"> ... </div>"

What is the expected result?
"width: 100%" is expected

What happens instead?
wrong style attribute was added .. "width: Infinity%" is inadmissible.

sap.m.IconTabBar doesn't support PreserveContent functionality

The sap.m.IconTabBar does not support the PreserveContent functionality of the sap.ui.core.RenderManager. The sap.ui.commons.TabStrip works as expected.

OpenUI5 version: Version available from https://openui5.hana.ondemand.com/resources/sap-ui-core.js

Browser/version (+device/version): Replicated on Chrome and Firefox on Desktop.

Any other tested browsers/devices(OK/FAIL): N/A

URL (minimal example if possible): http://jsbin.com/gaca/47/

User/password (if required and possible - do not post any confidential
information here): n/a

Steps to reproduce the problem:

1. Open the provided jsbin in fullscreen (otherwise the Flash content does not
   play).
2. Type something into the mobile IconTabBar input field in tab one. Go to tab
   two and then back to tab one. The input field disappears.
3. Do the same thing on the desktop TabStrip and the input field is retained.
4. Open Tab 3 on both tabs and you will see a sample Flash play. Switch to
   another tab and the IconTabBar loses the content.
5. Please note, that even though the TabStrip maintains the Flash content, the
   way that it is re-inserted into the DOM results in it being reloaded.

What is the expected result?
I would expect the sap.m.IconTabBar to support the preserve content functionality.

What happens instead?
When switching tabs, content is lost.

Any other information? (attach screenshot if possible)
Both the IconTabBar and TabStrip remove content from the DOM which is an
interesting design decision. Other frameworks we have worked with typically
maintain the DOM structure and just hide/show the appropriate content. A side
effect of the OpenUI5 implementation is that Flash content is always reloaded
and also the developer has to implement the extra step of creating the preserve
content area.

I also think it would be beneficial if the API documentation clearly stated the
DOM behavior and also linked to the PreserveContent functionality so that the
workaround is easy to find.

sap.m.Input - "change" Listener

OpenUI5 version: "1.16.9"
Browser/version (+device/version): w32/ "Google Chrome 33.0.1750.146 m"

Steps to reproduce the problem:

1. used "sap.m.Input"
2. with "change: fnChange" property
3. js-console output: SyntaxError: Unexpected identifier
4. test with "liveChange" works, but i just want to check on focus in/out

What is the expected result?
attach event Listner for "change" events

What happens instead?
Exception with hint: Unexpected identifier

sap.m.IconTabBar.removeItem() : Regression from 1.16.8

OpenUI5 version: 1.18.8+
Browser/version (+device/version): n/a
Any other tested browsers/devices(OK/FAIL): n/a
URL (minimal example if possible):n/a

Steps to reproduce the problem:

The documentation states that the removeItem() function for the IconTabBar takes the item, index or id of the item to be removed. Using the 1.16.8 SDK I used the id. This no longer works and the only type excepted is the item object. Additionally, the doc states that either the item removed or null is returned from the function, which is also no longer true as there is no return function specified in the code.

This prototype was added in 1.18.8 and it does not match the currently documented api:

sap.m.IconTabBar.prototype.removeItem = function(oItem) {
if (!(oItem instanceof sap.m.IconTabSeparator)) {
var sKey = oItem.getKey();
this._aTabKeys.splice(this._aTabKeys.indexOf(sKey) , 1);
}
this.removeAggregation("items", oItem);
};

Either the doc or the code needs to be updated.

Shopping Cart demoapp doesn't load in openui v1.20.4 (sap.me library not found)

The Shopping Cart app uses the sap.me library, which is not part of OpenUI5. This dependency was removed in 1.18 but is still/newly there in 1.20 and maybe also in master.

Reported via https://twitter.com/yonex_nl/status/459256048164278273

Andreas

sap.ui.table.Table column height grows uncontrollable when using browser zoom 175%>

UI5 Version 1.18.10 (built at 20140318-1008)
User Agent Chrome/33.0.1750.154

Reproducable example: http://jsbin.com/vazuz/4/edit

Steps to reproduce:

1. Wait for the table to be loaded. The table itself has lots of columns, and the fixedColumnCount is set at 2.
   (apologies for not using a proper for-loop to generate the columns, for some reason JSBin didn't allow me to use a for loop?!...)
2. Use the browser zoom (Ctrl+Mousewheel) to zoom up to 175% and watch the column headers height grow.
3. If you now zoom back, the growth will stop.

When does this behavior not occur:

1. when eliminating the table's fixedColumnCount property, this behavior does not occur

The error is therefor in the fixedColumnCount property of the sap.ui.table.Table control in conjuction with browser zoom

Incomplete documentation for sap.ui.core.mvc.Controller

Hi,

SAPUI5 1.20.3

the API documentation for sap.ui.core.mvc.Controller seems incomplete.
Eg. there are no events documented.

On the other hand, the developer guide for the controllers is listing the events:
https://sapui5.netweaver.ondemand.com/sdk/#docs/guide/121b8e6337d147af9819129e428f1f75.html

But the link to the API documentation on the bottom of the page is broken.

fixed-height styles results in lousy looking UI.

Hi,
I'm reviewing the controls demo and so many of these samples look real bad. I have my browser font set larger than the default. It is a common error for novice CSS developers to think in terms of pixels, and that is exactly what SAPUI5 did with their CSS. I am hoping that someone has already created a stylesheet which corrects this and would share it.

sap.ui.core.util.MockServer: NaN returned from ODataModel $Count call

OpenUI5 version: 1.16+

Browser/version (+device/version): Chrome / latest

Any other tested browsers/devices(OK/FAIL): IE11 FAIL

URL (minimal example if possible):

example1 : Using Northwind Service
http://htmlpreview.github.io/?https://github.com/jasper07/countissue/blob/master/northwind.html

example2 : using MockServer
http://htmlpreview.github.io/?https://github.com/jasper07/countissue/blob/master/mockservice.html

source
https://github.com/jasper07/countissue

Steps to reproduce the problem:

1. Create an application with an ODataModel Call to return a list of entries from an associated entity (aka navigation property) eg sPath = /Categories(2)/Products
2. Before binding the list to a control determine the number of possible entries
   ODataModel.bindList(sPath).getLength(); //does an OData $Count
3. Mock the service by using sap.ui.core.util.MockServer, copy the metadata xml file and EntityResults.JSON files to be mocked into a folder accesible by application,
   create an instance of MockServer
4. Run the application

What is the expected result?
Expect a number to be returned from the ODataModel.bindList(sPath).getLength()
eg http://services.odata.org/Northwind/Northwind.svc/Categories(2)/Products/$count === 12

What happens instead?
A NaN is returned

Any other information? (attach screenshot if possible)

Debugging the $Count Callback

sap.ui.model.odata.ODataListBinding.prototype._getLength = function() { 
      ....
         function _handleSuccess(oData) {
            that.iLength = parseInt(oData, 10); //<< this line returns NaN

it looks like instead of an integer it returns the parent entity

The features looks like it is supported

// navigation property support
sap.ui.core.util.MockServer.prototype.simulate = function(sMetadataUrl, sMockdataBaseUrl) {
...
jQuery.each(oEntitySet.navprops, function(sKey, oNavProp) {

    // support $count requests on navigation properties
    aRequests.push({
        method : "GET",
        path : new RegExp("(" + sEntitySetName + ")(\\([^/\\?#]+\\))/(" + sKey + ")/\\$count/?(.*)?"),
        response : function(oXhr, sEntitySetName, sKeys, sNavProp, sUrlParams) {
            var oEntry = fnGetEntitySetEntry(sEntitySetName, sKeys);
            if (oEntry) {
                var aEntries = fnResolveNavigation(sEntitySetName, oEntry.entry, sNavProp);
                oXhr.respond(200, { "Content-Type": "text/plain;charset=utf-8" }, "" + aEntries.length);
            } else {
                oXhr.respond(404);
            }
        }
    });

and the right value is found

however i think the issue is Sinon finds multiple matches for the query in the fakeServer.Match.MatchOne and processes them sequentially

1. support $count requests on navigation properties
2. support access of the entity set navigation property (collection)
3. support access of the entry of an entity set (collection)

the results of the last call (3) are what is passed to iLength,

if i switch the order around so
support $count requests on navigation properties === 3
it works for the $count however breaks 2,

the solution i think is to extend the pattern matchers regex in scenaros 2 & 3 to check the path doesnt end or contain $count

hth
jsp

IconTabBar Collapse Error

OpenUI5 version: 1.20.4 + 1.20.5

Browser/version (+device/version): Chrome 34.0.1847.131 m

Any other tested browsers/devices(OK/FAIL): no

URL (minimal example if possible): http://jsbin.com/lexax/4/edit

User/password (if required and possible - do not post any confidential information here): n/a

Steps to reproduce the problem:

1. call above URL in Chrome
2. hide HTML / CSS / Javascript / Console
3. Call Chrome Console (F12)
4. Emulate a mobile device like "Google Nexus 4"
5. reload the page
6. select Icon Tab "Two" and back to "One"
7. try to move the slider (or click anywhere on the screen)

What is the expected result?
No collapsing of the TabBar

What happens instead?
the IconTabBar collapses and you can't move the slider

Any other information? (attach screenshot if possible)
This behaviour is new to 1.20.4 (can't try earlier 1.20 versions) and it doesn't happen in 1.18.12.
I don't know whether this is a Chrome Bug or related to UI5 because on a real mobile device we don't have this problem.

ODataModel issue about to response 501 Not Implemented

I use the example with ODataModel From https://openui5.hana.ondemand.com/#docs/guide/ODataModel.html,

var oModel = new sap.ui.model.odata.ODataModel("http://services.odata.org/Northwind/Northwind.svc/");

Run it, it is load metadata with http request method options, as a result response 501 not implemented.

Please tell me there are ways to change the http request method?

Selecting a custom list item that contain a list does not highlight correctly

OpenUI5 version: 1.18.8

Browser/version Chrome desktop 34

Any other tested browsers/devices(OK/FAIL):
firefox - 26.0 FAIL
IE 11 - FAIL

URL (minimal example if possible):
http://jsbin.com/netud/2/

User/password
n/a

Steps to reproduce the problem:

1. click on one of the list items, the item highlights

What is the expected result?
expect the entire item should highlight

What happens instead?
the part of the item that is the embedded list does not highlight, however the text that is part of the embedded list does turn white (and as such "disappears")

Any other information? (attach screenshot if possible)

Dataset control issues

https://openui5.hana.ondemand.com/#test-resources/sap/ui/ux3/demokit/DataSet.html
With Firefox 27 Windows

First, the three segment buttons have no tooltips so I don't understand what "should" happen when they are selected. The first one, with three column, shows this
. Why is the fifth star on a separate row? Hmm. Let's drill into the HTML and try to figure it out. Here's the HTML

<div id="__layout1-__clone115" data-sap-ui="__layout1-__clone115" class="CustomItemLayout CustomItemLayoutSmall"%gt;<div class="CustomItemLayoutInner"%gt;<div class="CustomItemLayoutTitle"%gt;<img id="__image0-__clone115" data-sap-ui="__image0-__clone115" src="images/PC.png" class="sapUiImg" role="presentation" alt="" tabindex="-1"%gt;<div%gt;<a id="__link0-__clone115" data-sap-ui="__link0-__clone115" class="sapUiLnk" href="javascript:void(0);" tabindex="0"%gt;Deskjet Super Highspeed</a%gt;</div%gt;</div%gt;<div class="CustomItemLayoutCntnt"%gt;<div id="__form0-__clone115" data-sap-ui="__form0-__clone115" class="sapUiForm" style="width:100%" role="form"%gt;<table role="presentation" id="__layout0-__clone115" data-sap-ui="__layout0-__clone115" style="border-collapse:collapse;table-layout:fixed;width:100%" class="sapUiGrid" cellpadding="0" cellspacing="0"%gt;<colgroup%gt;<col span="8"%gt;<col span="8"%gt;</colgroup%gt;<tbody%gt;<tr id="__element0-__clone115" data-sap-ui="__element0-__clone115" class="sapUiFormElement"%gt;<td colspan="5" class="sapUiGridLabel"%gt;<label id="__label0-__clone115" data-sap-ui="__label0-__clone115" for="__field0-__clone115" dir="Inherit" style="text-align:left;" class="sapUiLbl sapUiLblNowrap"%gt;Category</label%gt;</td%gt;<td colspan="11"%gt;<input id="__field0-__clone115" data-sap-ui="__field0-__clone115" readonly="readonly" tabindex="0" dir="Inherit" aria-readonly="true" role="textbox" aria-multiline="false" aria-autocomplete="none" aria-labelledby="__label0-__clone115" style="text-align: left; width: 100%;" class="sapUiTf sapUiTfBack sapUiTfBrd sapUiTfRo" value="PC"%gt;</td%gt;</tr%gt;<tr id="__element1-__clone115" data-sap-ui="__element1-__clone115" class="sapUiFormElement"%gt;<td colspan="5" class="sapUiGridLabel"%gt;<label id="__label1-__clone115" data-sap-ui="__label1-__clone115" for="__field1-__clone115" dir="Inherit" style="text-align:left;" class="sapUiLbl sapUiLblNowrap"%gt;Price</label%gt;</td%gt;<td colspan="11"%gt;<input id="__field1-__clone115" data-sap-ui="__field1-__clone115" readonly="readonly" tabindex="0" dir="Inherit" aria-readonly="true" role="textbox" aria-multiline="false" aria-autocomplete="none" aria-labelledby="__label1-__clone115" style="text-align: left; width: 100%;" class="sapUiTf sapUiTfBack sapUiTfBrd sapUiTfRo" value="944 $"%gt;</td%gt;</tr%gt;<tr id="__element2-__clone115" data-sap-ui="__element2-__clone115" class="sapUiFormElement"%gt;<td colspan="5" class="sapUiGridLabel"%gt;<label id="__label2-__clone115" data-sap-ui="__label2-__clone115" for="__indicator0-__clone115" dir="Inherit" style="text-align:left;" class="sapUiLbl sapUiLblNowrap"%gt;Rating</label%gt;</td%gt;<td colspan="11"%gt;<div style="width: 100%; overflow: hidden;" aria-label="Rating" aria-valuetext="Value 3" aria-valuenow="3" id="__indicator0-__clone115" data-sap-ui="__indicator0-__clone115" class="sapUiRating" tabindex="0" title="3" aria-readonly="true" role="slider" aria-orientation="horizontal" aria-valuemin="1" aria-valuemax="5" aria-disabled="true" aria-live="assertive" aria-labelledby="__label2-__clone115"%gt;<div id="__indicator0-__clone115-itm-1" itemvalue="1" class="sapUiRatingItm" style="line-height:0px;"%gt;<img class="sapUiRatingItmImg" src="../../../../../resources/sap/ui/commons/themes/sap_bluecrystal/img/rating/star_selected.png"%gt;<div class="sapUiRatingItmOvrflw" style="width:0%;"%gt;<img class="sapUiRatingItmOvrflwImg" src="../../../../../resources/sap/ui/commons/themes/sap_bluecrystal/img/rating/star_unselected.png"%gt;</div%gt;</div%gt;<div id="__indicator0-__clone115-itm-2" itemvalue="2" class="sapUiRatingItm" style="line-height:0px;"%gt;<img class="sapUiRatingItmImg" src="../../../../../resources/sap/ui/commons/themes/sap_bluecrystal/img/rating/star_selected.png"%gt;<div class="sapUiRatingItmOvrflw" style="width:0%;"%gt;<img class="sapUiRatingItmOvrflwImg" src="../../../../../resources/sap/ui/commons/themes/sap_bluecrystal/img/rating/star_unselected.png"%gt;</div%gt;</div%gt;<div id="__indicator0-__clone115-itm-3" itemvalue="3" class="sapUiRatingItm" style="line-height:0px;"%gt;<img class="sapUiRatingItmImg" src="../../../../../resources/sap/ui/commons/themes/sap_bluecrystal/img/rating/star_selected.png"%gt;<div class="sapUiRatingItmOvrflw" style="width:0%;"%gt;<img class="sapUiRatingItmOvrflwImg" src="../../../../../resources/sap/ui/commons/themes/sap_bluecrystal/img/rating/star_unselected.png"%gt;</div%gt;</div%gt;<div id="__indicator0-__clone115-itm-4" itemvalue="4" class="sapUiRatingItm" style="line-height:0px;"%gt;<img class="sapUiRatingItmImg" src="../../../../../resources/sap/ui/commons/themes/sap_bluecrystal/img/rating/star_selected.png"%gt;<div class="sapUiRatingItmOvrflw" style="width:100%;"%gt;<img class="sapUiRatingItmOvrflwImg" src="../../../../../resources/sap/ui/commons/themes/sap_bluecrystal/img/rating/star_unselected.png"%gt;</div%gt;</div%gt;<div id="__indicator0-__clone115-itm-5" itemvalue="5" class="sapUiRatingItm" style="line-height:0px;"%gt;<img class="sapUiRatingItmImg" src="../../../../../resources/sap/ui/commons/themes/sap_bluecrystal/img/rating/star_selected.png"%gt;<div class="sapUiRatingItmOvrflw" style="width:100%;"%gt;<img class="sapUiRatingItmOvrflwImg" src="../../../../../resources/sap/ui/commons/themes/sap_bluecrystal/img/rating/star_unselected.png"%gt;</div%gt;</div%gt;</div%gt;</td%gt;</tr%gt;</tbody%gt;</table%gt;</div%gt;</div%gt;</div%gt;</div%gt;

Finding issue is the proverbial haystack -even when using Firebug. What is that colspan=11 doing? Well increasing it make the fifth star move onto the correct row.

~ 5K+ bytes to so show a box with several words and a row of stars? That's a serious case of div-itis and attribute-itis.

Selecting the third button shows this:

I'm not even sure how it's supposed to be displayed.

This is meant as constructive criticism. I think OpenUI5 is a terrific contribution. But with CSS and HTML, the devil's in the details.

• Chris

sap.m.splitapp master button not available on iphone ios 7.1

The 1.18.11 Demo SplitApp
https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/splitapp/index.html
does not show a Master Button on iphone!

I am only able to see the detail page section on iphone.

Maybe the master button rendering is wrong or something with the new used router approcach.

If i understood right, sap.m.splitapp supports browsers, pads and phones also as unified navigation approach.

I also testet 1.18.11 concerning the fix
[FIX] sap.m.SplitContainer/SplitApp: recreate showMasterButton when it's destroyed during page navigation.

Also chrome iphone emulator does not render a master button inside header.

Cheers Holger

[sap.m.Label] placed in sap.m.Column - wrong textAlign

OpenUI5 version: 1.18.8
Browser/version: Google Chrome 35.0.1883.0 canary

URL (example): http://jsbin.com/diyaxibu/1/edit?js,output

What is the expected result?
style: "width:100%; text-align:right"

What happens instead?
style: "width:100%; text-align:left"

Any other information?
using a standalone label will create correct html code, using label in Table/Column the text-align is set to left.

SelectDialog Search Event is not fired

OpenUi5 Version 18.8.

Browser/version (+device/version):
Desktop Chrome Version 34.0.1847.116 m
Desktop Firefox 28.0

CodeExample:
Community Code Example:
https://gist.github.com/anonymous/9078332

own Code:
var addDialog = new sap.m.SelectDialog("AddDialog", {
title: "Products",
items: {
path: "/ProductCollection",
template: new sap.m.StandardListItem({
title: "{Name}",
description: "{ProductId}"
})
},
confirm: handleClose,
search: function(evt){
console.log("search");
},
cancel: function(){
}
});
//Works with this work-araound
sap.ui.getCore().byId("AddDialog-searchField-btn").attachPress(function(evt){
addDialog.fireSearch(evt);
});

Steps to reproduce the problem:

1. Enter some Value in the searchField
2. press the search button
3. nothing happened

What is the expected result?
the search Event- Function should be fired, but it does not. only with the "workaround" i have in the posted code above, it does work.
What happens instead?
nothing.

sap.ui.model.Binding attachChange is always fired regardless of the sPath and context of binding

I create a binding to a model using as specific sPath value and binding context,
then I attach a change event listener to this binding. It would appear that the
change event is fired for any change to the model, that is, the change event does not appear to consider the context or sPath set on the Binding.

OpenUI5 version: Version available from
https://openui5.hana.ondemand.com/resources/sap-ui-core.js

Browser/version (+device/version): Not browser related.

Any other tested browsers/devices(OK/FAIL): N/A

URL (minimal example if possible):
http://jsbin.com/gaca/56/edit?js,console,output

User/password (if required and possible - do not post any confidential
information here): n/a

Steps to reproduce the problem:

1. Open the provided jsbin and press "Run with JS"
2. Examine the content of the Console window.

What is the expected result?
As the code loops through the array of bindings for the model, it should only
fire change events for bindings that have the appropriate sPath value and
binding context. In the case of this example, I would have expected to only see
the "Obj1 was changed" message in the console when the property was set using the obj1Context.

What happens instead?
All bindings receive a change event regardless of their context binding and
sPath values.

Any other information? (attach screenshot if possible)
For additional consideration, it would be useful to have the change event return
the old and new values, although I have not thought through all the implications
of such a change, and so should perhaps just be a setting on a binding.

Too large column headers in Google Chrome and IE11

OpenUI5 version: 1.18.8

Browser/version (+device/version): Desktop Google Chrome 33.0.1750.154 m

Any other tested browsers/devices(OK/FAIL):

OK: Mozilla Firefox 28.0
FAIL: Internet Explorer 11

URL (minimal example if possible):

User/password (if required and possible - do not post any confidential information here):

Steps to reproduce the problem:

1. Implement a simple shell with two views and a ui5-Table in each view
2. .First time entering the first tab of the shell displays a table with too large column headers
   3.Switch to the second tab of the shell and go back to the first tab, the column headers have normal height.

What is the expected result?

1. Normal height of the column headers
   What happens instead?
   too large column headers

Any other information?
First loading of the table:

After switching the shell tabs:

sap.m.Input : different behaviors on several Browsers

Hi,

OpenUI5 version: Eclipse UI5 Plugin "SAP UI development toolkit for HTML5
Version: 1.20.5 "

Browser/version (+device/version): Firefox (29.0.1) + IE (11) + Chrome (34)

Steps to reproduce the problem:

1. Open this snippet (removed link) in Chrome, Firefox and IE
2. Enter a string and change the focus.

What is the expected result?
The same behavior on all browsers

What happens instead?
On IE, the bad input is beeing removed.
On Firefox, the input turns red and the valueState is not changed to error.
On Chrome, nothing appends.

Regards,
MarcUI5

Edit :
Js link http://jsbin.com/openui5-mobile-list-databinding/401/edit