Tổng quan:
(CẬP NHẬT 12/04/07: Thêm một nguồn tài nguyên thú vị vào cuối liên kết đến một blog địa chỉ này thông qua một phần web rất thú vị)
Blog entry này mô tả làm thế nào để tạo ra một biểu đồ thanh trong SharePoint. Điều này hoạt động trong môi trường WSS và RÊU như nó chỉ phụ thuộc vào phần web xem dữ liệu.
Cách tiếp cận tổng thể là như sau:
- Tạo một danh sách hoặc thư viện tài liệu có chứa dữ liệu bạn muốn lập đồ thị.
- Đặt thư viện tài liệu liên quan / tuỳ chỉnh danh sách vào một trang và chuyển nó đến một phần dữ liệu xem web (DVWP).
- Sửa đổi XSL của DVWP để tạo ra HTML mà thể hiện như là một đồ thị.
Kinh doanh kịch bản / Thiết lập:
Tôi đã tạo ra một danh sách tùy chỉnh với cột tiêu đề tiêu chuẩn và một cột bổ sung, "Trạng thái". Mô hình này (rất simplistically) sự "cho phép cho chi phí" kịch bản đại diện nơi tiêu đề cho dự án và vị thế một giá trị từ danh sách:
- Đề xuất
- Trong quá trình
- Bị ngừng
Mục tiêu là để sản xuất một biểu đồ thanh ngang tương tác cho thấy các mã trạng thái.
Tôi có dân cư trong danh sách và nó trông như thế này:
Tạo dữ liệu xem Web phần:
Tạo ra DVWP bằng cách thêm danh sách tùy chỉnh cho một trang (Trang web trang trong trường hợp của tôi) và thực hiện theo các hướng dẫn Ở đây (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).
Ngoài chỉ đơn giản là việc tạo ra DVWP, chúng tôi cũng cần phải thiết lập các tài sản phân trang để hiển thị tất cả các hàng có sẵn. Đối với tôi, Điều này có vẻ như thế này:
Tại thời điểm này, Tôi luôn luôn đóng SPD và trình duyệt. Tôi sau đó tái mở trang bằng cách sử dụng trình duyệt. Điều này tránh vô tình mucking lên giao diện phần web trên trang.
Sửa đổi XSLT:
Nó bây giờ là thời gian để sửa đổi XSLT.
Tôi luôn luôn sử dụng visual studio cho điều này. (Xem Ở đây cho một lưu ý quan trọng về intellisense mà sẽ giúp bạn rất nhiều).
Tôi tạo ra một dự án trống thêm bốn tập tin mới (thay thế các từ "bản gốc" và "New" phù hợp):
- Original.XSLT
- New.XSLT
- Bản gốc Params.xml
- Mới Params.xml
Trong trường hợp của tôi, nó trông như thế này:
Sửa đổi phần web và sao chép chủ và XSL "bản gốc" Phiên bản trong Visual Studio.
Mục tiêu ở đây là để gây ra XSL để biến đổi kết quả mà chúng tôi nhận được trở lại từ các truy vấn DVWP vào HTML mà ám là một đồ thị.
Để kết thúc này, nó giúp đầu tiên xem xét những gì HTML nên trông giống như trước khi chúng tôi bị lẫn lộn bởi insanity được gọi là "XSL". (Để được rõ ràng, sau đây là chỉ đơn giản là một ví dụ; không gõ nó hoặc sao chép/dán vào phòng thu trực quan. Tôi cung cấp một cú đánh đầy đủ điểm khởi đầu cho rằng sau này trong ghi-up). Đồ thị mẫu sau đây trả lại theo HTML ngay lập tức sau:
HTML tương ứng:
<HTML> <cơ thể> <Trung tâm> <bàn chiều rộng = 80%> <tr><TD><Trung tâm>Biểu đồ thanh ngang</TD></tr> <tr> <TD align = "Trung tâm"> <biên giới bảng = "1" chiều rộng = 80%> <tr> <chiều rộng TD = 10%>Mở</TD> <TD><bảng cellpadding ="0" cellspacing ="0" biên giới = 0 width = 50%><tr bgcolor = đỏ><TD> </TD></tr></Bàn></TD> </tr> <tr> <chiều rộng TD = 10%>Đóng cửa</TD> <TD><bảng cellpadding ="0" cellspacing ="0" biên giới = 0 width = 25%><tr bgcolor = đỏ><TD> </TD></tr></Bàn></TD> </tr> <tr> <chiều rộng TD = 10%>Bị ngừng</TD> <TD><bảng cellpadding ="0" cellspacing ="0" biên giới = 0 width = 25%><tr bgcolor = đỏ><TD> </TD></tr></Bàn></TD> </tr> </Bàn> </TD> </tr> </Bàn> </cơ thể> </HTML> |
Tôi đã sử dụng một cách tiếp cận chết đơn giản để tạo ra quán bar của tôi bằng cách thiết lập màu nền của một hàng để "đỏ".
Take-away đây là điều này: Cuối cùng, Tất cả chúng tôi đang làm là tạo ra HTML với các hàng và cột.
Mẫu XSLT:
Tôi đã sao chép XSLT mà tạo ra một biểu đồ thanh ngang. Nó là khá tốt nhận xét vì vậy tôi sẽ không thêm nhiều ở đây ngoại trừ những ghi chú:
- Tôi bắt đầu với mặc định XSL SharePoint Designer đã cho tôi khi tôi lần đầu tiên tạo ra DVWP.
- Tôi đã có thể cắt giảm từ của SPD 657 dòng để 166 dây chuyền.
- Tôi không lộn xộn xung quanh với các tập tin XML tham số (đó là riêng biệt từ XSL và bạn sẽ biết những gì tôi có nghĩa là khi bạn đi để sửa đổi DVWP chính nó; có hai tập tin bạn có thể sửa đổi). Tuy nhiên, để đơn giản hóa nó, Tôi đã loại bỏ gần như tất cả chúng từ XSL. Điều này có nghĩa rằng nếu bạn muốn làm cho việc sử dụng những tham số, bạn chỉ cần thêm định nghĩa biến của họ trở lại vào XSL. Đó sẽ là dễ dàng kể từ khi bạn sẽ có các định nghĩa biến XSL ban đầu trong dự án phòng thu trực quan của bạn.
- Bạn nên có thể sao chép và dán này trực tiếp vào dự án phòng thu trực quan của bạn. Sau đó, loại bỏ các cuộc gọi của tôi và chèn của riêng bạn cuộc gọi đến "ShowBar".
- Khoan xuống hoạt động bằng cách tạo ra một <a href> Thích cái này: http://server/List?FilterField1=fieldname&FilterValue1=actualFilterValue. Kỹ thuật này có thể giá trị trong ngôn ngữ này. Ban đầu, Tôi nghĩ rằng tôi sẽ cần phải phù hợp với một định dạng phức tạp hơn: http://server/List/AllItems.aspx?View={guid}&FilterField1=blah&FilterValue1=blah, nhưng trong môi trường của tôi đó là không cần thiết. Danh sách URL được thông qua cho chúng tôi bởi SharePoint vì vậy đây là khá dễ dàng để khái quát.
Ở đây nó là:
<XSL:stylesheet Phiên bản="1.0" loại trừ kết quả tiền tố="RS z o s ddwrt dt msxsl" |
Kết quả:
XSL từ phía trên tạo ra biểu đồ này:
Khoan xuống đến các dữ liệu cơ bản bằng cách nhấp vào mã trạng thái:
Kết luận suy nghĩ:
Điều này có thể được tổng quát?
Tôi yêu này khái niệm đồ họa, nhưng tôi ghét thực tế là tôi phải đi và làm rất nhiều tay mã hóa. Tôi đã đưa ra một chút suy nghĩ cho dù nó có thể được tổng quát và tôi lạc quan, nhưng tôi cũng một chút sợ hãi rằng có thể có một bức tường gạch một nơi nào đó dọc theo con đường mà sẽ không cung cấp bất kỳ công việc quanh. Nếu bất cứ ai có một số ý tưởng tốt về điều này, Xin vui lòng làm cho một lưu ý trong các ý kiến hoặc gửi email cho tôi.
Đồ thị theo chiều dọc:
Đây là một biểu đồ thanh ngang. Nó là chắc chắn có thể để tạo ra một đồ thị theo chiều dọc. Chúng tôi chỉ cần thay đổi mã HTML. Tôi sẽ bắt đầu theo cùng một cách: Tạo ra một đại diện HTML của một biểu đồ thanh theo chiều dọc và sau đó tìm ra cách để có được mà qua XSL. Nếu có ai quan tâm đến việc đó, Tôi có thể được thuyết phục để thử và làm việc ra các kinks. Nếu ai đó đã thực hiện mà, xin vui lòng cho tôi biết và tôi sẽ sẵn sàng liên kết đến blog của bạn 🙂
Tôi nghĩ rằng các thách thức với một đồ thị dọc là các nhãn cho đồ thị khó khăn hơn để quản lý, nhưng chắc chắn không phải không thể.
Lĩnh vực tên Gotcha:
Có ít nhất hai điều để tìm với tên trường của bạn.
Đầu tiên, một tên trường với một không gian đã được thoát khỏi những trong XSL. Điều này có lẽ sẽ là một vấn đề ở đây:
<XSL:biến Tên="totalProposed"
chọn="Bá tước(/dsQueryResponse/hàng/hàng[bình thường hóa không gian(@Status) = 'Đề nghị'])" />
Nếu tình trạng"của bạn" cột này thực sự được đặt tên "tình trạng mã" sau đó bạn cần phải tham khảo nó như là "Status_x0020_Code":
<XSL:biến Tên="totalProposed"
chọn="Bá tước(/dsQueryResponse/hàng/hàng[bình thường hóa không gian(@Status_x0020_Code) = 'Đề nghị'])" />Thứ hai, và tôi là một chút mờ về điều này, nhưng bạn cũng cần phải cảnh báo cho lĩnh vực tên thay đổi. Nếu bạn đặt tên cho lĩnh vực của bạn "tình trạng mã" và sau đó trên, đổi tên nó thành"AFE", "tên nội bộ" không thay đổi. Tên nội bộ vẫn sẽ "tình trạng mã" và phải được tham chiếu như "Status_x0020_Code". Các "khác tài nguyên" liên kết có thể giúp chẩn đoán và sửa chữa các loại vấn đề.
Về màu:
Tôi đã chọn "đỏ" bởi vì nó là dễ chịu với tôi lúc này. Nó sẽ không là một vấn đề lớn cho các màu sắc khác nhau để cung cấp nhiều hơn chỉ là một mô tả trực quan của một số, nhưng cũng cung cấp một KPI hữu ích. Ví dụ:, Nếu tỷ lệ phần trăm của "ngừng" Của AFE là > 10% sau đó hiển thị nó màu đỏ, Nếu không hiển thị nó trong màu đen. Sử dụng <XSL:chọn> để thực hiện việc này.
Tài nguyên khác:
- Xác định tên nội bộ (và thông tin tốt) cho các dữ liệu trong một danh sách: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!134.entry
- Hiển thị tất cả các dữ liệu được cung cấp bởi SharePoint (XML nguyên): http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!190.entry
- Nhận được biểu thức XPATH của một cột cụ thể: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!155.entry
- Một cách tiếp cận sử dụng OWA(?). Tôi đã không đào vào nó, nhưng có vẻ đầy hứa hẹn, đặc biệt là cho các biểu đồ pie: http://www.waka.dk/Blog/PermaLink,guid,e2532e71-d774-4ac9-8f25-883964b830f4.aspx
Hạnh phúc chuyển đổi!
<kết thúc />
Trang này gần như hoàn thành công việc tôi đã tìm kiếm.
Tôi có một nhóm muốn sử dụng danh sách SharePoint khảo sát để tạo ra một cuộc thăm dò lượt. Việc nắm bắt? Họ không muốn nhìn thấy mã… Hoặc thay đổi hệ thống mỗi khi họ gửi các cuộc thăm dò (lên kế hoạch cho một cập nhật hàng tuần).
Tôi đã có thể kết nối này vào danh sách cuộc khảo sát và tạo ra các đồ thị trên cột câu trả lời đầu tiên. Mặc dù những gì tôi không thể dự đoán là các giá trị và nhãn mà họ sẽ cần phải di chuyển về phía trước. Để làm cho vấn đề tồi tệ hơn họ có thể có nhiều hơn hoặc ít hơn câu trả lời có mỗi tuần.
Tôi sẽ tìm ở nơi khác chỉ trong trường hợp, nhưng bất cứ ai đã tìm thấy một cách để tạo ra hàng và nhãn dựa tắt của số lượng các tùy chọn khả dụng và tự động thiết lập những thay vì chăm chỉ mã hóa các giá trị kỳ vọng?
Cảm ơn Paul. Rất hữu ích. Nhờ công việc của bạn, Tôi đã có thể để thêm một biểu đồ thanh cột vào một DVWP hiện tại (Ví dụ như. cho tác vụ) rất dễ dàng với chỉ một vài dòng mã của bạn.
Trong SharePoint Designer, Tôi chèn một xem dữ liệu với tiêu đề và % hoàn thành cột từ một danh sách công việc. Tôi đặt con trỏ vào một trong các tế bào và nhấp chuột phải. Tôi chọn chèn một cột bên phải. Trong chế độ xem mã, Tôi tìm thấy các <TD> và thay thế các <XSL:yếu tố văn bản bên trong các tế bào với mã của bạn:
<bảng cellpadding ="0" cellspacing ="0" biên giới ="0"
chiều rộng = "{vòng(@PercentComplete * 100)+1}%">
<phong cách tr = "màu nền:màu đỏ">
<XSL:văn bản vô hiệu hoá-đầu ra-thoát = "có"><![CDATA[ ]]></XSL:văn bản>
</tr>
</Bàn>
Lưu ý tôi thay đổi hàng màu mã từ bgcolor = "đỏ" phong cách = "màu nền:màu đỏ"
Cũng, đã có thể chọn một trong các cột trong danh sách của tôi (@PercentComplete) thay cho "$BarPercent"
Greg
Một phương pháp (bằng cách sử dụng chỉ các giao diện người dùng 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">
chọn = "count(/dsQueryResponse/hàng/hàng[bình thường hóa không gian(@Status)= 'WIP'])" />
http://www.microsoft.com/sharepoint/downloads/components/detail.asp?a1=701Ian Morrish đăng này trong tháng 2006. Tôi đã cố gắng trong MOSS 2007 và nó hoạt động tốt. Thêm vào gấc, đã phải execadmsvcjobs và iisreset…
Great đăng bài, Cảm ơn!
Great đăng bài, Cảm ơn!
Hi Paul!
Làm việc tốt đẹp! Tôi cũng có một cái gì đó như thế này trong tâm trí của tôi để xem danh sách SharePoint một cách đồ họa 😉
Tôi có một ‘Sử dụng Dashboards trong SharePoint’ câu hỏi. Chúng tôi là một bệnh viện quân sự sử dụng tiêu chuẩn MOSS cho Intranet của chúng tôi và muốn xây dựng một bảng điều khiển cho Tập đoàn chỉ huy của chúng tôi để xem ‘thời gian thực’ Nếu có thể. Một trong những điểm chính là xem khối lượng công việc hiện tại thời gian thực trong các cơ sở và nghĩa đen xem nó thay đổi lên và xuống (có thể phải nhấp vào “làm mới”/F5).
Cảm ơn bạn trước,
Bạn có thể làm một cái gì đó hữu ích với jQuery để thực hiện này có hiệu lực. Gửi email cho tôi tại Galvin.Paul@Gmail.com và tôi sẽ được hạnh phúc để thử và giúp một tay.