Pangkalahatang-ideya at Layunin
Sa labas ng kahon sa, Lumot’ Bahagi ng nilalaman Query Web (CQWP) nagpapakita ng mga resulta nito sa isang listahan ng format, similar to search results. It is also possible to display the results in a grid format (i.e. HTML talahanayan format). Grid formats are better in some circumstances. I describe how to achieve that effect in this article.
Negosyo Sitwasyon
I have worked with a client on an enterprise-wide MOSS rollout. We have designed their taxonomy such that projects are first class citizens in the hierarchy and have their own top level site. Project managers maintain a singleton list of project summary information, tulad ng pamagat, badyet, inaasahang pagkumpleto petsa, remaining budget and other summary type fields. By "singleton" I mean a custom SharePoint list guaranteed to contain only one item. Simplistically, ito ganito ang hitsura:
Ang teknikal na diskarte ay magkano ang parehong tulad ng inilarawan dito (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!447.entry). The CQWP uses an XSL transform to emit HTML for the browser to render.
I always envision the result before diving into the XSL because XSL is a nightmare. Here’s my desired result:
HTML tulad nito bumubuo na resulta:
|
|
<html>
<katawan>
<sentro>
<talahanayan hangganan= 1>
<!-- Mga etiketa ->
<tr bgcolor= Asul>
<td><ay kulay= Puti><b>Project Pangalan</b></ay></td>
<td ihanay= Kanan><ay kulay= Puti><b>Kumpletuhin Petsa</b></ay></td>
<td ihanay= Kanan><ay kulay= Puti><b>Badyet</b></ay></td>
<td ihanay= Kanan><ay kulay= Puti><b>Aktwal na Gastos</b></ay></td>
<td><ay kulay= Puti><b>Pangkalahatang Katayuan</b></ay></td>
</tr>
<tr>
<td>Re-wire ng computer room.</td>
<td ihanay= Kanan>02/01/08</td>
<td ihanay= Kanan>22,500.00</td>
<td ihanay= Kanan>19,000.00</td>
<td>Isinasagawa</td>
</tr>
<tr>
<td>Pagkakaloob ng mga server para sa SQL upgrade</td>
<td ihanay= Kanan>04/01/08</td>
<td ihanay= Kanan>7,500.00</td>
<td ihanay= Kanan>0.00</td>
<td>Pinlano</td>
</tr>
</talahanayan>
</sentro>
</katawan>
</html>
|
Lapit
Sundin ang mga hakbang upang lumikha ng grid:
- Kilalanin ang mga bahagi ng grid (hilera / haligi).
- Tukuyin at gumawa ng kinakailangang mga haligi ng site.
- Lumikha ng mga sub site para sa mga proyekto at walang pareho listahan.
- Idagdag ang CQWP sa isang pahina ng web at i-configure ito upang maghanap para sa iyong mga listahan.
- Baguhin ang XML sa CQWP upang lumikom ng karagdagang mga haligi.
- Baguhin ang XSL upang makabuo ng isang talahanayan.
I’m going to concentrate on number six. Numbers one through four are straight-forward and something that any CQWP user has already done. Number five has been well-documented by others including this exhaustive screen-shot laden article from MSDN dito (http://msdn2.microsoft.com/en-us/library/bb897399.aspx) at Heather Solomon blog dito (http://www.heathersolomon.com/blog/articles/CustomItemStyle.aspx).
Mani At Bolts
Simulan at ipatupad ang mga hakbang na isa hanggang limang bilang bawat ang MSDN babasahin at artikulo ng Heather Solomon.
Sa puntong ito, naidagdag mo ang ang iyong CQWP sa pahina at mayroon kang iyong <CommonViewFields> isinaayos kung kinakailangan.
Ng pagsunod sa mga karaniwan na hakbang, Nakukuha ko mga intermediate resulta na ito:
1. Lumikha ng isang uri ng nilalaman, a templatized custom list for that content type and two sites. Here is the content type:
Narito ang site na istraktura:
2. Idagdag ang CQWP matapos ang paglikha ng aking mga mga subsite proyekto at walang pareho mga listahan ng buod ng proyekto:
3. Magdagdag ng lahat ng mga karagdagang impormasyon na gusto ko sa pamamagitan ng <CommonViewFields>:
<ari-arian pangalan="CommonViewFields" uri="pisi">Project_x0020_Name;Project_x0020_Expenses;Project_x0020_Status;Project_x0020_Start_x0020_Date;Project_x0020_End_x0020_Date;Project_x0020_Budget</ari-arian>
Tandaan na ako ay upang panatilihin ang lahat ng mga patlang ng ari-arian sa isang linya o hindi ito ay gumagana (CQWP ay sabihin sa akin na query ay hindi nagbalik ng mga item).
4. Sa puntong ito, we’re ready to move beyond the MSDN article and flip on over to Heather Solomon’s article. Follow her steps starting near step #5 upang lumikha ng isang pasadyang / unghosted version of ItemStyle.xsl. I follow Heather’s advice, up sa pamamagitan ng hakbang 11 at makakuha ng mga mga intermediate resulta na ito:
4.1: Pangalanan ang aking XSL template tulad ng mga sumusunod:
<xsl:template name="Grid" match="Row[@Style=’Grid’]" mode="itemstyle">
Din ako bahagyang baguhin ang kanyang iminungkahing <xsl:para sa-bawat …> sa pamamagitan ng pagdaragdag ng isang <br /> i-tag upang magbigay ng isang mas malinis na listahan:
<xsl:para sa-bawat piliin="@ *">
P:<xsl:halaga-ng piliin="pangalan()" /><br/>
</xsl:para sa-bawat>
4.2: Ko baguhin ang web bahagi, go to appearance and select my "Grid" estilo:
Ilapat ang pagbabago at dito ay ang resulta:
Maaari naming makita mula sa itaas na ang mga patlang na gusto namin (Project pangalan, gastos, katayuan, at iba pa) are available for us to use when we emit the HTML. Not only that, but we see the names by which we must reference those columns in the XSL. Halimbawa, we reference Project Status as "Project_x005F_x0020_Name".
Sa puntong ito, umalis kami mula sa blog Heather sa at mula sa mga balikat ng mga higante, Idagdag ko ang aking sariling kaunti.
ContentQueryMain.xsl
Tandaan: Kapag nagsasagawa ng mga pagbabago sa ang parehong ContentQueryMain.xsl pati na rin ItemStyle.xsl, kailangan mong suriin ang mga file pabalik sa bago mo makita ang mga epekto ng iyong mga pagbabago.
Para sa mga layunin sa paggawa ng grid-, MOSS uses two different XSL files to produce the results we see from a CQWP. To generate the previous bit of output, we modified ItemStyle.xsl. MOSS actually uses another XSL file, ContentQueryMain.xsl to in conjunction with ItemStyle.xsl to generate its HTML. As its name implies, ContentQueryMain.xsl is the "main" XSL that controls the overall flow of translation. It iterates through all the found items and passes them one by one to templates in ItemStyle.xsl. We’ll modify ItemStyle.xsl to generate the open <talahanayan> tag bago nagpapalabas ang unang hanay ng data at ang pagsasara <talahanayan> tag after emitting the last row. To accomplish this, ContentQueryMain.xsl is modified to pass two parameters to our "grid" template sa ItemStyle.xsl, "last row" and "current row". ItemStyle.xsl uses these to conditionally emit the necessary tags.
Paggamit ng pamamaraan Heather Solomon, we locate ContentQueryMain.xsl. It is located in the same place as ItemStyle.xsl. This screen shot should help:
Kailangan naming gawin ang mga sumusunod na pagbabago:
- Baguhin ang isang xsl template, "CallItemTemplate" that actually invokes our Grid template in ItemStyle.xsl. We will pass two parameters to the Grid template so that it will have the data it needs to conditionally generate opening and closing <talahanayan> mga tag.
- Modify another bit of ContentQueryMain.xsl that calls the "CallItemTemplate" to pass it a "LastRow" parameter upang LastRow ay maaaring maipasa sa aming Grid template.
Locate the template named "OuterTemplate.CallItemTemplate" kinilala sa pamamagitan ng string ng:
<xsl:template pangalan="OuterTemplate.CallItemTemplate">
Palitan ang buong template tulad ng mga sumusunod:
|
|
<xsl:template pangalan="OuterTemplate.CallItemTemplate">
<xsl:itigil pangalan="CurPosition" />
<!--
Add the "LastRow" parametro.
We only use it when the item style pass in is "Grid".
-->
<xsl:itigil pangalan="LastRow" />
<xsl:piliin>
<xsl:kapag pagsubok="@ Estilo = sa 'NewsRollUpItem'">
<xsl:Ilapat ang-template piliin="." paraan="itemstyle">
<xsl:may-param pangalan="EditMode" piliin="$cbq_iseditmode" />
</xsl:Ilapat ang-template>
</xsl:kapag>
<xsl:kapag pagsubok="@ Estilo = sa 'NewsBigItem'">
<xsl:Ilapat ang-template piliin="." paraan="itemstyle">
<xsl:may-param pangalan="CurPos" piliin="$CurPosition" />
</xsl:Ilapat ang-template>
</xsl:kapag>
<xsl:kapag pagsubok="@ Estilo = sa 'NewsCategoryItem'">
<xsl:Ilapat ang-template piliin="." paraan="itemstyle">
<xsl:may-param pangalan="CurPos" piliin="$CurPosition" />
</xsl:Ilapat ang-template>
</xsl:kapag>
<!--
Pass ang kasalukuyang posisyon at lastrow sa ang Grid itemstyle.xsl ng template.
Gagamitin ng ItemStyle.xsl na upang humalimuyak ang bukas at pagsasara <talahanayan> mga tag.
-->
<xsl:kapag pagsubok="@ Estilo = 'Grid' na">
<xsl:Ilapat ang-template piliin="." paraan="itemstyle">
<xsl:may-param pangalan="CurPos" piliin="$CurPosition" />
<xsl:may-param pangalan="Huli" piliin="$LastRow" />
</xsl:Ilapat ang-template>
</xsl:kapag>
<xsl:kung hindi>
<xsl:Ilapat ang-template piliin="." paraan="itemstyle">
</xsl:Ilapat ang-template>
</xsl:kung hindi>
</xsl:piliin>
</xsl:template>
|
Ang mga komento ay ilarawan ang layunin ng mga pagbabago.
Talaga, the "OuterTemplate.CallItemTemplate" is itself called from another template. Locate that template by searching for this text string:
<xsl:template pangalan="OuterTemplate.Body">
Mag-scroll sa pamamagitan ng mga tagubilin sa OuterTemplate.Body at ipasok ang LastRow parameter na tulad ng sumusunod (ipinapakita bilang isang puna sa italics):
<xsl:call-template pangalan="OuterTemplate.CallItemTemplate">
<xsl:may-param pangalan="CurPosition" piliin="$CurPosition" />
<!-- Ipasok ang LastRow parameter. -->
<xsl:may-param pangalan="LastRow" piliin="$LastRow"/>
</xsl:call-template>
Matapos ang lahat ng ito, namin sa wakas ng mga bagay-set up nang maayos sa gayon na ang aming ItemStyle.xsl maaaring magbigay <talahanayan> mga tag sa tamang lugar.
ItemStyle.Xsl
Tandaan: Muli, suriin sa ItemStyle.xsl pagkatapos ng paggawa ng anumang mga pagbabago upang makita mo ang epekto ng mga pagbabago.
Mayroon kaming dalawang mga gawain dito:
- Replace the entire Grid template. You can copy/paste from below.
- Add some mumbo jumbo outside the template definition that enables "formatcurrency" template to work. (Maaari mong sabihin na mayroon akong isang manipis na hawakan sa XSL).
Una, malapit sa tuktok ng ItemStyle.xsl, idagdag ang linyang ito:
<!-- Ang ilang mga mumbo elepante na nagbibigay-daan sa amin upang ipakita U.S. pera. -->
<xsl:decimal-format pangalan="mga tauhan" tambilang="D" />
<xsl:template pangalan="Default" tumugma="*" paraan="itemstyle">
Tandaan na ang idinagdag ko ito nang direkta bago ang <xsl:template name="Default" …> depinisyon.
Susunod, go back to our Grid template. Replace the entire Grid template with the code below. It is thoroughly commented, ngunit huwag mag-atubiling mag-email sa akin o mag-iwan ng mga komento sa aking blog kung mayroon kang mga katanungan.
|
|
<xsl:template pangalan="Parilya" tumugma="Hilera[@ Estilo = 'Grid' na]" paraan="itemstyle">
<!--
ContentMain.xsl pumasa CurPos at huling.
Ginagamit namin ito sa nang may pasubali humalimuyak ang bukas at pagsasara <talahanayan> mga tag.
-->
<xsl:itigil pangalan="CurPos" />
<xsl:itigil pangalan="Huli" />
<!-- Ang mga sumusunod na mga variable ay na unmodified mula sa standard ItemStyle.xsl -->
<xsl:nagbabago pangalan="SafeImageUrl">
<xsl:call-template pangalan="OuterTemplate.GetSafeStaticUrl">
<xsl:may-param pangalan="UrlColumnName" piliin="'ImageUrl'"/>
</xsl:call-template>
</xsl:nagbabago>
<xsl:nagbabago pangalan="SafeLinkUrl">
<xsl:call-template pangalan="OuterTemplate.GetSafeLink">
<xsl:may-param pangalan="UrlColumnName" piliin="'LinkUrl'"/>
</xsl:call-template>
</xsl:nagbabago>
<xsl:nagbabago pangalan="DisplayTitle">
<xsl:call-template pangalan="OuterTemplate.GetTitle">
<xsl:may-param pangalan="Pamagat" piliin="@ Pamagat"/>
<xsl:may-param pangalan="UrlColumnName" piliin="'LinkUrl'"/>
</xsl:call-template>
</xsl:nagbabago>
<xsl:nagbabago pangalan="LinkTarget">
<xsl:kung pagsubok="@ OpenInNewWindow = 'tunay'" >_blank</xsl:kung>
</xsl:nagbabago>
<!--
Dito namin tukuyin ang isang variable, "tableStart". Ito ay naglalaman ng HTML
. Tandaan na kung CurPos = 1, ito kasama ang HTML sa isang tag CDATA.
Kung hindi, ito ay walang laman.
Ang halaga ng tableStart ay emited bawat oras ItemStyle ay tinatawag na sa pamamagitan ng
.
-->
<xsl:nagbabago pangalan="tableStart">
<xsl:kung pagsubok="$CurPos = 1">
<![CDATA[
<talahanayan border = 1>
<tr bgcolor="blue">
<td><font color="white"><b>Project Pangalan</b></ay></td>
<td align="right"><font color="white"><b>Kumpletuhin Petsa</b></ay></td>
<td align="right"><font color="white"><b>Badyet</b></ay></td>
<td align="right"><font color="white"><b>Aktwal na Gastos</b></ay></td>
<td><font color="white"><b>Pangkalahatang Katayuan</b></ay></td>
</tr>
]]>
</xsl:kung>
</xsl:nagbabago>
<!--
Isa pang variable, tumutukoy tableEnd lamang ang pagsasara ng tag ng talahanayan.
Tulad ng sa tableStart, ito ay palaging emited. Ito ay kung bakit ang ang halaga nito ay
.
-->
<xsl:nagbabago pangalan="tableEnd">
<xsl:kung pagsubok="$CurPos = $ Huling">
<![CDATA[ </talahanayan> ]]>
</xsl:kung>
</xsl:nagbabago>
<!--
Laging humalimuyak ang mga nilalaman ng tableStart. Kung hindi ito ang unang
, pagkatapos namin alam ang halaga nito
.
Huwag paganahin ang output escaping dahil kapag tableStart ito ay hindi blangko, ito
. Kung
, it will generate
stuff like "<talahanayan>" instead of "<talahanayan>".
-->
<xsl:halaga-ng piliin="$tableStart" huwag paganahin-output-escaping="oo"/>
<tr>
<!--
P:Project_x005F_x0020_Name
:Project_x005F_x0020_End_x005F_x0020_Date
:Project_x005F_x0020_Budget
:Project_x005F_x0020_Expenses
:Project_x005F_x0020_Status
-->
<td>
<xsl:halaga-ng piliin="@ Project_x005F_x0020_Name"/>
</td>
<td ihanay="karapatan">
<xsl:halaga-ng piliin="@ Project_x005F_x0020_End_x005F_x0020_Date"/>
</td>
<td ihanay="karapatan">
<xsl:call-template pangalan="formatCurrency">
<xsl:may-param pangalan="halaga"
piliin="@ Project_x005F_x0020_Budget"></xsl:may-param>
</xsl:call-template>
</td>
<td ihanay="karapatan">
<xsl:call-template pangalan="formatCurrency">
<xsl:may-param pangalan="halaga" piliin="@ Project_x005F_x0020_Expenses">
</xsl:may-param>
</xsl:call-template>
</td>
<td>
<xsl:halaga-ng piliin="@ Project_x005F_x0020_Status"/>
</td>
<!--
Lahat ng mga sumusunod ay nagkomento sa linawin ng mga bagay.
Gayunman, dalhin ito pabalik at Bagay-bagay ang mga ito sa isang <td> upang makita ang
.
-->
<!--
<div id="linkitem" class="item">
<xsl:if test="string-length($SafeImageUrl) != 0">
<div class="image-area-left">
<a href="{$SafeLinkUrl}" target="{$LinkTarget}">
<img class="image-fixed-width" src="{$SafeImageUrl}"
alt="{@ ImageUrlAltText}"/>
</isang>
</div>
</xsl:kung>
<div class="link-item">
<xsl:call-template
name="OuterTemplate.CallPresenceStatusIconTemplate"/>
<a href="{$SafeLinkUrl}"
target="{$LinkTarget}" title="{@ LinkToolTip}">
<xsl:value-of select="$DisplayTitle"/>
</isang>
<div class="description">
<xsl:value-of select="@Description" />
</div>
</div>
</div>
-->
</tr>
<!--
Humalimuyak ang pagsasara ng tag talahanayan. Kung hindi kami sa huling hilera,
ito ay magiging blangko.
-->
<xsl:halaga-ng piliin="$tableEnd" huwag paganahin-output-escaping="oo"/>
</xsl:template>
<xsl:template pangalan="formatCurrency">
<xsl:itigil pangalan="halaga" piliin="0" />
<xsl:halaga-ng piliin='format-NUMBER($halaga, "$DDD,DDD,DDD.DD", "staff")' />
</xsl:template>
|
