SAPUI5 NotificationBar in splitApp

2
votes

I have a NotificaitonBar-Control as content element of a detail view, which is a element of a splitApp.

In Google Chrome there is no problem, but on the iPad there is a display issue. The notificationBar is between the master- and the detail-View.

The masterview overcovers a part of the notificationBar and the detail-view did not.

How can I resize the notificationBar. I did not find any method or propertie to modify the notificationBar.

If I look at the API I do not understand why it does not match to the detailview:

A NotificationBar is a "toolbar" that can be added to a page to show messages and notifications from the application. Its position, height and width is inherited from the element that the notification bar is added to.

SAPUI5 NotificationBar API

How can I solve this issue?

1
notificationsresizewidthsapui5master-detail

1 Answers

2
votes

From the namespace sap.ui.ux3 I assume that the NotificationBar is not really responsive and therefore not working on smaller devices like the iPad.

I found a demopage for the NotificationBar which has some interesting information:

If the NotificationBar should be smaller than per default a separate CSS-class must be added to the NotificationBar

This means you have to do the resizing via good old CSS. The example they gave looks similar to the following snippet.

style.css (or however your custom CSS file is named)

.slimNotificationBar {
     left : 60px;
     right: 100px;
}

To make it work on both iPad and Desktop, you should make it responsive by adding media querys (see here: https://developer.mozilla.org/de/docs/Web/CSS/Media_Queries/Using_media_queries)

Your.controller.js (or however it's named)

// after instantiating your NotificationBar
oNotificationBar.addStyleClass("slimNotificationBar");

Link to the demopage: https://sapui5.hana.ondemand.com/sdk/test-resources/sap/ui/ux3/demokit/NotificationBar.html

However, if you prefer a built-in and responsive solution, you might want to try the following approach.

Add a sap.m.Toolbar to your detail page, which has a button that opens a sap.m.MessagePopover.

See the following example: https://sapui5.netweaver.ondemand.com/sdk/explored.html#/sample/sap.m.sample.MessagePopover/preview