개요 및 목표
상자, 모스’ 콘텐츠 쿼리 웹 파트 (CQWP) 목록 형식으로 결과를 표시 합니다., 검색 결과 유사. 그것은 또한 표 형태로 결과 표시 수 (즉. HTML 테이블 형식). 그리드 포맷은 어떤 경우에 더 나은. 나는이 기사에서 그 효과 달성 하는 방법 설명.
비즈니스 시나리오
엔터프라이즈 모스 롤아웃에는 클라이언트와 일. 우리는 디자인의 분류는 프로젝트 계층 구조에서 첫 번째 클래스 시민 그들의 자신의 최상위 사이트. 프로젝트 관리자 프로젝트 요약 정보의 단일 목록을 유지합니다, 제목과 같은, 예산, 예상된 완료 날짜, 남은 예산 및 다른 요약 형식 필드. "단일에 의해" 사용자 지정 SharePoint 목록을 하나의 항목을 포함 하는 보장을 의미합니다. Simplistically, 그것은 이것 처럼 보인다:
기술 방식은 거의 같은 설명 여기 (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!447.entry). CQWP XSL 변환을 사용 하 여 렌더링 하는 브라우저에 대 한 HTML을 방출.
난 항상 XSL XSL은 악몽 때문에 다이빙 하기 전에 결과를 그리 다. 여기는 내 원하는 결과:
이 처럼 HTML 생성 결과:
|
|
<html>
<바디>
<센터>
<테이블 테두리= 1>
<!-- 라벨->
<tr bgcolor블루 =>
<td><글꼴 색= 흰색><b>프로젝트 이름</b></글꼴></td>
<td 정렬오른쪽 =><글꼴 색= 흰색><b>완료 날짜</b></글꼴></td>
<td 정렬오른쪽 =><글꼴 색= 흰색><b>예산</b></글꼴></td>
<td 정렬오른쪽 =><글꼴 색= 흰색><b>실제 비용</b></글꼴></td>
<td><글꼴 색= 흰색><b>전반적인 상태</b></글꼴></td>
</tr>
<tr>
<td>다시 컴퓨터 룸.</td>
<td 정렬오른쪽 =>02/01/08</td>
<td 정렬오른쪽 =>22,500.00</td>
<td 정렬오른쪽 =>19,000.00</td>
<td>진행 중</td>
</tr>
<tr>
<td>SQL 업그레이드에 대 한 제공 서버</td>
<td 정렬오른쪽 =>04/01/08</td>
<td 정렬오른쪽 =>7,500.00</td>
<td 정렬오른쪽 =>0.00</td>
<td>계획</td>
</tr>
</테이블>
</센터>
</바디>
</html>
|
접근
표를 만들려면 다음이 단계를 따르십시오:
- 그리드의 구성 요소 식별 (행/열).
- 정의 하 고 필요한 사이트 열 만들기.
- 프로젝트 및 단일 목록에 대 한 하위 사이트 만들기.
- CQWP 웹 페이지에 추가 하 고 귀하의 목록에 대 한 검색 구성.
- 추가 열을 수집 하는 CQWP XML 수정.
- 테이블을 생성 하는 XSL을 수정.
6 번에 집중 하려고 해요. 숫자 4를 통해 직선-앞으로 이며 뭔가 CQWP 사용자 이미 완료. 숫자 5는 MSDN에서이 완전 한 스크린 샷 라덴된 문서를 포함 하 여 다른 사람에 의해 문서화 되었습니다. 여기 (http://msdn2.microsoft.com/en-us/library/bb897399.aspx) 그리고 헤더 솔로몬의 블로그 여기 (http://www.heathersolomon.com/blog/articles/CustomItemStyle.aspx).
볼트와 너트
시작 및 MSDN 설명서와 헤더 솔로몬 제 5-1 단계를 구현.
이 시점에서, 당신의 CQWP 페이지에 추가 하 고 당신은 당신의 <CommonViewFields> 필요에 따라 구성.
다음 일반적인 단계, 이러한 중간 결과 얻을:
1. 콘텐츠 형식 만들기, 해당 콘텐츠 형식 및 두 사이트에 대 한 templatized 사용자 지정 목록. 여기는 콘텐츠 형식:
여기에 사이트 구조:
2. 내 프로젝트 하위 사이트와 단일 프로젝트 요약 목록을 만든 후에 CQWP 추가:
3. 통해 원하는 모든 추가 정보를 추가 합니다 <CommonViewFields>:
<속성 이름="CommonViewFields" 유형="문자열">Project_x0020_Name;Project_x0020_Expenses;Project_x0020_Status;Project_x0020_Start_x0020_Date;Project_x0020_End_x0020_Date;Project_x0020_Budget</속성>
참고 한 줄에 모든 속성 필드 유지 했다 작동 하지 않을 (CQWP 쿼리 반환 항목이 없습니다 내게 말할 것 이다).
4. 이 시점에서, 우리는 MSDN 문서 넘어 이동할 준비와 헤더 솔로몬의 기사를 통해 플립에. 그녀의 단계 단계 근처 시작 #5 사용자 정의 만들려면 / ItemStyle.xsl의 고스트 되지 않은 버전. 내가 헤더의 조언에 따라, 단계까지 11 이러한 중간 결과 얻을:
4.1: 나 XSL 서식 파일을 다음과 같이 이름을:
<xsl:서식 파일 이름 = "그리드" 경기 = "행[@Style = '그리드']" 모드 = "itemstyle">
나는 또한 약간 제안 그녀 수정 <xsl:각각에 대 한 …> 추가 하 여 한 <br /> 청소기 목록을 제공 하는 태그:
<xsl:각각에 대 한 선택="@*">
P:<xsl:값의 선택="이름()" /><br/>
</xsl:각각에 대 한>
4.2: 웹 파트를 수정, 모양에가 서 하 고 내 "그리드를 선택" 스타일:
변경 내용을 적용 하 고 여기 결과입니다.:
우리가 우리가 원하는 필드 위의에서 볼 수 있습니다. (프로젝트 이름, 비용, 상태, 등) 우리가 HTML을 내보낼 때 사용 하는 사용할 수 있습니다.. 뿐만 아니라, 하지만 우리는 우리가 XSL에 해당 열을 참조 해야 합니다 이름을. 예를 들어, 우리는 "Project_x005F_x0020_Name"로 프로젝트 상태를 참조.
이 시점에서, 우리이 거 인의 어깨 및 헤더의 블로그에서 출발, 난 내 자신의 작은 비트를 추가.
ContentQueryMain.xsl
참고: ItemStyle.xsl와 ContentQueryMain.xsl 모두를 변경 하는 경우, 변경의 효과 보고 하기 전에 이러한 파일에 다시 체크 해야.
그리드 만들기 위해, 모스 두 개의 다른 XSL 파일을 사용 하 여 우리는 CQWP에서 참조 하는 결과 생성 하. 출력의 이전 비트를 생성 하, ItemStyle.xsl 수정. MOSS는 실제로 다른 XSL 파일을 사용 하 여, ContentQueryMain.xsl에는 HTML을 생성 하는 ItemStyle.xsl와 함께. 그 이름에서 알 수 있듯이, ContentQueryMain.xsl은 "메인" 번역의 전반적인 흐름을 제어 하는 XSL. 그것은 발견된 된 모든 항목을 반복 하 고 ItemStyle.xsl에 한 명씩 템플릿에 전달. 우리는 오픈을 생성 하는 ItemStyle.xsl를 수정 합니다. <테이블> 데이터 및 폐쇄의 첫 번째 행을 방출 하기 전에 태그 <테이블> 마지막 행을 방출 후 태그. 이렇게 하려면, ContentQueryMain.xsl은 우리의 "모눈에 두 개의 매개 변수를 전달 하도록 수정" ItemStyle.xsl 서식 파일, "마지막 행" 그리고 "현재 행". ItemStyle.xsl 사용 하 여 이러한 조건에 따라 필요한 태그를 방출.
헤더 솔로몬의 기술을 사용 하 여, 우리는 ContentQueryMain.xsl를 찾습니다.. 그것은 ItemStyle.xsl와 같은 장소에 있습니다. 이 스크린 샷을 도움이 될:
우리는 다음과 같이 변경 해야:
- Xsl 서식 파일 수정, "CallItemTemplate" 그는 실제로 ItemStyle.xsl에 우리의 격자 서식 파일 호출. 우리을 것입니다 열고 닫는 조건에 따라 생성 하는 데 필요한 데이터 표 서식 파일에 두 개의 매개 변수를 전달 합니다. <테이블> 태그.
- "CallItemTemplate을 호출 하는 ContentQueryMain.xsl의 또 다른 비트 수정" LastRow"전달" 그 LastRow 우리의 격자 서식 전달 될 수 있도록 하는 매개 변수.
"OuterTemplate.CallItemTemplate 라는 서식 파일을 찾습니다" 문자열에 의해 식별:
<xsl:서식 파일 이름="OuterTemplate.CallItemTemplate">
모든 서식 파일을 다음과 같이 바꿉니다:
|
|
<xsl:서식 파일 이름="OuterTemplate.CallItemTemplate">
<xsl:param 이름="CurPosition" />
<!--
LastRow"추가" 매개 변수.
우리만 사용할 때에 항목 스타일 패스 "그리드".
-->
<xsl:param 이름="LastRow" />
<xsl:선택>
<xsl:때 테스트="@Style = 'NewsRollUpItem'">
<xsl:적용 템플릿 선택="." 모드="itemstyle">
<xsl:param으로 이름="EditMode" 선택="$cbq_iseditmode" />
</xsl:적용 템플릿>
</xsl:때>
<xsl:때 테스트="@Style = 'NewsBigItem'">
<xsl:적용 템플릿 선택="." 모드="itemstyle">
<xsl:param으로 이름="CurPos" 선택="$CurPosition" />
</xsl:적용 템플릿>
</xsl:때>
<xsl:때 테스트="@Style = 'NewsCategoryItem'">
<xsl:적용 템플릿 선택="." 모드="itemstyle">
<xsl:param으로 이름="CurPos" 선택="$CurPosition" />
</xsl:적용 템플릿>
</xsl:때>
<!--
표 itemstyle.xsl 서식 파일을 현재 위치 및 lastrow 전달.
ItemStyle.xsl 열기를 방출 하는 사용 하는 것입니다 및 닫기 <테이블> 태그.
-->
<xsl:때 테스트="@Style = '그리드'">
<xsl:적용 템플릿 선택="." 모드="itemstyle">
<xsl:param으로 이름="CurPos" 선택="$CurPosition" />
<xsl:param으로 이름="최근" 선택="$LastRow" />
</xsl:적용 템플릿>
</xsl:때>
<xsl:그렇지 않으면>
<xsl:적용 템플릿 선택="." 모드="itemstyle">
</xsl:적용 템플릿>
</xsl:그렇지 않으면>
</xsl:선택>
</xsl:서식 파일>
|
변경의 용도 설명 하는 코멘트.
물론, "OuterTemplate.CallItemTemplate" 다른 서식 파일에서 호출 자체. 이 텍스트 문자열에 대 한 검색 하 여 해당 서식 파일을 찾습니다:
<xsl:서식 파일 이름="OuterTemplate.Body">
OuterTemplate.Body의 지침을 통해 스크롤 및 LastRow 매개 변수를 다음과 같이 삽입 (기울임꼴로 표시 된 주석으로 표시):
<xsl:통화 서식 이름="OuterTemplate.CallItemTemplate">
<xsl:param으로 이름="CurPosition" 선택="$CurPosition" />
<!-- LastRow 매개 변수 삽입. -->
<xsl:param으로 이름="LastRow" 선택="$LastRow"/>
</xsl:통화 서식>
이 모든 후, 우리는 마침내 우리의 ItemStyle.xsl 방출 수 있도록 제대로 설정 하는 것이 <테이블> 바로 이곳에서 태그.
ItemStyle.Xsl
참고: 다시, 이러한 변경의 효과 볼 수 있도록 변경한 후 ItemStyle.xsl에서 확인.
우리는 여기에 두 가지 작업:
- 전체 격자 서식 파일 바꾸기. 당신이 수 있는 복사/붙여넣기 아래에서.
- 일부 점보 "formatcurrency 수 있도록 템플릿 정의 외부 추가" 작업 서식 파일. (XSL에 얇은 핸들 것을 알 수 있습니다.).
첫 번째, ItemStyle.xsl의 위쪽, 이 라인을 추가:
<!-- 미국 표시를 수 있도록 몇 가지 미신 적 점보. 통화. -->
<xsl:10 진수 형식 이름="직원" 자리="D" />
<xsl:서식 파일 이름="기본" 경기="*" 모드="itemstyle">
내가 직접 전에 추가 하는 참고는 <xsl:서식 파일 이름을 "기본 =" …> 정의.
다음, 다시 우리의 격자 서식 파일 이동. 아래 코드와 함께 전체 그리드 서식 파일 교체. 그것은 철저 하 게 주석 처리, 하지만 이메일로 또는 질문이 있으시면 제 블로그에 덧 글을 남길 주저 하지 마시고.
|
|
<xsl:서식 파일 이름="그리드" 경기="행[@Style = '그리드']" 모드="itemstyle">
<!--
ContentMain.xsl 전달 CurPos 및 마지막.
이를 사용 하 여 조건부로 열기를 방출 및 닫기 <테이블> 태그.
-->
<xsl:param 이름="CurPos" />
<xsl:param 이름="최근" />
<!-- 다음 변수는 표준 ItemStyle.xsl에서 수정 -->
<xsl:변수 이름="SafeImageUrl">
<xsl:통화 서식 이름="OuterTemplate.GetSafeStaticUrl">
<xsl:param으로 이름="UrlColumnName" 선택="' ImageUrl'"/>
</xsl:통화 서식>
</xsl:변수>
<xsl:변수 이름="SafeLinkUrl">
<xsl:통화 서식 이름="OuterTemplate.GetSafeLink">
<xsl:param으로 이름="UrlColumnName" 선택="' LinkUrl'"/>
</xsl:통화 서식>
</xsl:변수>
<xsl:변수 이름="DisplayTitle">
<xsl:통화 서식 이름="OuterTemplate.GetTitle">
<xsl:param으로 이름="제목" 선택="@Title"/>
<xsl:param으로 이름="UrlColumnName" 선택="' LinkUrl'"/>
</xsl:통화 서식>
</xsl:변수>
<xsl:변수 이름="LinkTarget">
<xsl:만약 테스트="@OpenInNewWindow = 'true'" >_blank</xsl:만약>
</xsl:변수>
<!--
우리는 변수를 정의 하는 여기, "tableStart". 이 테이블의 열 레이블을 오프닝 정의를 사용 하 여 HTML을 포함. 경우 CurPos = 1, 그것은 CDATA 태그에 HTML을 포함.
그렇지 않으면, 그것은 비어 있을 것입니다..
TableStart의 값은 emited ContentQueryMain.xsl 통해 ItemStyle를 호출할 때마다.
-->
<xsl:변수 이름="tableStart">
<xsl:만약 테스트="$CurPos = 1">
<![CDATA[
<표 테두리 = 1>
<tr bgcolor = "블루">
<td><글꼴 색 = "화이트"><b>프로젝트 이름</b></글꼴></td>
<td 정렬 "오른쪽" =><글꼴 색 = "화이트"><b>완료 날짜</b></글꼴></td>
<td 정렬 "오른쪽" =><글꼴 색 = "화이트"><b>예산</b></글꼴></td>
<td 정렬 "오른쪽" =><글꼴 색 = "화이트"><b>실제 비용</b></글꼴></td>
<td><글꼴 색 = "화이트"><b>전반적인 상태</b></글꼴></td>
</tr>
]]>
</xsl:만약>
</xsl:변수>
<!--
또 다른 변수, tableEnd 단순히 정의 닫는 태그 테이블.
TableStart와 마찬가지로, 그것은 항상 emited. 이 때문에 그 값이 조건부로 여부 우리 ContentQueryMain.xsl에 의해 마지막 행 통과 되었습니다 했습니다 따라 할당.
-->
<xsl:변수 이름="tableEnd">
<xsl:만약 테스트="$CurPos = $Last">
<![CDATA[ </테이블> ]]>
</xsl:만약>
</xsl:변수>
<!--
TableStart의 내용을 항상 방출. 이것이 ContentQueryMain.xsl에 의해 우리에 게 전달 된 첫 번째 행, 그럼 우리가 그 값은 비게 됩니다 알고.
때문에 출력 이스케이프를 비활성화 때 tableStart 하지 비워두고, 우리는 브라우저에서 렌더링 하고자 하는 실제 HTML을 포함 하 고 있습니다.. 우리가 말하지 않는 XSL 파서가 사용 하지 않으려면 출력 이스케이프, 그것은 같은 물건을 생성 됩니다 "<테이블>는;" 대신 "<테이블>".
-->
<xsl:값의 선택="$tableStart" 사용 안 함-출력 이스케이프="예"/>
<tr>
<!--
P:Project_x005F_x0020_Name P:Project_x005F_x0020_End_x005F_x0020_Date P:Project_x005F_x0020_Budget P:Project_x005F_x0020_Expenses P:Project_x005F_x0020_Status
-->
<td>
<xsl:값의 선택="@Project_x005F_x0020_Name"/>
</td>
<td 정렬="오른쪽">
<xsl:값의 선택="@Project_x005F_x0020_End_x005F_x0020_Date"/>
</td>
<td 정렬="오른쪽">
<xsl:통화 서식 이름="formatcurrency">
<xsl:param으로 이름="값"
선택="@Project_x005F_x0020_Budget"></xsl:param으로>
</xsl:통화 서식>
</td>
<td 정렬="오른쪽">
<xsl:통화 서식 이름="formatcurrency">
<xsl:param으로 이름="값" 선택="@Project_x005F_x0020_Expenses">
</xsl:param으로>
</xsl:통화 서식>
</td>
<td>
<xsl:값의 선택="@Project_x005F_x0020_Status"/>
</td>
<!--
다음의 모든 것 들을 명확 하 게 주석으로 처리.
그러나, 그것을 돌려 보내야 하 고 그것으로 물건을 <td> 그것의 효과 볼 수.
-->
<!--
<div id = "linkitem" 클래스 = "항목">
<xsl:만약 테스트 = "문자열 길이($SafeImageUrl) != 0">
<사업부 클래스 = "이미지 영역 왼쪽">
<a href = "{$SafeLinkUrl}" 대상 = "{$LinkTarget}">
<img 클래스 = "이미지-조정-너비" src = "{$SafeImageUrl}"
alt = "{@ImageUrlAltText}"/>
</는>
</div>
</xsl:만약>
<사업부 클래스 = "링크 항목">
<xsl:통화 서식
name="OuterTemplate.CallPresenceStatusIconTemplate"/>
<a href = "{$SafeLinkUrl}"
대상 = "{$LinkTarget}" 제목 = "{@LinkToolTip}">
<xsl:값의 선택 = "$DisxslyTitle" />
</는>
<사업부 클래스 = "설명">
<xsl:select="@Description 값의" />
</div>
</div>
</div>
-->
</tr>
<!--
방출 닫는 태그 테이블. 우리는 마지막 행에 있지 않은 경우,
이 비어 있을 것입니다..
-->
<xsl:값의 선택="$tableEnd" 사용 안 함-출력 이스케이프="예"/>
</xsl:서식 파일>
<xsl:서식 파일 이름="formatcurrency">
<xsl:param 이름="값" 선택="0" />
<xsl:값의 선택='형식 번호($값, "$DDD,DDD,DDD입니다.DD ", "직원")' />
</xsl:서식 파일>
|
