© nabisoft. All rights reserved. Proprietary and confidential.

Displaying Server Side OData Messages in UI5

Success, error, information, and warning messages can be so easy in UI5

www.nabisoft.com

Nabi Zamani, CEO & Software Engineer3/24/2017

www.nabisoft.com 2

Message Handling is described in the Fiori Design Guidelines

Source: https://experience.sap.com/fiori-design-web/messaging/

How can we implement this in UI5?- UI messages- Server-side messages (OData)

www.nabisoft.com 3

There is little information about messages in the Developer Guide

www.nabisoft.com 4

I‘ve prepared 3 examples in my local Explored App

www.nabisoft.com 5

Demo will be available online soon...

Live DemoLet’s have a look at the 3 examples now

www.nabisoft.com 6

Hint: There is a gap between MassageType and ValueState

There is currently no mapping for MessageType.Information

www.nabisoft.com 7

OData has a well defined format for error responses

Source: http://www.odata.org/documentation/odata-version-2-0/operations/

No information found here (anymore?)

OData 2.0

www.nabisoft.com 8

OData has a well defined format for error responses

Source: http://www.odata.org/documentation/odata-version-3-0/json-verbose-format/

OData 3.0

www.nabisoft.com 9

OData has a well defined format for error responses

Source: http://docs.oasis-open.org/odata/odata-json-format/v4.0/errata03/os/odata-json-format-v4.0-errata03-os-complete.html#_Toc453766668

OData 4.0

www.nabisoft.com 10

SAP Gateway supports error responses as well

- This is a simple example every ABAP developer knows- By using Message Containers you can add more details

www.nabisoft.com 11

Previous ABAP code leads to the following OData error response

www.nabisoft.com 12

Unfortunately, this causes „double“ messages in MessagePopover

www.nabisoft.com 13

...because UI5 parses the messages like this

Relevant code snippet of sap.ui.model.odata.ODataMessageParser:

www.nabisoft.com 14

...and because SAP Gateway seems not to be correctly aligned with UI5

www.nabisoft.com 15

Thank You

Code is on github:

git clone https://github.com/nzamani/openui5.git cd openui5 git checkout ui5con2017-odata-messages npm install grunt serve

http://localhost:8080/testsuite/explored.html#/entity/sap.ui.core.message.MessageManager/samples