Descripció i objectiu
Fora de la caixa, MOSS’ Part de Web de consulta de contingut (CQWP) Visualitza els seus resultats en format llista, similar als resultats de cerca. També és possible mostrar els resultats en un format de quadrícula (i. e. Format de la taula HTML). Quadrícula formats són millors en algunes circumstàncies. Es descriu com aconseguir aquell efecte en aquest article.
Escenari de negocis
He treballat amb un client en un desplegament de molsa àmplia d'empresa. Hem dissenyat la seva taxonomia tal que projectes són ciutadans de primera classe en la jerarquia i tenir el seu propi lloc de nivell superior. Gestors de projectes mantenir una llista de singleton d'informació resum projecte, com el títol, pressupost, data de finalització prevista, pressupost restant i altres camps de tipus de resum. Per "singleton" Em refereixo a una llista del SharePoint personalitzat garanteix que contenen només un element. Elementalment, s'assembla a això:
L'aproximació tècnica és molt similar a com es descriu aquí (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!447.entry). El CQWP utilitza una transformació XSL per emetre HTML per al navegador per representar.
Sempre imaginar el resultat abans de capbussar-se en l'XSL perquè XSL és un malson. Aquí és el meu resultat desitjat:
Genera HTML com aquest que resulten:
|
|
<HTML>
<cos>
<Centre>
<taula frontera= 1>
<!-- Etiquetes->
<tr BGCOLOR= blau>
<TD><tipus de lletra color= blanc><b>Nom del projecte</b></tipus de lletra></TD>
<TD Alineació= dreta><tipus de lletra color= blanc><b>Data completa</b></tipus de lletra></TD>
<TD Alineació= dreta><tipus de lletra color= blanc><b>Pressupost</b></tipus de lletra></TD>
<TD Alineació= dreta><tipus de lletra color= blanc><b>Despesa real</b></tipus de lletra></TD>
<TD><tipus de lletra color= blanc><b>Global Status</b></tipus de lletra></TD>
</tr>
<tr>
<TD>Re-filferro aules d'informàtica.</TD>
<TD Alineació= dreta>02/01/08</TD>
<TD Alineació= dreta>22,500.00</TD>
<TD Alineació= dreta>19,000.00</TD>
<TD>En curs</TD>
</tr>
<tr>
<TD>Servidors de provisió per a rampa de SQL</TD>
<TD Alineació= dreta>04/01/08</TD>
<TD Alineació= dreta>7,500.00</TD>
<TD Alineació= dreta>0.00</TD>
<TD>Previst</TD>
</tr>
</taula>
</Centre>
</cos>
</HTML>
|
Enfocament
Seguiu aquests passos per crear la graella:
- Identificar els components de la quadrícula (files o columnes).
- Definir i crear columnes necessàries.
- Crear subllocs per les llistes de singleton i projectes.
- Afegir la CQWP a una pàgina web i configurar-lo per buscar les llistes.
- Modificar XML del CQWP per recollir les columnes addicionals.
- Modificar l'XSL per generar una taula.
Vaig a concentrar-se en nombre de sis. Números a través de quatre són directament endavant i una cosa que qualsevol usuari CQWP ha fet ja. Número cinc ha estat documentada per altres incloent-hi aquest exhaustiu article carregat de captura de pantalla des de MSDN aquí (http://msdn2.microsoft.com/en-us/library/bb897399.aspx) i el blog de Heather Solomon aquí (http://www.heathersolomon.com/blog/articles/CustomItemStyle.aspx).
Nous i baldes
Iniciar i implementar passos Uno a cinc segons la documentació de MSDN i article de Heather Solomon.
En aquest punt, li he afegit el seu CQWP a la pàgina i teniu el seu <CommonViewFields> configurat segons calgui.
Seguint els passos habituals, Puc obtenir aquests resultats intermedis:
1. Crear un tipus de contingut, una llista amb plantilla personalitzada per a aquest tipus de contingut i dos llocs. Aquí és el tipus de contingut:
Aquí és l'estructura del lloc:
2. Afegir el CQWP després de crear el meu projecte subllocs i solitàries llistes resum projecte:
3. Afegir tota la informació addicional que vol mitjançant la <CommonViewFields>:
<propietat nom="CommonViewFields" tipus="corda">Project_x0020_Name;Project_x0020_Expenses;Project_x0020_Status;Project_x0020_Start_x0020_Date;Project_x0020_End_x0020_Date;Project_x0020_Budget</propietat>
Tingueu en compte que havia de mantenir tots els camps de propietat sobre una línia o no anava a funcionar (CQWP vols dir-me que la consulta ha tornat cap element).
4. En aquest punt, estem preparats per anar més enllà de l'article MSDN i Ditada a sobre a l'article de Heather Solomon. Seguir els seus passos començant a prop pas #5 per crear una mida / versió unghosted de ItemStyle.xsl. Vaig seguir el Consell de Heather, amunt a través del pas 11 i aconseguir aquests resultats intermedis:
4.1: Nom de la meva plantilla XSL com segueix:
<XSL:nom de la plantilla = "malla" partit = "fila[@Style = 'Grid']" el mode = "itemstyle">
També lleugerament modificar li va suggerir <XSL:per a cada …> afegint un <br /> etiqueta per proporcionar una llista netejador:
<XSL:per a cada Selecciona="@*">
P:<XSL:valor de Selecciona="nom()" /><BR/>
</XSL:per a cada>
4.2: Puc modificar l'element web, Aneu a aparença i seleccioneu meu "malla" estil:
Aplicar el canvi i aquí està el resultat:
Podem veure des de l'anterior que els camps que volem (Nom del projecte, despesa, l'estat, etc) estan disponibles per a nosaltres utilitzar quan vam emetre l'HTML. No només allò, però veiem els noms pel qual ens ha de fer referència a les columnes a l'XSL. Per exemple, Situació del projecte ens de referència com "Project_x005F_x0020_Name".
En aquest punt, Sortim des del blog de Heather i de les espatlles d'aquests gegants, Afegeixo la meva pròpia una mica.
ContentQueryMain.xsl
NOTA: Quan fent canvis en tant ContentQueryMain.xsl com ItemStyle.xsl, necessita comprovar que aquells arxius de tornada a abans de veure l'efecte dels canvis.
Finalitats preparar quadrícula, MOLSA utilitza dos diferents als fitxers XSL per produir els resultats que podem veure des d'un CQWP. Generar l'anterior bits de sortida, hem modificat ItemStyle.xsl. MOLSA de fet utilitza un altre fitxer XSL, ContentQueryMain.xsl a conjuntament amb ItemStyle.xsl per generar el seu HTML. Com el nom implica, ContentQueryMain.xsl és el principal"" XSL que controla el flux global de traducció. Itera a través de tots els elements trobats i passa-los un per un per plantilles en ItemStyle.xsl. Anem a modificar ItemStyle.xsl per generar l'obert <taula> l'etiqueta abans que emet la primera fila de dades i el tancament <taula> etiqueta després que emet l'última fila. Per aconseguir això, ContentQueryMain.xsl és modificat per passar dos paràmetres al nostre "graella" plantilla de ItemStyle.xsl, "última fila" i "la fila actual". ItemStyle.xsl usa condicionalment emeten les etiquetes necessàries per a.
Tècnica de Heather Solomon, vam localitzar ContentQueryMain.xsl. Es troba en el mateix lloc com ItemStyle.xsl. Aquesta captura de pantalla ha d'ajudar:
Cal fer els següents canvis:
- Modificar una plantilla xsl, "CallItemTemplate" fet que invoca nostra plantilla quadrícula en ItemStyle.xsl. Passarem dos paràmetres a la plantilla de quadrícula per tal que tindrà les dades que necessita per generar condicionalment obertura i tancament <taula> Etiquetes.
- Modificar un altre poc de ContentQueryMain.xsl que crida la CallItemTemplate"" passar-lo un «LastRow" paràmetre així que LastRow podran ser cedides a la nostra plantilla de quadrícula.
Localitzar la plantilla anomenat "OuterTemplate.CallItemTemplate" identificat per la corda:
<XSL:plantilla nom="OuterTemplate.CallItemTemplate">
Substitueix la plantilla sencera com segueix:
|
|
<XSL:plantilla nom="OuterTemplate.CallItemTemplate">
<XSL:Param nom="CurPosition" />
<!--
Afegir la LastRow"" paràmetre.
Només l'utilitzem quan és l'element estil pas a "Malla".
-->
<XSL:Param nom="LastRow" />
<XSL:triar>
<XSL:Quan prova="@Style = "NewsRollUpItem"">
<XSL:aplicar-plantilles Selecciona="." mode de="itemstyle">
<XSL:amb-param nom="EditMode" Selecciona="$cbq_iseditmode" />
</XSL:aplicar-plantilles>
</XSL:Quan>
<XSL:Quan prova="@Style = "NewsBigItem"">
<XSL:aplicar-plantilles Selecciona="." mode de="itemstyle">
<XSL:amb-param nom="CurPos" Selecciona="$CurPosition" />
</XSL:aplicar-plantilles>
</XSL:Quan>
<XSL:Quan prova="@Style = "NewsCategoryItem"">
<XSL:aplicar-plantilles Selecciona="." mode de="itemstyle">
<XSL:amb-param nom="CurPos" Selecciona="$CurPosition" />
</XSL:aplicar-plantilles>
</XSL:Quan>
<!--
Passar la posició actual i lastrow a la plantilla de quadrícula itemstyle.xsl.
ItemStyle.xsl que utilitzarà per emetre l'obertura i tancament <taula> Etiquetes.
-->
<XSL:Quan prova="@Style = 'Grid'">
<XSL:aplicar-plantilles Selecciona="." mode de="itemstyle">
<XSL:amb-param nom="CurPos" Selecciona="$CurPosition" />
<XSL:amb-param nom="Darrera" Selecciona="$LastRow" />
</XSL:aplicar-plantilles>
</XSL:Quan>
<XSL:en cas contrari>
<XSL:aplicar-plantilles Selecciona="." mode de="itemstyle">
</XSL:aplicar-plantilles>
</XSL:en cas contrari>
</XSL:triar>
</XSL:plantilla>
|
El comentari descriu el propòsit dels canvis.
Clar, la OuterTemplate.CallItemTemplate"" mateix es diu d'una altra plantilla. Localitzar aquesta plantilla per a la recerca d'aquesta cadena de text:
<XSL:plantilla nom="OuterTemplate.Body">
Mogui's a través de les instruccions a OuterTemplate.Body i introduïu el paràmetre LastRow com segueix (mostrat com un comentari en cursiva):
<XSL:crida-plantilla nom="OuterTemplate.CallItemTemplate">
<XSL:amb-param nom="CurPosition" Selecciona="$CurPosition" />
<!-- Insereix el paràmetre LastRow. -->
<XSL:amb-param nom="LastRow" Selecciona="$LastRow"/>
</XSL:crida-plantilla>
Després de tot això, Finalment tenim coses configurat correctament per tal que els nostres ItemStyle.xsl poden emetre <taula> Etiquetes al lloc correcte.
ItemStyle.Xsl
NOTA: Una altra vegada, comprovar a ItemStyle.xsl després de fer alguns canvis per tal que veieu l'efecte dels canvis.
Tenim dues tasques aquí:
- Substitueix la plantilla sencera de quadrícula. Es pot copiar i enganxar des de baix.
- Afegir alguns Superxeries fora de la definició de la plantilla que permet "formatcurrency" plantilla per treballar. (Es pot dir que jo tinc un mànec tènue amb XSL).
Primer, a prop de la part superior de ItemStyle.xsl, Afegiu aquesta línia:
<!-- Alguns Superxeries que permet mostrar u. moneda. -->
<XSL:format de decimals nom="personal" dígit="D" />
<XSL:plantilla nom="Per defecte" Partit="*" mode de="itemstyle">
Nota que vaig afegir-lo directament abans del <XSL:nom de la plantilla = "per defecte" …> definició.
Següent, tornar a la nostra plantilla de quadrícula. Substitueix la plantilla quadrícula tot el codi de sota. Fons és comentar, però no dubti en enviar per email o deixar comentaris en el meu blog si té preguntes.
|
|
<XSL:plantilla nom="Quadrícula" Partit="Fila[@Style = 'Grid']" mode de="itemstyle">
<!--
ContentMain.xsl passa CurPos i últim.
Utilitzem aquests per emetre condicionalment l'obertura i tancament <taula> Etiquetes.
-->
<XSL:Param nom="CurPos" />
<XSL:Param nom="Darrera" />
<!-- Les següents variables són inmodificada des de l'estàndard ItemStyle.xsl -->
<XSL:variable nom="SafeImageUrl">
<XSL:crida-plantilla nom="OuterTemplate.GetSafeStaticUrl">
<XSL:amb-param nom="UrlColumnName" Selecciona="'ImageUrl'"/>
</XSL:crida-plantilla>
</XSL:variable>
<XSL:variable nom="SafeLinkUrl">
<XSL:crida-plantilla nom="OuterTemplate.GetSafeLink">
<XSL:amb-param nom="UrlColumnName" Selecciona="'LinkUrl'"/>
</XSL:crida-plantilla>
</XSL:variable>
<XSL:variable nom="DisplayTitle">
<XSL:crida-plantilla nom="OuterTemplate.GetTitle">
<XSL:amb-param nom="Títol" Selecciona="@Title"/>
<XSL:amb-param nom="UrlColumnName" Selecciona="'LinkUrl'"/>
</XSL:crida-plantilla>
</XSL:variable>
<XSL:variable nom="LinkTarget">
<XSL:Si prova="@OpenInNewWindow = "True"" >blank</XSL:Si>
</XSL:variable>
<!--
Aquí definim una variable, "tableStart". Conté el codi HTML que utilitzem per definir l'obertura de la taula, així com les etiquetes de columna. Tingueu en compte que si CurPos = 1, inclou l'HTML en una etiqueta CDATA.
En cas contrari, es buida.
El valor de tableStart és emited cada vegada que s'anomena ItemStyle mitjançant ContentQueryMain.xsl.
-->
<XSL:variable nom="tableStart">
<XSL:Si prova="$CurPos = 1">
<![CDATA[
<frontera taula = 1>
<tr bgcolor = "blau">
<TD><color de la lletra = "blanc"><b>Nom del projecte</b></tipus de lletra></TD>
<alinear TD = "dret"><color de la lletra = "blanc"><b>Data completa</b></tipus de lletra></TD>
<alinear TD = "dret"><color de la lletra = "blanc"><b>Pressupost</b></tipus de lletra></TD>
<alinear TD = "dret"><color de la lletra = "blanc"><b>Despesa real</b></tipus de lletra></TD>
<TD><color de la lletra = "blanc"><b>Global Status</b></tipus de lletra></TD>
</tr>
]]>
</XSL:Si>
</XSL:variable>
<!--
Una altra variable, tableEnd simplement defineix el tancament etiqueta de taula.
Com amb tableStart, sempre és emited. Per això el seu valor s'assigna condicionalment en funció de si ens hem passat l'última fila per ContentQueryMain.xsl.
-->
<XSL:variable nom="tableEnd">
<XSL:Si prova="$CurPos = $Last">
<![CDATA[ </taula> ]]>
</XSL:Si>
</XSL:variable>
<!--
Emeten sempre el contingut de tableStart. Si això no és la primera fila va passar a nosaltres per ContentQueryMain.xsl, a continuació, sabem que el seu valor serà en blanc.
Impossibilitar sortida escapant perquè quan tableStart-lo no en blanc, inclou HTML real que volem representar el navegador. Si no diem l'analitzador XSL impossibilitar sortida escapar, generarà coses com"<taula>" en comptes de"<taula>".
-->
<XSL:valor de Selecciona="$tableStart" impossibilitar-sortida-escapar="Sí"/>
<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:valor de Selecciona="@Project_x005F_x0020_Name"/>
</TD>
<TD Alineació="dret">
<XSL:valor de Selecciona="@Project_x005F_x0020_End_x005F_x0020_Date"/>
</TD>
<TD Alineació="dret">
<XSL:crida-plantilla nom="formatcurrency">
<XSL:amb-param nom="valor"
Selecciona="@Project_x005F_x0020_Budget"></XSL:amb-param>
</XSL:crida-plantilla>
</TD>
<TD Alineació="dret">
<XSL:crida-plantilla nom="formatcurrency">
<XSL:amb-param nom="valor" Selecciona="@Project_x005F_x0020_Expenses">
</XSL:amb-param>
</XSL:crida-plantilla>
</TD>
<TD>
<XSL:valor de Selecciona="@Project_x005F_x0020_Status"/>
</TD>
<!--
Tots els següents és comentar fora per aclarir les coses.
No obstant això, portar-lo i ficar-lo en un <TD> per veure el seu efecte.
-->
<!--
<div id = "linkitem" Class = "element">
<XSL:si prova = "corda de longitud($SafeImageUrl) != 0">
<div class = "imatge-zona-esquerra">
<un href = "{$SafeLinkUrl}" objectiu = "{$LinkTarget}">
<classe d'img = "imatge-amplada fixa" src = "{$SafeImageUrl}"
alt = "{@ImageUrlAltText}"/>
</un>
</Div>
</XSL:Si>
<classe div = "enllaç element">
<XSL:crida-plantilla
Name="OuterTemplate.CallPresenceStatusIconTemplate"/>
<un href = "{$SafeLinkUrl}"
objectiu = "{$LinkTarget}" títol = "{@LinkToolTip}">
<XSL:valor de seleccionar = "$DisXSLyTitle" />
</un>
<div class = "Descripció">
<XSL:valor de select="@Description" />
</Div>
</Div>
</Div>
-->
</tr>
<!--
Emeten el tancament etiqueta de taula. Si no estem a l'última fila,
això serà en blanc.
-->
<XSL:valor de Selecciona="$tableEnd" impossibilitar-sortida-escapar="Sí"/>
</XSL:plantilla>
<XSL:plantilla nom="formatcurrency">
<XSL:Param nom="valor" Selecciona="0" />
<XSL:valor de Selecciona='format de nombre($valor, "$DDD,DDD,DDD.DD", "personal")' />
</XSL:plantilla>
|
