README.md

description	full_title
This tutorial shows you how to create and register your own panel items.	Panel Tutorial

Panel Item Tutorial

This tutorial shows you how to create and register your own panel items.

Panel Items are containers placed inside a Panel.

OS.js uses Hyperapp v1 for its panel items by default.

Custom Panel Item

To create your own panel item, extend the PanelItem class provided by the panels package.

import {PanelItem} from '@osjs/panels';
import {h} from 'hyperapp';

export class MyPanelItem extends PanelItem {

  // You can set your own state and actions by overriding the init method
  init() {
    super.init({
      // State
    }, {
      // Actions
    })
  }

  // Renders the interface
  render(state, actions) {
    return super.render('my-panel-item', [
      h('span', {}, 'Hello World!')
    ]);
  }
}

Registration

There are two methods available to register your panel item:

Static

In the client bootstrap file (src/client/index.js) you can give the Panel Service Provider a set of items.

osjs.register(PanelServiceProvider, {
  args: {
    registry: {
      'my-panel-item': MyPanelItem
    }
  }
});

Runtime

It is also possible to register panel items on runtime.

osjs.make('osjs/panels')
  .register('my-panel-item', MyPanelItem);

Usage

To add the new item as a default entry, you have to modify your client settings.

[info] You might have to clear your settings (by default localStorage) in order for this to take effect.

Update the configuration file (src/client/config.js) with new desktop panel settings:

module.exports = {
  desktop: {
    settings: {
      panels: [{
        position: 'top',
        items: [
          {name: 'menu'},
          {name: 'windows'},
          {name: 'my-panel-item'}, // Your panel item name
          {name: 'tray'},
          {name: 'clock'}
        ]
      }]
    }
  }
}