월별 아카이브: 12 월 2007

Sharepoint에서 막대 그래프 만들기

개요:

(업데이트 12/04/07: 아주 흥미 있는 웹 파트를 통해 이것을 해결 하는 다른 블로그에 링크 끝에 또 다른 흥미로운 리소스 추가)

이 블로그 항목을 SharePoint에서 막대 그래프를 만드는 방법을 설명 합니다.. 이 데이터 보기 웹 파트에 따라 달라 집니다 WSS 및 MOSS 환경에서 작동.

전반적인 접근은 다음과 같습니다.:

  1. 그래프 데이터를 포함 하는 목록 또는 문서 라이브러리 만들기.
  2. 장소 관련된 문서 라이브러리 / 사용자 지정 페이지에 나열 하 고 데이터 뷰 웹 파트를 변환 (DVWP).
  3. 그래프로 보여주는 HTML을 생성 하기 위해 DVWP의 XSL을 수정.

비즈니스 시나리오 / 설치:

내가 만든 표준 제목 열이 있는 사용자 지정 목록, 추가 열, "상태". 이 모델 (매우 simplistically) 비용에 대 한 "권한 부여" 여기서 제목을 나타냅니다 프로젝트 및 상태 값의 목록에서 시나리오:

  • 제안
  • 과정에서
  • 지연

이 상태 코드를 표시 하는 대화형 수평 막대 그래프를 생성 하는 목표는.

사람이 거주 케 된을 목록 하 고 이런 모습:

이미지

데이터 보기 웹 파트 만들기:

페이지에 사용자 지정 목록을 추가 하 여는 DVWP를 만들 (내 경우에서 사이트 페이지) 지침에 따라 여기 (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).

간단 하 게는 DVWP를 만들 뿐만 아니라, 우리는 또한 사용할 수 있는 행을 모두 표시 하려면 페이징 속성을 설정 해야. 나를 위해, 이 같이 보입니다.:

이미지

이 시점에서, 난 항상 SPD 및 브라우저를 닫습니다.. 난 다음 다시 브라우저를 사용 하 여 페이지를 엽니다.. 이 페이지에 웹 파트 레이아웃을 실수로 청소 방지.

XSLT를 수정:

그것은 지금 시간 XSLT를 수정 하려면.

나는 항상이 대 한 visual studio를 사용. (참조 여기 많은 도움이 될 것입니다 intellisense에 대 한 중요 사항에 대 한).

빈 프로젝트를 만들려면 네 개의 새 파일 추가 ("원래 단어를 교체" "new" 적절 한):

  • Original.xslt
  • New.xslt
  • 오리지널 Params.xml
  • 새로운 Params.xml

내 경우에는, 그것은 이것 처럼 보인다:

이미지

웹 파트를 수정 하 고 매개 변수 및 XSL 원본"에 복사" Visual Studio에서 버전.

목표는 여기 우리가 다시 들어가서 DVWP 쿼리에서 그래프를 렌더링 하는 HTML 결과 변환 하는 XSL 원인입니다..

이 위해, 그것은 어떤 HTML 처럼 보여야 우리가 "XSL" 이라고 하는 광 기에 의해 혼란 스 러 워 하기 전에 먼저 고려 하는 데 도움이. (확실 하 게 하려면, 다음은 간단 하 게 예; 하지 그것을 입력 또는 복사/붙여넣기 visual studio에. 전체 타격 나중에 쓰기를 위한 출발점을 제공합니다). 다음 샘플 그래프 당 바로 다음 HTML 렌더링:

막대 그래프 샘플

해당 HTML:

<html>
<바디>
<센터>
<테이블 너비 = 80%>
<tr><td><센터>가로 막대 그래프</td></tr>
<tr>
<td 정렬 = "센터">
<표 테두리 = "1" 너비 = 80%>
<tr>
<td width = 10%>오픈</td>
<td><테이블의 cellpadding ="0" cellspacing ="0" 국경 = 0 너비 = 50%><tr bgcolor = 빨간색><td>&nbsp;</td></tr></테이블></td>
</tr>
<tr>
<td width = 10%>폐쇄</td>
<td><테이블의 cellpadding ="0" cellspacing ="0" 국경 = 0 너비 = 25%><tr bgcolor = 빨간색><td>&nbsp;</td></tr></테이블></td>
</tr>
<tr>
<td width = 10%>지연</td>
<td><테이블의 cellpadding ="0" cellspacing ="0" 국경 = 0 너비 = 25%><tr bgcolor = 빨간색><td>&nbsp;</td></tr></테이블></td>
</tr>
</테이블>
</td>
</tr>
</테이블>
</바디>
</html>

