Dashboard Widgets

The Dashboard is the first screen that is shown after logging in to the admin panel. It gives an overview of the website and contains multiple Dashboard Widgets. You can create your own Dashboard Widget that can display useful information or offer shortcuts to other areas of your extension.

A Dashboard Widget is created as a Vue.js component. The following example explains how to create the Widget using a webpack configuration in your extension. If you are not sure what Vue.js and Webpack are or how they work together, you might want to read the Vue.js and Webpack article first.

Create a Vue component

To get started, create a Vue component for your Widget and save it in a subfolder of your extension extension: <extension>/app/components/widget-hello.vue

  1. <template>
  2.  
  3.     <form class="pk-panel-teaser uk-form uk-form-stacked" v-if="editing">
  4.  
  5.         <div class="uk-form-row">
  6.             <label for="form-hello-title" class="uk-form-label">{{ 'Title' | trans }}</label>
  7.  
  8.             <div class="uk-form-controls">
  9.                 <input id="form-hello-title" class="uk-width-1-1" type="text" name="widget[title]" v-model="widget.title">
  10.             </div>
  11.         </div>
  12.  
  13.     </form>
  14.  
  15.     <div v-else>
  16.  
  17.         <h3 v-if="widget.title">{{ widget.title }}</h3>
  18.  
  19.     </div>
  20.  
  21. </template>
  22.  
  23. <script>
  24.  
  25.     module.exports = {
  26.  
  27.         type: {
  28.  
  29.             id: 'hello',
  30.             label: 'Hello Dashboard',
  31.             defaults: {
  32.                 title: ''
  33.             }
  34.  
  35.         },
  36.  
  37.         replace: false,
  38.  
  39.         props: ['widget', 'editing']
  40.  
  41.     }
  42.  
  43.     window.Dashboard.components['hello'] = module.exports;
  44.  
  45. </script>

Add to webpack config

Now, add the Vue component to your extension's webpack.config.js:

  1. entry: {
  2.     "dashboard": "./app/components/dashboard.vue",
  3.     // ...
  4. },

Run webpack once to have the new component be available in your bundle. When developing it is a good idea to have webpack —watch running in the background.

Make sure the Dashboard widget is loaded

Register the bundled JavaScript file inside your extension's index.php.

Make sure the file is loaded before the dashboard initialization code by using the tilde: ~dashboard.

  1. 'events' => [
  2.  
  3.     'view.scripts' => function ($event, $scripts) use($app) {
  4.         $scripts->register('widget-hello', 'hello:app/bundle/dashboard.js', '~dashboard');
  5.     }
  6.  
  7. ]