Skip to content

Getting started

Jump to bottom Edit New page
Sumit Ramteke edited this page Aug 20, 2017 · 9 revisions

Introduction

The adf consists of 3 parts:

  • The framework itself
  • Structures
  • and widgets

To get started you need the framework, at least one structure and at least one widget.

Framework

The framework contains the services and directives to render the dashboard. The dashboard can be installed with bower, just execute the following command:

bower install angular-dashboard-framework --save

Include the framework and its dependencies in your index.html:

<!-- styles -->
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="bower_components/angular-dashboard-framework/dist/angular-dashboard-framework.min.css" rel="stylesheet">

<!-- scripts -->
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bower_components/Sortable/Sortable.js"></script>
<script type="text/javascript" src="bower_components/angular-bootstrap/ui-bootstrap.js"></script>
<script type="text/javascript" src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script type="text/javascript" src="bower_components/angular-dashboard-framework/dist/angular-dashboard-framework.js"></script>
<script type="text/javascript" src="bower_components/angular-dashboard-framework/dist/angular-dashboard-framework-tpls.js"></script>

Add the adf module to the list of your required angular modules:

angular.module('sample', ['adf']);

Structures

Structures are sets of rows and columns, they describe how the widgets are placed on the dashboard. You could write your own structures or you can use the existing structure base package.

Use structure base package

Install the base package with bower:

bower install adf-structures-base --save

Include it in your index.html:

<script type="text/javascript" src="bower_components/adf-structures-base/dist/adf-structures-base.min.js"></script>

Add the dependency to your module:

angular.module('sample', ['adf', 'adf.structures.base']);

Define your own structure

The other option is to define your own structures. The following example defines a structure with one row and two columns with the same size:

angular.module('sample', ['adf'])
  .config(function(dashboardProvider){

    dashboardProvider
      .structure('6-6', {
        rows: [{
          columns: [{
            styleClass: 'col-md-6'
          }, {
            styleClass: 'col-md-6'
          }]
        }]
      });
  });

Widgets

The widgets are the content of the dashboard, they can render any type of content. You can choose your widgets from the set of existing widgets or you can write your own.

Use existing widget

Install widget with bower:

bower install adf-widget-clock --save

Include it and its dependencies in your index.html:

<link href="bower_components/adf-widget-clock/dist/adf-widget-clock.min.css" rel="stylesheet">
<script type="text/javascript" src="bower_components/moment/moment.js"></script>
<script type="text/javascript" src="bower_components/adf-widget-clock/dist/adf-widget-clock.min.js"></script>

Add the dependency to your angular module:

angular.module('sample', ['adf', 'adf.structures.base', 'adf.widget.clock']);

Build your own widget

The simplest way to build your own widget is the use of the adf-widget yeoman generator.

Add the dashboard to your page

<adf-dashboard name="mydashboard" collapsible="true" structure="6-6" adf-model="model" />
Add a custom footer
Add a custom sidebar
Clone this wiki locally