Skip to content

studiobonito/silverstripe-dashboard

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

86 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

The Dashboard Module for SilverStripe 3

The Dashboard module provides a splash page for the CMS in SilverStripe 3 with configurable widgets that display relevant information. Panels can be created and extended easily. The goal of the Dashboard module is to provide users with a launchpad for common CMS actions such as creating specific page types or browsing new content.

Screenshot

Screenshot

Included panels

  • Recently edited pages
  • Recently uploaded files
  • RSS Feed
  • Quick links
  • Section editor
  • Google Analytics
  • Weather

Installation

  • Install the contents of this repository in the root of your SilverStripe project in a directory named "dashboard".
  • Run /dev/build?flush=1

Creating a Custom Dashboard Panel

Dashboard panels have their own MVC architecture and are easy to create. In this example, we'll create a panel that displays recent orders for an imaginary website. The user will have the option to configure the panel to only show orders that are shipped.

Creating the model

First, create a class for the panel as a descendant of DashboardPanel. We'll include the database fields that define the configurable properties, and create the configuration fields in the getConfiguration() method.

mysite/code/RecentOrders.php

<?php

class DashboardRecentOrdersPanel extends DashboardPanel {

  static $db = array (
    'Count' => 'Int',
    'OnlyShowShipped' => 'Boolean'
  );
  
  
  static $icon = "mysite/images/dashboard-recent-orders.png";
  
  
  public function getLabel() {
    return _t('Mysite.RECENTORDERS','Recent Orders');
  }
  
  
  public function getDescription() {
    return _t('Mysite.RECENTORDERSDESCRIPTION','Shows recent orders for this fake website.');
  }
  
  
  public function getConfiguration() {
    $fields = parent::getConfiguration();
    $fields->push(TextField::create("Count", "Number of orders to show"));
    $fields->push(CheckboxField::create("OnlyShowShipped","Only show shipped orders"));
    return $fields;
  }
  
  
  
  public function Orders() {
    $orders = Order::get()->sort("Created DESC")->limit($this->Count);
    return $this->OnlyShowShipped ? $orders->filter(array('Shipped' => true)) : $orders;
  }
}

Creating the Template

The panel object will look for a template that matches its class name.

mysite/templates/Includes/DashboardRecentOrdersPanel.ss

<div class="dashboard-recent-orders">
  <ul>
    <% loop Orders %>
    <li><a href="$Link">$OrderNumber ($Customer.Name)</a></li>
    <% end_loop %>
  </ul>
</div>

Run /dev/build?flush=1, and you can now create this dashboard panel in the CMS.

Customizing with CSS

The best place to inject CSS and JavaScript requirements is in the inherited PanelHolder() method of the DashboardPanel subclass.

mysite/code/DashboardRecentOrdersPanel.php

<?php
public function PanelHolder() {
  Requirements::css("mysite/css/dashboard-recent-orders.css");
  return parent::PanelHolder();
}

Adding a chart to visualize data

The Dashboard module comes with an API for creating charts using the Google API.

mysite/code/DashboardRecentOrdersPanel.php

<?php

  public function Chart() {
		$chart = DashboardChart::create("Order history, last 30 days", "Date", "Number of orders");
		$result = DB::query("SELECT COUNT(*) AS OrderCount, DATE_FORMAT(Date,'%d %b %Y') AS Date FROM \"Order\" GROUP BY Date");
		if($result) {
			while($row = $result->nextRecord()) {
				$chart->addData($row['Date'], $row['OrderCount']);
			}
		}
		return $chart;
	}

mysite/code/DashboardRecentOrdersPanel.ss

$Chart

Screenshot

Try a demo

http://dashboard.unclecheeseproductions.com/admin

Known issues

Has not been tested in Internet Explorer.

About

Dashboard module for SilverStripe 3

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • PHP 60.4%
  • JavaScript 21.1%
  • CSS 10.4%
  • Scheme 8.1%