Skip to Main Content

Breadcrumb

Overview

The FOS - Notifications dynamic action plug-in is built on top of a custom Javascript library and allows you to show success and error messages, as well as additional info and warning message types. It matches the look of native APEX success/error messages, and can be styled to your liking through Themeroller.

Using this dynamic action you can show multiple messages of each type, customize them by setting their icon, position, how they are dismissed, and more.

You can derive the message using static text with substitution support or from a Javascript expression or function. You can use HTML in the message or escape HTML for tighter security. You can see a wide range of examples below:

Examples

4 Different Types

You have four types of notifications to choose from. Success, Error, Warning, and Info. You can define component settings at the application level to control the default behaviour for each type like the position, icon, and enabling auto dismiss.

6 Possible Positions on Page

There is a lot of flexibility on where to position the notifications.

Dismissing the Notification

Some users are displeased with sticky notifications, as it requires an extra step to dismiss them. On busy pages, having to actively remove a not-so-important notification, such as "Changes saved" can be quite annoying.

The plug-in provides the following notification dismiss functionality:

  1. The "Default" button example creates a default notification. You have to click the X button to dismiss it.
  2. The "Dismiss On Click" button example creates a notification that can also be dismissed on click, anywhere on the notification. If the user is in the process of selecting text in the notification, it will not be dismissed.
  3. The "Autodismiss" button example creates a notification with the autodismiss option enabled. The notification will be dismissed after a specified amount of time. The user will also see a visual bar representing the remaining time. On hover of the notification, the process of autodismissal will be stopped and it will need to be manually dismissed.

The dismiss settings can be applied globally, in the component settings, and optionally be overridden at plug-in instance level.

Various Message Sources

You have flexibility on using static text with substitutions or deriving your title/message using javascript. Change the page item values below to see the message contents dynamically change. Why use Javascript to derive the message? When the situation arises that you need more programatic control when showing the message.

Note: don't forget to be aware of the difference between client-side and server-side substitutions -> see the FAQ section for more info.

Other Settings

There are quite a few settings which you can use, including advanced setup which overrides the global level defaults for changing the icons, removing all notifications, and preventing duplicates. You can use HTML in your title and message and you have full control to use an initialization Javascript Function to make any last changes in a centralized way.

Adding Inline Page Item Errors

Just like the "FOS - Message Actions" plug-in, you can associate error messages with one or more page items. Have a look at the example below that shows you adding the same message to two page items and displaying the notification in the top right corner:

Design

You can preview the plug-in setup as you would see it in page designer. You can either do this by clicking this button in the top right corner of each example, or you can see all the examples together in the region below.

Looking at the examples you'll see just how easy the plug-in is to use. Don't worry about changing any values as they aren't saved. We actually encourage you to change them, so you can see the behaviour of the attributes and their help text.

Themeroller

We have included the ability to control the basic styling of the notifications using the themeroller. Why would you want to use themeroller? Simple, it's quick and easy to make styling changes without having to write and manage your own CSS overrides. To enable this you first need to perform some setup steps:

  1. Navigate to "Shared Components" -> "Plug-ins"
  2. Edit the "FOS Notification" plug-in in the APEX Builder
  3. Download the "less/fos-notification-themeroller.less" file, found in the files section
  4. Edit your Universal Theme i.e. under "Shared Components" -> "Themes"
  5. Upload the "less/fos-notification-themeroller.less" file to the theme files
    Upload Theme File
  6. Edit your user interface(s) and include the file reference there e.g.
    Add Theme File Reference
  7. Run your application and open themeroller from the APEX Developer toolbar, making sure to click the "Show All" button (as per the themeroller image to the right) and make your styling changes
  8. Please note: when using themeroller we will set the default colours of your notifications based on the colours of the associated APEX "States" i.e. success/info/warning/danger

FAQ

  • My notification is not being shown, why?

    There is a certain situation when we will not display a notification and that is when the message is NULL. This can be useful in situations where your notification message is a single page item substitution name e.g. &P1_ITEM_NAME. and the situation where the page item's value is NULL, so there is no need to show the notification. It basically works as an implicit condition i.e. show = Message != NULL

  • I'm having problems with substituting values

    We provide a setting in the options to perform client side substitutions. What's the difference when selecting this option vs. leaving it unchecked and performing server substitutions?

    Client Substitutions

    We will not perform any &ITEM_NAME. substitutions in the title/message at the time of page render and instead will do them at the time of execution on the browser using values obtained from page items defined on the page. Therefore you cannot reference application items or items from other pages. The reason why you would choose this method is when these item values are changing dynamically and you want to show these specific values each time the notification fires.

    Server Substitutions

    We will perform any &ITEM_NAME. substitutions in the title/message at the time of page render. Meaning that it is done once. So when your dynamic actions fire the notifications show the same text every time as the message is just plain text as it was substituted whilst the page was built on the server. The plus side to this is that you can reference any item or application item that has their value set in session state.

  • How do I control the width of Notifications?

    Themeroller

    We provide a ".less" file which you can install and use to control the notification styling including the width. See the above themeroller section for setup details.

    CSS Override

    If you don't wish to use Themeroller, you can still change the width of the notification messages using a CSS override. The width is applied to all messages in the FOS notification container. You will need to include the following CSS rule: 

    