"빨간색" 행의 배경색을 설정 하 여 내 막대를 만드는 죽은 간단한 접근 방식을 사용.

테이크아웃 여기가: 끝에서, 우리가 일을 하는 행과 열으로 HTML을 만들고 있다.

XSLT 템플릿:

수평 막대 그래프를 생성 하는 XSLT를 복사 했습니다.. 그것은 꽤 잘 그래서 난 추가 하지 않습니다 훨씬 여기이 노트를 제외한 주석:

  • 기본 XSL SharePoint Designer 준 처음에 DVWP를 만들 때 시작.
  • SPD의에서이 줄일 수 있었다 657 라인을 166 라인.
  • 매개 변수 XML 파일 럽 하지 않았다 (XSL에서 별도 및 DVWP 자체 수정에 갈 때 무슨 뜻인지 알게 될 거 야; 파일을 수정할 수 있습니다.). 그러나, 그것을 간단 하 게 하기 위해, XSL에서 거의 모든 그들을 제거 했 어. 즉 수 있도록 하려는 경우 이러한 매개 변수 사용, XSL에 다시 그들의 변수 정의 추가 하기만 하면. Visual studio 프로젝트에는 원래 XSL 변수 정의 할 것 이기 때문에 쉽게 될 것입니다..
  • 복사 하 여 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" 
