Creating SharePoint 2010 reports with Javascript and Twitter Bootstrap

SharePoint 2010 is a decent CMS out there from Microsoft.  Great for customized document storage, customized data lists, and of course Office Web Apps for cross-browser web based viewers/editors (word, excel, powerpoint, visio, etc).  SharePoint 2010 can also be extended to open source technologies rather easily with its REST services in order to create customized HTML reports rather than viewing through the clunky ribbon interface in SharePoint itself.

In this presentation, I will use NodeJS, Express, Jade, coffee-script, and Twitter's Bootstrap to construct a simple list report generator that page breaks on every item.  We will pretend that the SharePoint 2010 data is a custom list with three required columns and two optional columns that may not contain data:  Title (string), Content (rich text), and Feedback (rich text), TextArea1, TextArea2.  The last two are obviously the optional columns.

Imagine that this custom list contains a lot of text in each column.  Viewing this in SharePoint would show it as a grid, with each associated property listed horizontally (think spreadsheet).  There would be much scrolling or resizing of the browser.  Why cant we view this data like a book or a white paper?  That is what I intend to accomplish in this presentation.

First of all, you'll need to pick up all the tools.  I am using Node 0.8.3 with the following modules:  Express (3.0.0beta7), Jade (0.27.0), coffee-script (1.3.3), and request (2.9.203).  All of the modules are on npm.  See here for instructions on running coffee-script from the command line.

Next, pick up the latest bootstrap and its javascript plugins.  Finally go get jQuery.


$ mkdir reportGenerator
$ cd reportGenerator
$ mkdir public routes views



Now that we have our public folder, lets put the client side stuff in there.

$ mv ~/Downloads/bootstrap ./public
$ mv ~/Downloads/jQuery.min.js ./public/bootstrap/js


Lets setup our web server.

$ vim app.coffee

	express = require 'express'
	routes = require './routes'
	http = require 'http'
	app = express()
	app.configure ()->
	app.set 'port', (process.env.PORT or 3000)
	app.set 'views', __dirname + '/views'
	app.set 'view engine', 'jade'
	app.use express.favicon()
	app.use express.logger 'dev'
	app.use express.bodyParser()
	app.use express.methodOverride()
	app.use express.cookieParser 'i sometimes like shrimp'
	app.use express.session()
	app.use app.router
	app.use express.static __dirname + '/public'
	app.configure 'development', ()->
	app.use express.errorHandler()
	app.get '/', routes.index
	http.createServer(app).listen app.get('port'), ()->
	console.log "Express server listening on port " + app.get('port')

view raw app.coffee hosted with ❤ by GitHub

Now we need to create the route app.coffee depends on.

$ vim ./routes/index.coffee

	require 'coffee-script'
	request = require 'request'
	data =
	getData: (cb)->
	username = 'someUser'
	password = 'somePassword'
	proto = 'https://'
	site = 'sharepoint.domain.com/_vti_bin/listdata.svc'
	config =
	url: proto + username + ':' + password + '@' + site + '/' + 'someList?$orderby=someColumn'
	json: true
	request config, (err, res, body)->
	if err
	console.log err
	cb body.d.results
	routes =
	index: (req, res)->
	data.getData (dataArray)->
	options =
	title: 'reportGenerator'
	layout: 'layout.jade'
	items: dataArray
	res.render 'index', options
	module.exports = routes

view raw index.coffee hosted with ❤ by GitHub

Cool.  So this route renders a Jade template.  Lets make the layout and index templates.

$ vim ./views/layout.jade

	doctype 5
	html
	head
	title= title
	link(rel='stylesheet', href='/bootstrap/css/bootstrap.min.css')
	script(src='/bootstrap/js/jquery-1.7.2.min.js', type='text/javascript')
	script(src='/bootstrap/js/bootstrap.min.js', type='text/javascript')
	body
	block content

view raw layout.jade hosted with ❤ by GitHub

$ vim ./views/index.jade

	extends layout
	block content
	for item in items
	.container-fluid(style='page-break-after:always')
	.well
	.row-fluid
	h2 #{item.Title}
	hr
	h5 Content:
	p
	!= item.Content
	hr
	h5 Feedback:
	p
	!= item.Feedback
	hr
	- if (item.TextArea1)
	h5 TextArea1:
	p
	!= item.TextArea1
	hr
	- if (item.TextArea2)
	h5 TextField2:
	p
	!= item.TextArea2
	hr

view raw index.jade hosted with ❤ by GitHub

Now that the templates are done, we are ready to rock.  Start it up

$ coffee app.coffee

Print to PDF.  Look at that!  A nice report generated with page breaks on each main topic (item) based on SharePoint 2010 data in a simple yet expressive way.

Installing coffee-script cli

