Skip to content

How To Add Your Own Widget

David Sevilla Martín edited this page Jul 26, 2017 · 6 revisions

Set Up

So, how do we add our own widget to the dashboard? It's very simple.
First, just follow the quick start extension guide on the Flarum website if you don't have an extension set up yet. You will need Javascript set up, too.

Requiring The Package

To be able to extend the dashboard... we need to make sure the user has the datitisev/flarum-ext-dashboard package installed and enabled.

Composer

First, add the following to the require in your extension's composer.json:

"datitisev/flarum-ext-dashboard": "^0.1.0-beta.7"

Then run composer update on the Flarum root directory. Never run composer update on the extension's folder

Javascript

Sorry, not ready for this yet :wink:
Follow the steps and you will solve this problem soon

Creating The Widget Component

Create a js file in js/admin/components and call it whatever you like. Make the file's content look something like this (replacing <MyFileName> with the file's name):

import DashboardSection from 'datitisev/dashboard/DashboardSection';

export default class <MyFileName> extends DashboardSection {
  
  config() {
    // [optional] just an init function
  }

  content() {
    // [required] some example content
    return (<span>IT IS ME! MARIO!</span>)
  }

  className() {
    // [optional] whatever class you want to add to the section (i.e. to change padding)
    return "Flarum4Life";
  }

}

Adding The Widget To The Dashboard

Lastly, we need to add our recently-created widget to the dashboard. The imports we need are:

import { extend } from 'flarum/extend';

import DashboardPage from 'datitisev/dashboard/components/DashboardPage';
import <MyWidget> from 'author/extension/components/<MyWidget>';

To add the widget (finally!) just add this somewhere thing (or in another file as a function, this is an example):

extend(DashboardPage.prototype, 'items', items => {
  // if AdminDashboard extension is not enabled, don't add widgets
  if (app.settings.extensions_enabled.indexOf('datitisev/flarum-ext-dashboard') == -1) return false;

  // add widgets
  items.add('MyWidgetName', MyWidget);
})

Wrap Up

CONGRATULATONS!! You have added your own widget to the dashboard!
If any of these steps didn't work, make sure you stop the gulp process and run gulp watch again whenever you either create, delete, or rename files.
If it still doesn't work, or you want to give me some tips on how to make this easier, create an issue with the prefix [Wiki] .

Clone this wiki locally
You can’t perform that action at this time.