Skip to Content

Design Studio SDK: NotificationBar Component

Purpose

Different style of positing notifications (messages) to end users. Reuse of the SAPUI5 proposed "NotificationBar" (demo link) as Design Studio component.

Background

When building Applications very often I tried to add messages to have lightway option to pass the scripting values to the frontend. But the problem was - the messages were mixed with common design studio messages and it was not easy to find the correct content.

Available Properties

Property NameDescription
defaultImage

Default Image - Needed for Calculation of the Url Prefix for Repository.

Today this is requried (just assign to some image) as there is no other way to get the url to the repository via SDK methods.

connectToCommonMessages

Setting this to TRUE also the common Messages from messages popup will be handover to this notification bar.

The implementation "hacks" a bit into the standard becuase today there is no SDK API for messages. But as the NavigationBar is covering the message popup I have provided this property to put all notifications and messages together.

splitNotificationsByPriority

Setting this to TRUE the Notifications will be displayed in categories by priority.

This is applied only for common messages and notifications which are NOT assigned to categories.

showOnNewNotifications

Setting this to TRUE shows always Notification Bar when new Notifications are Available.

If the NotificationBar is collapsed, it will show itself in case new notifications or messages are available.

deleteNotificationOnClick

Setting this to TRUE deletes the Notification on click event.

You can simply remove a notification or message by clicking on it.

removeAllOnMinimize

Setting this to TRUE deletes all Notifications on minimize event.

All notifications or messages will be removed when you minimize the NotificationBar (with the icon on the right)

Scripting Functions

ScriptsShort Description
addCategory(...)

Adding of custom categories. When a category is add, you can assign notifications to the category.

add*Notification(...)

Simple function to add notifications.

* == Success | Info | Warning | Error

addNotification

More complex variant of the simple way.

Example Application

An Application with example can be downloaded at the BIAPP Repository:

Current Restrictions

  • it requires Design Studio 1.3 SP1 (beacuase of use of the afterDesignStudioUpdate method in JS)
  • it works only with "Blue Crystal" style as SAPUI5 is delivering this component only in this style.
  • as I use it for debugging in local mode, I nave not yet tested it on all platforms, but as the SDK is platform independent - it should work as it is.
  • you have to position the NotificationBar as last component in BI App definition (at the bottom). Then expanded state will cover other content.
  • when dropped into Layout, you should adjust the Layout properties. This component can be only in the bottom of the page, but drop is overwritting correctly the given default values. Change the propoerties to:
    • Top Margin, Width: auto
    • Left, Bottom, Right Margin: 0
    • Height: 40

Releases

Source Code & Licensing

This component is for free use. It is under the Open Source Apache Version 2.0 License.

Important Maintenance Notice (... as I am SAP Employee)

The component is NOT delivered under SAP maintenance license.

You cannot claim any Support on this component from SAP!


The components are created on "private" basis - you can use them as is. I can modify, correct or improve - but there is no obligation to do it. Of course I will try to correct bugs or improve the component as long I can.

P.S.

This is my first SDK Component in Design Studio, also first time using GIT for code control.

Q&A

Feel free to add any comments or ideas which can go into future versions, or feel free to take a copy and add extensions on your own.

Tags: