nsNotice

From NexoPOS v4.9.x, we've added a new way of displaying information to the user through "Floating Notifications". Previously, we've been mainly using the snack bar which was only offering information that didn't allow any further action. The Floating Notification aims to provide more details on a notification. It will for example be helpful to take the user to a location where he can better understand the displayed message or right away on the notice perform an asynchronous action.

Default Structure

A notification object is created by instantiating the object "FloatingNotice". This class is permanently available on the browser and doesn't require any other action.

const notice = new FloatingNotice;

Alternatively, you'll find it convenient to use the already available object that is named "nsNotice". This object provides methods that are used to define the type of notification. Those methods have the same parameters as so:

nsNotice.success( [ title ], [ message ], [ options ] )

The "title" should be used to set the heading of the notice. The "message" is used to set the body of the notice and "options" are used to either define "actions" and "duration".

Notification Type

You should note here that there are 4 different notice types:

• error: should be used to display an error to the user.
• info: for informational details.
• warning: to prevent the user from something that is about to happen or might happen.
• success: to inform a successful operation that has occurred.

nsNotice.error( ... )
nsNotice.info( ... )
nsNotice.warning( ... )
nsNotice.success( ... )

Adding Control To Notices

By default, you can create unlimited actions to notice, but we recommend creating no more than 3 actions. An action is a button that allows the reader (user) to perform something. Usually, actions are used to close the notice, but they might also be used to redirect a user to a page where he can take action.

As actions are made of javascript callback, they can also be used to perform an asynchronous operation.

Actions are provided as an entry to the third parameter like so.

In the previous example, we have 2 actions: "close" and "moreDetails". If an action doesn't have any "onClick" parameter, we'll consider that as a close button and any click on it will simply close the notice. If the action has an "onClick" parameter, we'll pass the instance of the notice to the callback function so any action should be taken by the callback.

Defining Duration

By default, any notice that doesn't provide a duration parameter and no controls will be visible for 3 seconds. To permanently display a notice, actions should be provided to allow the user to close the notice after reading it. If you would like to provide a greater duration, you'll define "duration" as an entry of the third parameter like so: