Displaying Notifications

When your component encounters an error, or generally needs to notify a user about an action, the Cloneable SDK provides a convenient hook to both log information and share a notification in a single call.

A notification can be called from non-ui components, and the notification will be rendered on top of the current UI

Show notification

Showing a notification is handled through the Cloneable SDKs built in logger. The logger will be covered in more depth in another document page.

Cloneable's logger is a singleton class which you call .log with. Broadly this allows you to log and associate logs to a workflow from your component. By defining the display parameter, the SDK will display a notification.

Example

CloneableLogger.log(
    logLevel: .info, // the type of log, dictates color with notifications
    message: "Example notification", 
    display: .top) // display tells the logger to show a notification and how

Types of notifications

The SDK will show notifications in the following display modes

Top

Set display on the log function to .top

Middle

Will display a notification in the middle of the screen. If you set logLevel to .error or .success it will display an x or checkmark

Sheet

Display a sheet from the bottom of the screen. This is most useful when debugging and needing to display more complex information about an error.

Optionally pass the error: parameter to .log() and the sheet will display both the logger message and the description of the error

Setting notification color

You can set the notification color by setting the logLevel parameter on the logging function to one of the following

.error - red

.success - green

.warning - orange

.info - regular (gray)

.debug - regular (gray)