從零開始做基於 SharePoint 的簡易項目管理應用

“循序漸進，循序漸進，再循序漸進！”——巴普洛夫，《給青年們的一封信》

 

混合幾種 SharePoint 的應用開發模式，從無到有，做一個簡易的項目管理應用。

說明：DEV 是我的電腦機器名，如果大家要到自己的電腦上測試，需要修改成自己電腦的名稱或者地址。完整項目源碼可以從 github 地址：Project Management 獲取。

1. 從紙上到網上

參考：PowerShell - Creating SharePoint 2010 Web Application

1.1 創建項目應用程序

1.2 創建項目網站

命令執行完畢，打開瀏覽器，輸入網址：http://dev:8110 ，應該看到下面這樣的界面。暫時什么都沒有。。。

1.3 創建項目列表

1.3.1 在 VS 里面建一個空白 SharePoint 2010 項目（Project List）

起名叫做“Project List”。這個項目部署后將自動生成“項目”列表所需的內容類型、字段和一個項目列表的實例。

“空白項目”模板是一個非常好的模板，猶如一張白紙，提供你創作發揮的空間。

完整項目源碼可以從 github 地址：Project Management 獲取。我這里就不再粘貼代碼了。

1.3.1.1 在項目中添加一個“內容類型”項，定義好需要的字段

利用 VS 開發 SharePoint “內容類型”的具體步驟，可以參考這篇 在 Visual Studio 2010 中為 SharePoint 2010 創建內容類型。只不過，這篇文章說得還是有些不清楚，實際動手會遇到各種問題（坑多），只能通過看別人寫好的源碼來參考解決了。

“內容類型”可以被想象成 ASP.NET MVC 中的 Model、Ruby On Rails 里面的 Active Record。而且，通過 SharePoint 的 Content Type Hub 功能可以實現類型定義在多個站點的分發（同步）。這是一個比較厲害的功能，但是用起來也要小心，不規划一下是不行的。

需要 GUID 的，可以在 Visual Studio 2010 命令行下面用 guidgen.exe 調出生成 GUID 的程序。或者，像我一樣，去網上生成，比如去 GUID 生成網站。

SharePoint 幾個“Title”內建字段的 ID，可以到 這里 查到。

1.3.1.2 在項目中添加一個“列表定義”項，引入剛剛定義好的項目內容類型

開發“列表定義”的細節，可以參考這篇 在 Visual Studio 2010 中創建 SharePoint 2010 列表定義。

1.3.2 在 VS 里面建一個空白 SharePoint 2010 項目（Project Status）

然后，再添加一個空白項目，用來定義 Project Status （項目狀態）列表的內容類型和列表實例。

同“在 VS 里面建一個空白 SharePoint 2010 項目（Project List）”。

“項目狀態”和“項目”是關聯的，所以，我們需要設置一下對應 Features 的依賴關系。如下節所述。

1.3.3 修改 Features 的屬性

部屬前，整理好各個 Feature 的名稱，添加好 ImageURL，我喜歡用“CATLG.GIF”：

設置好 Feature 之間的依賴關系，這里 Project Status 是依賴於 Project List 的。

1.3.4 部署解決方案

先部署“Project List”，然后部署“Project Status”，然后部署“Style Web Parts”。

部署完畢，打開網站（不是網站集）的 Features 列表，應該可以看到了。

 

別忘記建立一個代表承建部門的用戶組，方便以后給 Project 做訪問權限控制用：

現在就可以弄點兒數據進去看看了。

開發測試階段，可以在項目文件的 Features 里面添加事件，讓 Feature 在被激活成功以后（也就是列表被創建成功以后），自動添加一些測試數據。

 

2. 查看項目及其狀態（一對多）

到目前為止，項目及其狀態信息仍然是分離的，要到2個列表中各自查看。現在，我們要把項目狀態信息加入查看項目信息的界面，實現“一對多”的查看效果。

  

2.1 為 Project Status 的 Project 字段添加一個額外的“ID” 字段

2.2 在 SharePoint Designer 中打開站點

2.3 修改 Projects 列表的 DispForm.aspx 頁面

添加 Project Status 列表查詢控件，並以當前 Project 的 ID 字段為條件過濾查詢結果。

參考：這里。英文的，而且是 SharePoint 2007 的，道理是一樣的，將就看吧。

同時給新加入的 Project Status 列表部件加點兒樣式，美化一下。圖簡便的話，直接將 CSS 寫在頁面里，不過推薦還是寫在一個 Content Editor Web Part 里面或者用上面給出的 github 解決方案里面的 Style Web Parts 中的 “Child List Style” Web Part 比較好，這樣管理和移植起來方便。

用於輸出 CSS 樣式的 Web Parts 集合。

2.4 保存看效果

 

3. 項目狀態統計圖

網頁上面畫統計圖，當然是用 highcharts 啦！基於SVG，各種特性具備，支持各種統計圖形。highcharts 的性能么，在 IE 上面是有點兒慢，不過還能接受；FireFox 上面能快很多；在 Chrome 上面則是飛一樣的快！

3.1 部署 highcharts js 庫到網站

手動建一個 Document Library，起名叫做“Component”。

然后，把下載的 highcharts js 庫文件拖進去，然后，把 JQuery 也拖進去。就像這樣：

3.2 開發 VS 解決方案

這里用一個空白的 SharePoint 沙盒解決方案，然后加一個 Web Part 項目進去，用這個 Web Part 輸出 highchart 腳本到頁面輸出統計圖。

顯然，這個項目的 Feature 是依賴於 Project Status 的。

部署以后，在頁面上添加這個 Web Part。

最后的效果是這樣的：

 

4. 部署過程總結

1. 首先，運行 PowerShell 腳本把宿主網站建好，加好用戶組
2. 然后，從 github 上面把解決方案代碼拉下來（或者只將 wsp 文件拉下來）
3. 依次部署解決方案里面的：Project List，Project Status，Project Status Chart，Style Web Part
4. 建立 Component 文檔庫，把 highcharts 和 jquery 拖進去
5. 用 SharePoint Designer 修改 Project List 的 DispForm.aspx 頁面，拖入 Project Status 列表查詢 Web Part 並設置好參數；同時也將 Style Web Part 里面的 Child List Web Part 也插入此頁
6. 在首頁添加 Project Status Chart Web Part
7. 錄入數據
8. 完成。

 

附：

做這個簡單的應用，我是故意把幾種開發方式都拉出來混合體現的。所以看上去可能有點兒怪怪的

其實還沒完。

Project Status Chart 不是實際的需求，是我從實際需求改過來的，目的是為了說明如何使用 highcharts。實際的需求，是工作量、缺陷數量等信息，涉及到更多的列表和更加細致的權限管理，很長個，估計能寫本書出來。

另外，計算統計項目狀態數據的時候，算法和設計沒有優化。

權限管理這里也被省略了，需要規划，實際應用中，不會只有一個站點的，也不會只有一個項目列表。權限對於 SharePoint 解決方案的設計會產生重大影響。