Sharepoint 2013內容查詢Web部件自定義顯示樣式(實戰)

廣州華軟發表於2019-04-10

分享人:廣州華軟 星塵

一. 前言

在進行Sharepoint開發時,經常會遇到內容展示個性化需求的問題,當然如果通過自定義開發控制元件對於內容展示的需求基本都可以很好的解決,但自定義開發也有不好的地方,例如可能會有潛在的相容性問題和開發時間較長。其實Sharepint平臺自帶的一個內容查詢Web部件功能比較實用,比如通過內容查詢Web部件進行簡單的配置可以很快的實現展示整個網站下所有文件庫中的文件。但是內容查詢Web部件預設顯示的欄位較少,只有標題、連結、縮圖等,如果我們想要顯示較多的欄位,那就要通過對內容查詢Web部件的顯示樣式進行自定義才可以實現。

本文以最近一個專案需求為例: 通過內容查詢Web部件顯示某個網站下的所有文件,並且需要顯示文件的名稱、檔案大小、建立者、修改時間等欄位。

顯示效果:

 

 

二. 目錄

1.在SPD中新增自定義樣式

2.匯出內容查詢Web部件

3.編輯匯出的內容查詢Web部件

4.匯入編輯後的內容查詢Web部件

5.選擇自定義樣式

6.總結

三. SPD中新增自定義樣式

在SPD中新增自定義樣式“共享文件”:

在SPD中找到網站集的樣式庫,開啟XSL Style Sheets,開啟ItemStyle.xsl檔案進行編輯,在尾部</xsl:stylesheet>前加入以下樣式程式碼:

   <!-- 以下為共享文件 樣式 -->

   <xsl:template name="共享文件" match="Row[@Style='共享文件']" mode="itemstyle">

       <xsl:variable name="SafeLinkUrl">

            <xsl:call-template name="OuterTemplate.GetSafeLink">

                 <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>

            </xsl:call-template>

       </xsl:variable>

       <xsl:variable name="DisplayTitle">

            <xsl:call-template name="OuterTemplate.GetTitle">

                <xsl:with-param name="Title" select="''"/>

                <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>

                <xsl:with-param name="UseFileName" select="1"/>

            </xsl:call-template>

       </xsl:variable>

              

       <html>

       <table width="100%" cellpadding="0" cellspacing="0" class="custom_ShareDoc_table">

       <xsl:if test="count(preceding-sibling::*)=0">

       <tr>

       <td width="5%" valign="top"><div class="item"><img width="16" height="16" border="0" src="/_layouts/15/images/icgen.gif"></img></div></td>

       <td width="55%" valign="top"><div class="item">名稱</div></td>

       <td width="10%" valign="top"><div class="item">檔案大小</div></td>

       <td width="7%" valign="top" align="center"><div class="item">共享人</div></td>

       <td width="23%" valign="top"><div class="item">修性時間</div></td>

       </tr>

       </xsl:if>

       

       <tr>

       <td width="5%" valign="top">

           <xsl:if test="string-length(@DocumentIconImageUrl) != 0">

               <div class="image-area-left">

                   <img class="image" src="{@DocumentIconImageUrl}" title="" />

               </div>

           </xsl:if>

       </td>

       <td width="55%" valign="top">

           <div class="link-item">

               <xsl:call-template name="OuterTemplate.CallPresenceStatusIconTemplate"/>

               <a href="{$SafeLinkUrl}" title="{@LinkToolTip}">

                   <xsl:if test="$ItemsHaveStreams = 'True'">

                     <xsl:attribute name="onclick">

                       <xsl:value-of select="@OnClickForWebRendering"/>

                     </xsl:attribute>

                   </xsl:if>

                   <xsl:if test="$ItemsHaveStreams != 'True' and @OpenInNewWindow = 'True'">

                     <xsl:attribute name="onclick">

                       <xsl:value-of disable-output-escaping="yes" select="$OnClickTargetAttribute"/>

                     </xsl:attribute>

                   </xsl:if>

                   <xsl:value-of select="$DisplayTitle"/>

               </a>

           </div>

        </td>

        <td width="10%" valign="top">

           <div class="item">

               <xsl:value-of select="round(number(@FileSizeDisplay) div number(1024))" />KB

           </div>

        </td>

        <td width="7%" valign="top" align="center">

           <div class="item">

                <xsl:value-of select="@Author" />

           </div>

        </td>

        <td width="23%" valign="top">        

            <div class="item">

                <xsl:value-of select="@Modified" />

            </div>

        </td>

       </tr>

       </table>

       </html>

  </xsl:template>

 

四. 匯出內容查詢Web部件

1.在需要顯示共享文件的網站頁面中新增一個內容查詢Web部件,編輯Web部件,設定查詢條件和篩選條件,選擇預設樣式,然後儲存設定。

2.點選Web部件的“匯出”按鈕將內容查詢Web部件匯出到本地檔案。

 

 

 

五. 編輯匯出的內容查詢Web部件

在本地使用記事本編輯匯出的內容查詢Web部件 ,在檔案中找到“<property name="CommonViewFields" type="string">”新增需要在內容查詢Web部件中顯示的欄位,注意:欄位名稱必須是內部名稱,格式為:欄位名稱,型別。

 

 

儲存檔案。

 

六. 匯入編輯後的內容查詢Web部件

1. 在頁面中刪除原來的內容查詢Web部件。

2. 在頁面中新增Web部件時匯入本地的自定義Web部件檔案“共享文件.webpart”,並新增到頁面中。

七. 選擇自定義樣式

編輯Web部件,在簡報中的顯示樣式處選擇“共享文件”樣式。

儲存配置,儲存頁面。

八. 總結

通過建立自定義的內容查詢Web部件顯示樣式,即可實現對資料展示個性化的需求,而且可以節省開發時間,自定義的內容查詢Web部件顯示樣式具有一定的通用性,只要建立了個樣式,在整個網站中的任何網站頁面中都可以引用,做到了同一內容型別的展示效果一次開發到處使用。

 

相關文章