xmlns:msxsl="항아리:스키마-microsoft-com:xslt" xmlns:xsl="http://www.w3.org/ 1999/XSL/변환"
xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer"
xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime"
xmlns:o="항아리:스키마-microsoft-com:사무실" xmlns:s="uuid:BDC6E3F0-6DA3-11d1-A2A3-00AA00C14882"
xmlns:dt="uuid:C2F41010-65B3-11 d 1-A29F-00AA00C14882" xmlns:rs="항아리:스키마-microsoft-com:행 집합" xmlns:z="#RowsetSchema"
xmlns:ddwrt2="항아리:frontpage:내부"
> <xsl:출력 메서드="html" 들여쓰기="아니" /> <xsl:10 진수 형식 NaN="" /> <xsl:param 이름="ListUrlDir"></xsl:param> <!-- 드릴 다운을 지 원하는이 필요. --> <xsl:서식 파일 경기="/" xmlns:SharePoint="Microsoft.SharePoint.WebControls"
xmlns:__designer=http://schemas.microsoft.com/WebParts/v2/DataView/designer xmlns:asp="http://schemas.microsoft.com/ASPNET/20"
> <xsl:변수 이름="dvt_StyleName">테이블</xsl:변수> <xsl:변수 이름="" 선택="/dsQueryResponse/행/행" /> <xsl:변수 이름="dvt_RowCount" 선택="개수($행)" /> <xsl:변수 이름="IsEmpty" 선택="$dvt_RowCount = 0" /> <xsl:변수 이름="dvt_IsEmpty" 선택="$dvt_RowCount = 0" /> <xsl:선택> <xsl:때 테스트="$dvt_IsEmpty"> 그래프에 데이터가 없는!<br/> </xsl:때> <xsl:그렇지 않으면> <!-- 흥미로운 물건을 여기 시작. 그래프에서 한 쌍의 각 행에 대 한 변수를 정의 해야: 항목 및 총의 %의 총 수. --> <xsl:변수 이름="totalProposed" 선택="개수(/dsQueryResponse/행/행[정상화 공간(@Status) '제안' =])" /> <xsl:변수 이름="percentProposed" 선택="$totalProposed div $dvt_RowCount" /> <xsl:변수 이름="totalInProcess" 선택="개수(/dsQueryResponse/행/행[정상화 공간(@Status) = ' 프로세스'])" /> <xsl:변수 이름="percentInProcess" 선택="$totalInProcess div $dvt_RowCount" /> <xsl:변수 이름="totalStalled" 선택="개수(/dsQueryResponse/행/행[정상화 공간(@Status) '지연' =])" /> <xsl:변수 이름="percentStalled" 선택="$totalStalled div $dvt_RowCount" /> <!-- 우리가 여기 우리의 HTML 테이블 정의. 일관 된 수 있도록 몇 가지 표준 SharePoint 스타일 여기에서 대출 오전. 난 그것 뿐만 아니라 테마 재정의 글로벌 css 파일에 변경 돼 영광 이다. --> <테이블 너비="100%" cellspacing="0" cellpadding="2" 스타일="국경-오른쪽: 1 단단한 #C0C0C0; 국경-하단: 1 단단한 #C0C0C0; 국경 왼쪽 스타일: 단단한; 국경-왼쪽-폭: 1; 국경-가기-스타일: 단단한; 국경-가기-폭: 1;"> <tr> <td 정렬="센터"> <테이블 테두리="1" 너비="100%"> <!-- 그래프를 각 상태에 대 한, 우리 "ShowBar 전화" 서식 파일. 우리는 그것을 통과합니다: 1. 행 레이블. 이 하이퍼링크로 변환. 2. 백분율 (위에서 변수). 3. 기본 목록에서 코드의 실제 필드 이름. 이 표시 라벨에 맞게 필요 하지 않습니다.. 4. 필드 값에 대 한 일치 #3. 5. 이 상태 코드의 전체 항목 (모든 상태 코드 하지 그랜드 총). 그것은 방출 한다는 <tr></tr> 그리고 수평 막대 그래프 선. 우리는 우리가 보려는 각 상태 코드에 대 한이 템플릿을 전화합니다. --> <xsl:통화 서식 이름="ShowBar"> <xsl:param으로 이름="BarDisplayLabel" 선택="' 제안 '"/> <xsl:param으로 이름="BarPercent" 선택="$percentProposed"/> <xsl:param으로 이름="QueryFilterFieldName" 선택="' 상태 '"/> <xsl:param으로 이름="QueryFilterFieldValue" 선택="' 제안 '"/> <xsl:param으로 이름="TotalItems" 선택="$totalProposed"></xsl:param으로> </xsl:통화 서식> <xsl:통화 서식 이름="ShowBar"> <xsl:param으로 이름="BarDisplayLabel" 선택="' 지연 '"/> <xsl:param으로 이름="BarPercent" 선택="$percentStalled"/> <xsl:param으로 이름="QueryFilterFieldName" 선택="' 상태 '"/> <xsl:param으로 이름="QueryFilterFieldValue" 선택="' 지연 '"/> <xsl:param으로 이름="TotalItems" 선택="$totalStalled"></xsl:param으로> </xsl:통화 서식> <xsl:통화 서식 이름="ShowBar"> <xsl:param으로 이름="BarDisplayLabel" 선택="' 과정'에서"/> <xsl:param으로 이름="BarPercent" 선택="$percentInProcess"/> <xsl:param으로 이름="QueryFilterFieldName" 선택="' 상태 '"/> <xsl:param으로 이름="QueryFilterFieldValue" 선택="' 과정'에서"/> <xsl:param으로 이름="TotalItems" 선택="$totalInProcess"></xsl:param으로> </xsl:통화 서식> </테이블> </td> </tr> </테이블> </xsl:그렇지 않으면> </xsl:선택> </xsl:서식 파일> <!-- 이 템플릿은 막대 그래프에서 개별 줄을 표시 하는 작업을 수행. 당신은 아마 당신의 여기 조정의 대부분을 할 거 야. --> <xsl:서식 파일 이름="ShowBar"> <xsl:param 이름="BarDisplayLabel" /> <!-- 레이블 표시 --> <xsl:param 이름="BarPercent"/> <!-- 합계의 %. --> <xsl:param 이름="QueryFilterFieldName"/> <!-- 쿼리를 이동 하는 데 사용 & 필터 --> <xsl:param 이름="QueryFilterFieldValue"/> <!-- 쿼리를 이동 하는 데 사용 & 필터 --> <xsl:param 이름="TotalItems" /> <!-- 이 barlabel의 총 수 --> <tr> <!-- 막대 자체 레이블. --> <td 클래스="ms-formbody" 너비="30%"> <!-- 이 다음 문 집합 빌드 쿼리 문자열을 기본 데이터의 필터링 된 보기 내려 드릴 수 있습니다.. 우리가 여기에 몇 가지 사용: 1. 우리 열에서 필터링 할 목록에 FilterField1 및 FilterValue1를 전달할 수 있습니다.. 2. SharePoint는 우리에 게 키 매개 변수를 전달, 기본 목록에이 DVWP "실행"을 가리키는 ListUrlDir. XSL 재미? --> <xsl:텍스트 사용 안 함-출력 이스케이프=""> <![CDATA[<a href ="]]></xsl:텍스트> <xsl:값의 선택="$ListUrlDir"/> <xsl:텍스트 사용 안 함-출력 이스케이프=""><![CDATA[?FilterField1 =]]></xsl:텍스트> <xsl:값의 선택="$QueryFilterFieldName"/> <xsl:텍스트 사용 안 함-출력 이스케이프=""><![CDATA[&FilterValue1 =]]></xsl:텍스트> <xsl:값의 선택="$QueryFilterFieldValue"/> <xsl:텍스트 사용 안 함-출력 이스케이프=""><![CDATA[">]]></xsl:텍스트> <xsl:값의 선택="$BarDisplayLabel"/> <xsl:텍스트 사용 안 함-출력 이스케이프=""><![CDATA[</는>]]></xsl:텍스트> <!-- 다음 비트는 형식에 몇 가지 숫자를 보여줍니다.: "(총 / % 총의)" --> (<xsl:값의 선택="$TotalItems"/> / <!-- 이 우리를 위해 좋은 백분율 레이블을 만듭니다.. 감사, 마이크로 소프트! --> <xsl:통화 서식 이름="percentformat"> <xsl:param으로 이름="%" 선택="$BarPercent"/> </xsl:통화 서식>) </td> <!-- 마지막으로, 방출 한 <td> 바에 대 한 태그 자체.--> <td> <테이블 cellpadding="0" cellspacing="0" 테두리="0" 너비="{라운드($BarPercent * 100)+1}%"> <tr bgcolor="레드"> <xsl:텍스트 사용 안 함-출력 이스케이프=""><![CDATA[&nbsp;]]></xsl:텍스트> </tr> </테이블> </td> </tr> </xsl:서식 파일> <!-- 이 MS 서식 파일에서 발견 일부 XSL에서 직접 가져온 것입니다.. --> <xsl:서식 파일 이름="percentformat"> <xsl:param 이름="%"/> <xsl:선택> <xsl:때 테스트="형식 번호($%, '#,##0%;-#,##0%')= '앤'">0%</xsl:때> <xsl:그렇지 않으면> <xsl:값의 선택="형식 번호($%, '#,##0%;-#,##0%')" /> </xsl:그렇지 않으면> </xsl:선택> </xsl:서식 파일> </xsl:스타일 시트>

