Tutorial: Extending the QUIQQER Dashboard by yourself

in #utopian-io3 years ago

Tutorial: Extending the QUIQQER Dashboard by yourself

In the next weeks release 1.3 of QUIQQER is planned and this release also includes the new Dashboard. Today we show you how to extend the dashboard with your own cards even as a hard-working developer.


What Will I Learn?

  • Creating a card for the dashboard
  • Add a card to the dashboard


  • A QUIQQER System
  • Your own QUIQQER Module
  • Some PHP, HTML, JavaScript experience
  • AMD JavaScript knowledge


  • Advanced

Tutorial Contents

Creating a card for the dashboard


Dashboard-Cards are basically JavaScript controls that extend the Card-JavaScript-Control (package/quiqqer/dashboard/bin/backend/controls/Card).

define('package/mygroup/mypackage/bin/MyCard', [
], function (QUICard) {
    "use strict";

    return new Class({
        Extends: QUICard,
        Type   : 'package/quiqqer/dashboard/bin/backend/controls/cards/BlogEntry',

Basic skeleton for a Dashboard-Card


Every Card has the following attributes:

  • id: The card's (HTML-)ID
  • icon: The icon to display in the top left corner
  • title: The title at the top of the card
  • content: The card's HTML-content
  • footer: The footer in HTML-format at the bottom of the card
  • styles: The card's CSS style
  • size: The card's width in percent (10, 16, 20, 25, 30, 33, 40, 50, 60, 70, 80, 90 or 100)

These attributes can be overwritten in the initialize method:

initialize: function (options) {

        id     : 'my-dashboard-card',
        icon   : 'fa fa-rocket',
        title  : 'My First Dashboard Card'
        content: '<h1>Hello World!</h1>',
        footer : 'This is an interesting footer'
        size   : 25,

Setting attributes in the initialize-method

To access these attributes there are certain methods. Check the Card-JavaScript-Control to see all of them.

Displaying Content

To display your card's content you have to overwrite the refresh-method of the card-control.
There for example you're able to call Ajax-methods to query further content, add buttons, etc.:

refresh: function () {
    var self = this;
    QUIAjax.get('package_mygroup_mypackage_ajax_myajaxfunction', function (result) {

        self.getElm().addEvent('click', function () {
            console.log('You clicked my card!');
    }, {
        'package': 'mygroup/mypackage',
        onError  : console.error

Overwriting the refresh-method

Add a card to the dashboard

Now that we have our first card, we have to make it available.

Creating a Dashboard-Provider

To create a Dashboard-Provider you need to create a PHP-class that implements the DashboardProvider-Interface (QUI\Ḑashboard\DashboardProviderInterface):

class MyDashboardProvider implements QUI\Ḑashboard\DashboardProviderInterface {}

Class implementing the DashboardProvider-Interface

The interface requires you to overwrite the getCards-method. This method has to return an array containing strings or sub-arrays of strings.
These strings are the names of the JavaScript-Card-controls that should be added to the dashboard. If a sub-array of strings is returned it represents a complete row, which no other cards will be added to.

class MyDashboardProvider implements QUI\Ḑashboard\DashboardProviderInterface {
    public static function getCards()
        return [

Examplary getCards()-method

Registering the Dashboard-Provider

To have the Dashboard use your Dashboard-Provider you need to register it. This is done by adding your Provider-Class to your package's package.xml:

    <dashboard src="\My\Dashboard\Provider"/>

Registering the Dashboard-Provider via package.xml

After running the setup once, your Card is now displayed in the dashboard, yay!

Proof of Work Done

Good examples of how to create cards can be found in the dashboard itself:

We hope we could bring you a little closer to you how you can extend the new dashboard with your module.
We wish you a lot of fun with QUIQQER

Thanks for reading,
Hen and Jan, for PCSG Developers


Thank you for your contribution @pcsg-dev.
After reviewing your tutorial we suggest the following points listed below:

  • Your tutorial is quite short for a good tutorial. We recommend you aim for capturing at least 2-3 concepts.

  • We suggest that in your next tutorial details more what you have developed, so that the reader less experienced in programming understands well your contribution.

  • We suggest you put comments in your code sections. The comments are very important because they mainly help less experienced users to understand your code well.

  • It would be interesting if your tutorial had images of what you were developing and explaining. Thus the reader would have a greater perception of what is developing.

Thank you for your work in developing this tutorial.
Looking forward to your upcoming tutorials.

Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, click here.

Need help? Chat with us on Discord.


Thank you for your review, @portugalcoin! Keep up the good work!

Hi @pcsg-dev!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your post is eligible for our upvote, thanks to our collaboration with @utopian-io!
Feel free to join our @steem-ua Discord server

Hey, @pcsg-dev!

Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!

Get higher incentives and support Utopian.io!
Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via SteemPlus or Steeditor).

Want to chat? Join us on Discord https://discord.gg/h52nFrV.

Vote for Utopian Witness!

Coin Marketplace

STEEM 0.21
TRX 0.07
JST 0.029
BTC 20052.14
ETH 1133.91
USDT 1.00
SBD 2.91