概述:
(更新 12/04/07: 在連結到此位址通過一個非常有趣的 web 部件的另一個博客的末尾添加另一個有意思的資源)
此博客條目描述了如何在 SharePoint 中創建橫條圖. 這在 WSS 和苔蘚的環境中工作,因為它只取決於資料檢視 web 部件.
總體方法是,如下所示:
- 創建一個包含您想要的圖形的資料的清單或文件庫.
- 關聯的文件庫的地方 / 自訂清單拖到頁上並將其轉換為一個資料檢視 web 部件 (DVWP).
- 修改 DVWP 的 XSL 生成 HTML,它顯示的圖形.
業務應用場景 / 安裝程式:
我創建了一個自訂清單與標準的標題列和一個額外的列, "地位". 此模型 (很簡單) "授權費用" 其中標題表示專案和地位值的清單中的方案:
- 建議
- 在進程中
- 停滯
目標是產生互動的水準橫條圖,顯示了這些狀態碼.
我有填充清單,它看起來像這樣:
創建資料檢視 Web 組件:
通過向頁中添加的自訂清單創建 DVWP (在我的案子的網站頁面) 按照說明進行操作 在這裡 (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).
除了簡單地創建 DVWP, 我們還需要設置分頁屬性,以顯示所有可用行. 對我來說, 這看起來像這樣的東西:
在這一點, 我始終關閉 SPD 和瀏覽器. 然後重新打開使用瀏覽器的頁. 這樣可以避免不小心弄在頁面上 web 部件佈局.
修改 XSLT:
現在是時候要修改 XSLT.
我總是使用 visual studio 為此. (請參閱 在這裡 為將説明你很多的智慧感知有關的重要說明).
創建一個空的專案添加四個新檔 (改為"原始" 以及"新" 在適當情況下):
- Original.xslt
- New.xslt
- 原 Params.xml
- 新 Params.xml
以我為例, 它看起來像這樣:
修改 web 部件和複製 params 和 XSL 到"原始" 在 Visual Studio 的版本.
在這裡的目標是導致的 XSL 轉換的結果,我們從回來的 DVWP 查詢到 HTML 呈現為一個圖.
為此目的, 它有助於首先考慮什麼 HTML 應該看起來像之前我們被稱為"XSL"瘋狂迷惑. (要弄清楚, 以下是只是一個例子; 不要鍵入或複製/粘貼到 visual studio 中. 我提供充分的打擊,後來在那寫-向上的切入點). 下面的示例圖呈現 HTML 後立即按:
相應的 HTML:
<html> <正文> <中心> <表寬度 = 80%> <tr><運輸署><中心>水準橫條圖</運輸署></tr> <tr> <td 對齊 ="中心"> <表格邊框 ="1" 寬度 = 80%> <tr> <td 寬度 = 10%>打開</運輸署> <運輸署><表 cellpadding ="0" 格 ="0" 邊境 = 0 寬度 = 50%><背景色 tr = 紅色><運輸署>&n b s p;</運輸署></tr></表></運輸署> </tr> <tr> <td 寬度 = 10%>關閉</運輸署> <運輸署><表 cellpadding ="0" 格 ="0" 邊境 = 0 寬度 = 25%><背景色 tr = 紅色><運輸署>&n b s p;</運輸署></tr></表></運輸署> </tr> <tr> <td 寬度 = 10%>停滯</運輸署> <運輸署><表 cellpadding ="0" 格 ="0" 邊境 = 0 寬度 = 25%><背景色 tr = 紅色><運輸署>&n b s p;</運輸署></tr></表></運輸署> </tr> </表> </運輸署> </tr> </表> </正文> </html> |
我用一個死簡單的方法,對通過設置為"紅色"行的背景顏色創建我的酒吧.
這是這裡的外賣: 在結束, 我們做的所有創建 HTML 具有行和列.
XSLT 範本:
我已經複製的 XSLT 生成水準橫條圖. 它是相當好注釋掉,因此我不會加在你那多在這裡除了這些筆記:
- 我開始用預設 SharePoint 設計師給了我,當我第一次創建 DVWP 的 XSL.
- 我是能夠從 SPD 的砍這 657 行到 166 線條.
- 我沒搞砸在附近使用參數的 XML 檔 (這是單獨從 XSL 和你就會知道你去修改 DVWP 本身是什麼意思; 有兩個檔,您可以修改). 不過, 為了簡化它, 我刪除幾乎所有人都從 XSL. 這意味著,如果您想要使用這些參數, 你只需要將其變數定義添加回 XSL. 這將是容易,因為你將有原始的 XSL 變數定義在您的 visual studio 專案.
- 你應該能夠複製並粘貼這直接到您的 visual studio 專案. 然後, 我的電話中刪除和插入來電轉接到"ShowBar".
- 通過創建工程,深化 <a href> 喜歡這個: http://server/List?FilterField1=fieldname&FilterValue1=actualFilterValue. 這種技術可能在其他上下文中的價值. 在第一次, 我以為我會需要符合更複雜的格式: http://server/List/AllItems.aspx?View={guid}&FilterField1=blah&FilterValue1=blah, 但在我的環境,這不是必要. 此清單中的 URL 通過 SharePoint 被傳遞給我們,所以這是很容易概括.
這裡是:
<xsl:樣式表 版本="1.0" 排除-結果-首碼="rs z o s ddwrt dt msxsl" |
結果:
從上面的 XSL 生成此圖:
鑽取到的基礎資料通過點擊的狀態碼:
思想總結:
可這被普遍?
我愛這個圖形的概念, 但我討厭的事實是,我不得不進去,做這麼多的手動編碼. 我已經很少考慮到它是否可以被推廣也樂觀, 但我也有點害怕的時候,可能是某處的道路上不會提供任何變通的磚牆. 如果任何人有一些好的點子上這, 請在評論中記或 電子郵件通知我.
垂直圖:
這是一個水準橫條圖. 很有可能要創建一個垂直圖. 我們只需要更改 HTML. 我會開始以同樣的方式: 創建 HTML 表示形式的分隔號形圖,然後找出如何獲得,通過 XSL. 如果任何人有興趣, 我能說服試試,處理掉這些問題. 如果某人已經做了,, 請讓我知道,我很樂意鏈接到你的博客🙂
我認為一個垂直圖表的挑戰,是圖形的標籤更難管理, 但當然不是不可能.
欄位名稱地方:
有至少兩個事情要尋找與您的欄位名稱.
第一次, 帶有空格的欄位名稱已在 XSL 轉義. 這可能是一個問題在這裡:
<xsl:變數 名稱="totalProposed"
請選擇="計數(/dsQueryResponse/行/列[正常化空間(@Status) = '建議'])" />
如果您的狀態"" 列實際上是名為"狀態碼" 然後您需要引用它作為"Status_x0020_Code":
<xsl:變數 名稱="totalProposed"
請選擇="計數(/dsQueryResponse/行/列[正常化空間(@Status_x0020_Code) = '建議'])" />第二次, 我對此有點模糊, 但你也必須要對欄位名稱更改的通知. 如果你的名字你的領域"狀態碼" 然後再上, 將它重命名為"AFE 狀態", "內部名稱" 不會更改. 內部名稱仍將"狀態碼" 並且必須引用作為"Status_x0020_Code". "其他資源" 連結可説明診斷和糾正這種問題.
那個顏色:
我選了"紅色" 因為它是我喜歡的那一刻. 它不會是一個大問題來顯示不同的顏色,以便提供號碼的不僅僅是視覺的描述, 但也提供一個有用的 KPI. 舉個例子, 如果所占的百分比"停頓" Afe 的 > 10% 然後顯示紅色, 否則顯示它在黑. 使用 <xsl:選擇> 要實現此目的.
其他資源:
- 確定內部名稱 (和其他很好的資訊) 為清單中的資料: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!134.entry
- 顯示提供的 SharePoint 的所有資料 (原始 XML): http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!190.entry
- 獲取某個特定列的 XPATH 運算式: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!155.entry
- 使用 OWA 的另一種方法(?). 我不挖進去, 但前景看好, 特別是為圓形圖: http://www.waka.dk/Blog/PermaLink,guid,e2532e71-d774-4ac9-8f25-883964b830f4.aspx
快樂轉型!
<結束 />
此頁幾乎完成了我一直在尋找的任務.
我有一個想要使用 SharePoint 調查清單來創建每週投票團體. 漁獲? 他們不想看到的代碼… 或更改系統,每次他們發送輪詢 (每週的更新計畫).
我是能夠連接到調查清單和在答案的第一列上創建關係圖. 雖然我無法預測的值和標籤,他們將需要向前移動. 為了使事情更糟糕的是他們可能會有更多或更少答案可用每週.
會在其他地方只是以防萬一, 但任何人都已經找到了一個方法來創建行和標籤基於可用的選項和動態地設置這些設置,而不是硬式編碼預期值的數目?
感謝保羅. 非常有説明. 謝謝你對你的工作, 我是能夠將圖形欄列添加到現有的 DVWP (例如:. 為任務) 非常輕鬆地與您的代碼只是幾行.
在 SharePoint 設計器中, 插入資料檢視以標題和 % 完成從工作清單中的列. 我將游標放在一個儲存格並按一下滑鼠右鍵. 我選擇插入一列向右. 在代碼視圖中, 我發現了 <運輸署> 和替換 <xsl:在您的代碼的儲存格內的文本元素:
<表 cellpadding ="0" 格 ="0" 邊境 ="0"
寬度 ="{一輪(@PercentComplete * 100)+1}%">
<tr 樣式 ="背景顏色:紅色">
<xsl:文本禁用輸出轉義 ="yes"><![CDATA[&n b s p;]]></xsl:文本>
</tr>
</表>
請注意我改變行顏色代碼從背景色 ="紅色" 為樣式 ="背景顏色:紅色"
還, 能夠在我的清單中選擇一列 (@PercentComplete) 在"$BarPercent 位置"
葛列格 ·
另一種方法 (使用僅 SharePoint 使用者介面):
http://pathtosharepoint.wordpress.com/2008/09/02/a-progress-bar-for-your-tasks-list/
http://pathtosharepoint.wordpress.com/2008/10/21/progress-bar-color-coding/
xmlns:__designer =http://schemas.microsoft.com/WebParts/v2/DataView/designer xmlns:asp ="http://schemas.microsoft.com/ASPNET/20">
選擇 ="計數(/dsQueryResponse/行/列[正常化空間(@Status)= 'WIP'])" />
http://www.microsoft.com/sharepoint/downloads/components/detail.asp?a1=701伊恩 · 莫里斯張貼這在五月 2006. 我試著在 MOSS 中 2007 而且很好. 添加到 gac 中, execadmsvcjobs 和 iisreset 了…
好帖子, 謝謝!
好帖子, 謝謝!
嗨保羅!
好工作! 我腦子裡也有這樣的事情,以圖形方式查看 SharePoint 列表 😉
我有一個“在 SharePoint 中使用儀表板”’ 問題. 我們是一家軍隊醫院,使用 MOSS 標準作為我們的內聯網,並希望為我們的指揮組構建一個儀表板,以查看“實時”’ 如果可能的話. 要點之一查看當前即時在設施內的工作負荷和字面上看它更改向上和向下 (可能需要按一下 “刷新”/F5).
謝謝你在前進,
你可以用 jQuery 來實現這種效果有用的東西. 在我的電子郵件 galvin.paul@gmail.com 我會很樂意,試圖給一隻手.