> For the complete documentation index, see [llms.txt](https://docs.navigaglobal.com/dashboard-notification-agent/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.navigaglobal.com/dashboard-notification-agent/master-5/develop-with-notifications-agent.md).

# Develop with Notifications agent

How to use Notifications functionality in your plugin

### Getting started

Notifications agent gives you methods to use in your plugin to be able to push and display notifications/confirms in Dashboard, or remove displayed notifications as well

Notifications agent register it's own methods with [Dashboard Actions](https://docs.infomaker.io/dashboard-plugin/agent/actions)

You can use any of these actions in your plugin.

### Available actions

| ID                                       | Descriptions                                                                                                       |
| ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
| com.naviga.notificaion-agent:getInstance | An action returns the instance of @plugin\_name with add, remove notification methods.                             |
| com.naviga.notificaion-agent:add         | An action handle displaying a notification in Dashboard with the requested notification object.                    |
| com.naviga.notificaion-agent:remove      | An action handle removing a notification in Dashboard "if it is displayed" with the requested notification object. |

#### With getInstance action you will get class that has a main function:

* **add**
* **remove**

{% hint style="info" %}
The :add, :remove actions are basically splitted methods from Notifications instance
{% endhint %}

###

### An example to how to get Notifications agent instance

In your plugin you can import **useAction** from Dashboard, so you can "import" Notification actions to your plugin.

{% tabs %}
{% tab title="Hook component" %}

```jsx
import { useAction } from 'Dashboard'
import { useRef, useEffect } from 'react'

const MyAwesomeComponent = props => {
    const Notifications = useRef()
    
    useEffect(() => {
        const getInstance = useAction('com.naviga.notificaion-agent:getInstance')
        const Instance = getInstance()
        
        Notifications.current = new Instance()
    }, [])
    
    /**
        Now you can use Notifications all around your plugin.
        In order to add a notification call:
        Notifications.current.add(NOTIFICATION_OBJECT)
    */
}
```

{% endtab %}

{% tab title="Class component" %}

```jsx
import { Component } from 'react'
import { useAction } from 'Dashboard'

class MyAwesomeComponent extends Component {
    constructor(props) {
        super(props)
        
        this.Notifications = null
    }
    
    componentDidMount() {
        const getInstance = useAction('com.naviga.notificaion-agent:getInstance')
        const Instance = getInstance()
        
        this.Notifications = new Instance()
    }
    
    /**
        Now you can use Notifications all around your plugin.
        In order to add a notification call:
        this.Notifications.add(NOTIFICATION_OBJECT)
    */
}
```

{% endtab %}
{% endtabs %}

Here we used `com.naviga.notificaion-agent:getInstance` action to get and initiate our Notifications instance

## Add

### Notification Parameters

| Attr        | Type       | Default | Description                                                                                    |
| ----------- | ---------- | ------- | ---------------------------------------------------------------------------------------------- |
| message     | string     | ""      | Message of the notification                                                                    |
| level       | string     | "info"  | Level of the notification. Available: success, error, warning and info                         |
| autoDismiss | int        | 0       | Delay in seconds for the notification go away. 0 for not auto-dismiss the notification         |
| uid         | int/string | null    | Notification won't be display without the uid. Notifications with same uid won't be displayed. |

**example for basic notification**

```javascript
const notification = {
    message: 'Your message',
    level: 'success',
    uid: '4546547-23124-1234567-9899865-764'
}

Notifications.add(notification)
```

![dashboard-dna-add-notification](https://camo.githubusercontent.com/1edb3f999326a7d71f11798ee572ed3d2228193d/68747470733a2f2f73332d65752d776573742d312e616d617a6f6e6177732e636f6d2f64617368626f6172642d67726170686963732f44617368626f6172642e6164644e6f74696669636174696f6e2e676966)

### **Confirm Notifications**

you can send a confirm notification with your Notifications instance with add method

| Attr        | Type     | Default            | Description                                                                                  |
| ----------- | -------- | ------------------ | -------------------------------------------------------------------------------------------- |
| message     | string   | null               | Message of the notification                                                                  |
| buttonTexts | array    | `['cancel', 'ok']` | Confirm buttons texts, first item take the cancel text and the second takes the confirm text |
| onConfirm   | function | null               | callback function will be called on confirm                                                  |
| onCancel    | function | null               | callback function will be called on cancel                                                   |

**example for confirm notification** 

```javascript
const confirm = {
    message: 'My confirm message',
    buttonTexts: ['CANCEL_BUTTON_TEXT', 'CONFIRM_BUTTON_TEXT'],
    onConfirm: () => {},
    onCancel: () => {}
}

const notification = {
    level: 'warning',
    uid: '4546547-23124-1234567-9899865-764'
    confirm: confirm
}

Notifications.add(notification)
```

![dashboard-dna-confirm-notification](https://camo.githubusercontent.com/a90d6c97e83c248103ca11e4724d19d987d6771b/68747470733a2f2f73332d65752d776573742d312e616d617a6f6e6177732e636f6d2f64617368626f6172642d67726170686963732f44617368626f6172642e6164644e6f74696669636174696f6e2e436f6e6669726d2e676966)

## Remove

In order to remove a notification from the view you need to send the same "notification" object that you want to remove it. make sure you pass the same "Notification" object with the same "uid"

```javascript
const notification = {
    message: 'Your message',
    level: 'success',
    uid: '4546547-23124-1234567-9899865-764'
}

Notifications.remove(notification)
```