# Application

## What is Application?

Application is a react component that will be rendered within a column inside any workspace in Dashboard.

A plugin can register one Application, and that application can then be mounted multiple times in one or more workspaces.

## What does Application look like?

Application component can be your own component or you can extend Application base component from Plugin-API

{% tabs %}
{% tab title="Custom App" %}

```jsx
import {
    useState,
    forwardRef
} from 'react'

import {
    Wrapper
} from './style'

const MyApplication = ({ config }, ref) => {
    const [title, setTitle] = useState(config.title)

    return (
        <Wrapper ref={ref}>
            <Title>
                {'My awesome application 🙃'}
                {title}
            </Title>
        </Wrapper>
    )
}

const Application = forwardRef(MyApplication)

export {
    Application
}
```

{% endtab %}

{% tab title="Extending from base" %}

```jsx
import { Plugin } from '@root'

import {
    Wrapper
} from './style'

class Application extends Plugin.Application {
    constructor(props) {
        super(props)

        this.config = prop.config

        this.state = {
            title: this.config.title
        }
    }

    render() {
        const { title } = this.state

        return (
            <Wrapper ref={ref}>
                <Title>
                    {'My awesome application 🙃'}
                    {title}
                </Title>
            </Wrapper>
        )
    }
}

export {
    Application
}
```

{% endtab %}
{% endtabs %}

## How to register an Application?

Like any other main component, from your main `index.js` file where you register your plugin, import your Application and pass it down with the register() method from Plugin-API

```jsx
import DashboardPlugin from 'Dashboard/plugin'

const Plugin = new DashboardPlugin('@plugin_bundle')

const registerPlugin = () => {
    const { Application } = require('@components/Application')
    
    Plugin.register({
        application: Application
    }
}

registerPlugin()

export {
    Plugin
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.navigaglobal.com/dashboard-plugin/components/application.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.