Today I will be updating my box to the latest nodejs and after doing so, installing the coffee-script command line interface which allows for coffee-script to be run on such things as crontab, init.d, or even nagios (see other post).  I will also be installing nodemon which will act as a daemon for my coffee-script web applications.  Nodemon will watch for changes and restart the application if it finds any, which is pretty neat.

$ wget http://nodejs.org/dist/v0.8.3/node-v0.8.3.tar.gz
$ tar zxvf node-v0.8.3.tar.gz

$ cd node-v0.8.3


$ ./configure

{ 'target_defaults': { 'cflags': [],
                       'default_configuration': 'Release',
                       'defines': [],
                       'include_dirs': [],
                       'libraries': []},
  'variables': { 'host_arch': 'x64',
                 'node_install_npm': 'true',
                 'node_install_waf': 'true',
                 'node_prefix': '',
                 'node_shared_openssl': 'false',
                 'node_shared_v8': 'false',
                 'node_shared_zlib': 'false',
                 'node_use_dtrace': 'false',
                 'node_use_etw': 'false',
                 'node_use_openssl': 'true',
                 'target_arch': 'x64',
                 'v8_no_strict_aliasing': 1,
                 'v8_use_snapshot': 'true'}}
creating  ./config.gypi
creating  ./config.mk



$ make
$ sudo make install
$ sudo npm install -g coffee-script
$ sudo npm install -g nodemon

Sending custom Nagios notification emails with coffeescript

Lets imagine for a second that you are using Nagios to monitor systems and services.  Nagios can send you notifications upon events, but the default email notification command is kind of boring.

Lets spice it up with coffeescript!

Nagios

---

define contact{

        contact_name                    mike

        alias                           Mike Kunze

        service_notification_period     24x7

        host_notification_period        24x7

        service_notification_options    w,u,c,r

        host_notification_options       d,r

        service_notification_commands   notify-service-with-nodejs

        host_notification_commands      notify-host-by-email

        email                          

}

define command {

    command_name    notify-service-with-nodejs

    command_line    /opt/bin/notify-service.coffee "$HOSTNAME$" "$SERVICEDESC$" "$HOSTADDRESS$" "$NOTIFICATIONTYPE$" "$SERVICESTATE$" "$LONGDATETIME$" "$SERVICEOUTPUT$"

}

CoffeeScript

---

This script will be executed by nagios and will contain the macros provided by the nagios command.

	#!/usr/bin/env coffee
	#
	# incoming argv is order sensitive
	#
	# [0] - coffee
	# [1] - /opt/bin/notify-service.coffee
	# [2] - hostname
	# [3] - service
	# [4] - IP address
	# [5] - notification type [ PROBLEM, RECOVERY, OK ]
	# [6] - status [ OK, WARNING, CRITICAL ]
	# [7] - long date time
	# [8] - service output
	require 'coffee-script'
	argvObject =
	hostname: process.argv[2]
	service: process.argv[3]
	ip: process.argv[4]
	notify_type: process.argv[5]
	status: process.argv[6]
	date: process.argv[7]
	output: process.argv[8]
	nodemailer = require 'nodemailer'
	smtpTransport = nodemailer.createTransport "SMTP"
	text = "Nagios requires your attention.\n
	\n
	Hostname:\t\t" + argvObject.hostname + "\n
	service:\t\t" + argvObject.service + "\n
	ip:\t\t" + argvObject.ip + "\n
	notify:\t\t" + argvObject.notify_type + "\n
	status:\t\t" + argvObject.status + "\n
	date:\t\t" + argvObject.date + "\n
	output:\t\t" + argvObject.output + "\n
	"
	html = "Nagios requires your attention.\n
	\n
	Hostname:&nbsp;&nbsp;&nbsp;&nbsp;" + argvObject.hostname + "<br>
	service: &nbsp;&nbsp;&nbsp;&nbsp;" + argvObject.service + "<br>
	ip: &nbsp;&nbsp;&nbsp;&nbsp;" + argvObject.ip + "<br>
	notify: &nbsp;&nbsp;&nbsp;&nbsp;" + argvObject.notify_type + "<br>
	status: &nbsp;&nbsp;&nbsp;&nbsp;" + argvObject.status + "<br>
	date: &nbsp;&nbsp;&nbsp;&nbsp;" + argvObject.date + "<br>
	output: &nbsp;&nbsp;&nbsp;&nbsp;" + argvObject.output + "<br>
	"
	mailOptions =
	from: "Nagios <you@yourdomain.com>"
	to: "you@yourdomain.com"
	subject: "Hello, notification from nagios"
	text: text
	html: html
	smtpTransport.sendMail mailOptions, (err, res) ->
	if err
	console.log err
	process.exit()

view raw notify-service.coffee hosted with ❤ by GitHub