.fostr-container .fos-Alert--page {
    width: 400px !important;
}

    To change the width of the messages per notification type you can alter your CSS override selector e.g.: 

    
.fostr-container .fos-Alert--page.fos-Alert--success {
    width: 400px !important;
}
.fostr-container .fos-Alert--page.fos-Alert--danger {
    width: 500px !important;
}
.fostr-container .fos-Alert--page.fos-Alert--warning {
    width: 300px !important;
}
.fostr-container .fos-Alert--page.fos-Alert--info {
    width: 600px !important;
}

  • How can I change the notification color & styling?

    Using Themeroller

    We have provided a ".less" file which you can add to the APEX themeroller to control the colors, font size/weight, and notification opacity. See the above themeroller section for setup instructions.

    CSS Override

    To change the styling of the FOS notifications you will need to include one or more CSS overrides depending upon what you change. You can add any of the following CSS rules taking note to include the "!important" flag on your changes: 

    
.fostr-container .fos-Alert--page {
  min-width: 300px !important;
  max-width: 500px !important;
  opacity: 0.9 !important;
  font-size: 1.6rem !important;
}
.fostr-container .fos-Alert--page.fos-Alert:hover {
  opacity: 1 !important;
}
.fostr-container .fos-Alert--page .fos-Alert-title {
  font-weight: 500 !important;
  font-size: 1.9rem !important;
  padding-bottom: 6px;
}
.fostr-container .fos-Alert--page .fos-Alert-body {
  font-weight: 400 !important;
}
.fostr-container .fos-Alert--page.fos-Alert--success {
  background-color: #3baa2c !important;
  color: #FFF !important;
}
.fostr-container .fos-Alert--page.fos-Alert--danger {
  background-color: #f44336 !important;
  color: #ffffff !important;
}
.fostr-container .fos-Alert--page.fos-Alert--warning {
  background-color: #FBCE4A !important;
  color: #443302 !important;
}
.fostr-container .fos-Alert--page.fos-Alert--info {
  background-color: #0076df !important;
  color: #ffffff !important;
}
  • How do I enable RTL (right-to-left mode)?

    RTL support is automatically enabled when you change the "Document Direction" setting under "Shared Components - Globalization Attributes" to "Right-to-Left" mode.

  • Which options can I override via "Initialization Javascript Code"?
    This is the full list of options which you can override: 
    
{
    // when to dismiss the notification
    dismiss: ['onClick', 'onButton'],
    // a number in milliseconds after which the notification should be automatically removed
    dismissAfter: null,
    // add the newest notification to the top of the list
    newestOnTop: true,
    // do not show the notification if it has the same title and message as the last one
    preventDuplicates: false,
    // whether to escape the title and message
    escapeHtml: true,
    // one of 6: [top|bottom]-[right|center|left]
    position: 'top-right',
    // font APEX icon which overrides the default. e.g fa-rocket
    iconClass: null,
    // true to clear all notifications first
    clearAll: false
}
  • FOS - Message Actions or FOS - Notifications?

    If you are perfectly satisfied with the way notifications natively behave in APEX but do not want to write Javascript to invoke them, use FOS - Message Actions. This plug-in relies on the very same Javascript API-s that APEX provides and uses. The only additional feature is the ability to autodismiss notifications after a given period of time.

    FOS - Notifications on the other hand however is a much more comprehensive plug-in, as it is built on top of a custom Javascript library. It can handle not only Success and Warning messages, but also Info and Error. You can show multiple notifications at once, as opposed to only one, customize them by setting their color, position, how they are dismissed, and more.

    The right plug-in for you depends on your use case, for simple cases, go with FOS - Message Actions. For more advanced cases, go with FOS - Notifications.

  • Does the "Convert Native APEX Notifications" replace all native APEX notifications?

    There are certain APEX driven notifications that hardly can be catched and replaced, so currently it does not. The feature is planned to be added in a future release.