Developing Custom

Solutions in PWA

Jesse Carnathan & Patrick Malatack

Senior Dev Lead Program Manager
Microsoft Corporation
Project Server 2010

rs
You

cu
me

s
to
sto

m
er
cu

s
Th
n
sio

is
WSS 14
s

SYeo
oSue

sus
isY

io
Th

n
Customizing PWA
improve alignment
Thanks Microsoft this is exactly
what we need!

Except…
Customizing PWA
add functionality
Awesome product Microsoft! I can’t
wait to try out “feature X” !

Wait a minute… where

is “feature X”?
Customizing PWA
create value
Did you see how Project 2010 now
has control “x”. I can’t wait to build
on that and improve it!

Hey… How come Microsoft

gets full access to this
control for their features
and I don’t?
Agenda
Server Ribbon Customization

Grid WebPart
JSGrid Department Budget WebPart

Customizing the Timesheet WebPart

Adding client-side validation with custom
errors.
Ribbon Customization
Customizing the “Tasks” User Interface

Step 1: Create WSS feature to customize the

ribbon
Step 2: Install and activate feature, deploy
icons

You can add/hide/replace buttons, groups, or entire tabs.

Consider ribbon design paradigms - check out Jensen Harris's

blog (http://blogs.msdn.com/jensenh/)
Ribbon Customization

demo
Jesse Carnathan
Senior Dev Lead
Microsoft Corporation
SharePoint.JSGrid
What is the JSGrid?
WSS control
JavaScript based
Two extensible API’s
“Server-side” C# API
“Client-side” JS API
JSON/XML
FF3/IE7/IE8
Features/Functionality
What can the JSGrid Do
No ActiveX 
‘Widgets’
‘Edit Controls’
‘Display Controls’
Copy/Paste
Undo/Redo
Fill Down
Pivoted View
Gantt View
Contoso Departmental Budget Feature
Steps to create a JSGrid WebPart

Step 1: Create a WebPart

Step 2: Write grid code behind for the
WebPart
Instantiate SharePoint.JSGrid
Bind SharePoint.GridSerializer to datasource
Define GridDataSerializer on JSGrid
Step 3: Write JavaScript in the page to
initialize grid code
Step 4: Profit… 
JSGrid WebPart

demo
Patrick Malatack
Program Manager
Microsoft Corporation
PWA Customization
Customizing the “Timesheet” page

Step 1: Create WSS feature to deploy

JavaScript to the page
Step 2: Write JavaScript to hook into the
GridSatellite framework and add a post-
processor validator
Step 3: Install and activate feature
Timesheet Customization

demo
Jesse Carnathan
Senior Dev Lead
Microsoft Corporation
Customizing PWA
Other Possibilities
Use SharePoint Designer (SPD) to customize
a workspace template
Note: that PWA WebPart pages still are not
customizable in SPD
Add PWA webparts to other SharePoint
sites including:
Project Workspace
My Site
Other SharePoint sites
SharePoint customizations such as theming
Customizing PWA
What did we see
An overview of Grid/Ribbon functionality
Customized the “Tasks” Ribbon
Added/Removed Buttons
Created a JSGrid based WebPart
Connected to our own data source
Simple and Pivoted data views
Customized “Timesheet”
Created customized client side validation logic
Added script without editing PWA pages
Customizing PWA
Take home for 2010
More mechanisms for customization
Creating new solutions are easier
Don’t reinvent the wheel
questions
© 2009 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market
conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation.
MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.