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

Custom App

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
}

Extending from base

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
}

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

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
}