결과:

위의 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:선택> 이렇게 하려면.

기타 리소스:

행복 한 변화!

<끝 />

내 블로그를 구독!

Sharepoint를 제공 하지 않습니다. “액세스 권한이 있는 사용자” 보고서

업데이트 01/28/08: 이 문제를 해결 하는이 codeplex 프로젝트: http://www.codeplex.com/AccessChecker. 나는 그것을 사용 하지 않은, 그러나이 경우 사용자 환경에서 해결 해야 하는 문제 같네요.

업데이트 11/13/08: Joel Oleson 큰 보안 관리 문제를 여기에 아주 좋은 포스트를 썼다: http://www.sharepointjoel.com/Lists/Posts/Post.aspx?목록 0cd1a63d% 2d183c% 2D4fc2 %2 D 8320 -ba5369008acb =&ID = 113. 그것은 다양 한 다른 유용한 자료 링크.

자주 질문 하는이 라인을 따라 질문 포럼 사용자와 클라이언트: "어떻게 할 내가 생성 한 사이트에 액세스할 수 있는 모든 사용자의 목록을" 또는 "어떻게 내가 자동으로 알릴 수 있습니다 목록에 대 한 변경에 대 한 목록에 액세스할 수 있는 모든 사용자?"

이 박스 솔루션의 밖 으로가 있다. 만약 당신이 잠시 동안 그것에 대해 생각, 그것은 왜 이해 하기 어려운.

SharePoint 보안은 매우 유연. 사용자의 적어도 4 개 주요 종류가 있다:

  • 익명 사용자.
  • SharePoint 사용자 및 그룹.
  • Active Directory 사용자.
  • 폼 기반 인증 (FBA) 사용자.

보안 관점에서 의미 있는 유연성, 지정된 된 SharePoint 사이트에서 다른 극적으로 다를 것 이다. 액세스 목록 보고서를 생성., 한 사이트의 보안을 확인할 필요가, 여러 개의 서로 다른 사용자 프로필 저장소를 쿼리 및 유용한 패션 선물. 그건 일반적으로 해결 하기 어려운 문제.

어떻게이 취급 하는 단체? 의견에 당신에 게 서 듣고 싶지만 또는 메일 주소.

</끝>

테크노 태그: ,