Panoramica e obiettivo
Out of the box, MUSCHIO’ Web Part Query contenuto (DISPONIBILI) i risultati verranno visualizzati in formato elenco, simile ai risultati di ricerca. È anche possibile visualizzare i risultati in formato griglia (vale a dire. Formato di tabella HTML). Formati di griglia sono meglio in alcune circostanze. Viene descritto come ottenere questo effetto in questo articolo.
Scenario business
Ho lavorato con un cliente su un lancio MOSS aziendale. Abbiamo progettato loro tassonomia tale che progetti sono cittadini di prima classe nella gerarchia e hanno il proprio sito di livello superiore. Project Manager mantiene un elenco di singleton di informazioni di riepilogo del progetto, come il titolo, bilancio, Data di completamento prevista, budget residuo e altri campi di tipo di riepilogo. Da "singleton" Cioe ' un elenco SharePoint personalizzato garantito per contenere un solo elemento. Semplicisticamente, sembra che questo:
L'approccio tecnico è lo stesso come descritto qui (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!447.entry). Il CQWP utilizza una trasformazione XSL per generare HTML per il browser per eseguire il rendering.
Mi immagino sempre il risultato prima di tuffarsi in XSL perché XSL è un incubo. Ecco il mio risultato desiderato:
HTML come questo genera quel risultato:
|
|
<html>
<corpo>
<centro>
<tabella confine= 1>
<!-- Etichette->
<TR bgcolor= blu>
<TD><tipo di carattere Colore= bianco><b>Nome del progetto</b></tipo di carattere></TD>
<TD allineare= destra><tipo di carattere Colore= bianco><b>Data completa</b></tipo di carattere></TD>
<TD allineare= destra><tipo di carattere Colore= bianco><b>Bilancio</b></tipo di carattere></TD>
<TD allineare= destra><tipo di carattere Colore= bianco><b>Spesa effettiva</b></tipo di carattere></TD>
<TD><tipo di carattere Colore= bianco><b>Stato complessivo</b></tipo di carattere></TD>
</TR>
<TR>
<TD>Governando la sala computer.</TD>
<TD allineare= destra>02/01/08</TD>
<TD allineare= destra>22,500.00</TD>
<TD allineare= destra>19,000.00</TD>
<TD>In corso</TD>
</TR>
<TR>
<TD>Server a disposizione per aggiornare SQL</TD>
<TD allineare= destra>04/01/08</TD>
<TD allineare= destra>7,500.00</TD>
<TD allineare= destra>0.00</TD>
<TD>Pianificato</TD>
</TR>
</tabella>
</centro>
</corpo>
</html>
|
Approccio
Attenersi alla seguente procedura per creare la griglia:
- Identificare i componenti della griglia (righe e colonne).
- Definire e creare le colonne del sito necessario.
- Creare siti sub per i progetti e le liste di singleton.
- Aggiungere il CQWP in una pagina web e configurarlo per cercare gli elenchi.
- Modificare XML del CQWP per raccogliere le colonne aggiuntive.
- Modificare il XSL per generare una tabella.
Ho intenzione di concentrarsi sul numero sei. Numeri da uno al quattro sono straight-forward e qualcosa che qualsiasi utente CQWP ha già fatto. Numero cinque è stato ben documentato da altri tra cui esaustivo articolo pieno carico schermata da MSDN qui (http://msdn2.microsoft.com/en-us/library/bb897399.aspx) blog di Heather Solomon e qui (http://www.heathersolomon.com/blog/articles/CustomItemStyle.aspx).
Dadi e bulloni
Avviare e implementare i passaggi da uno a cinque, secondo la documentazione MSDN e articolo di Heather Solomon.
A questo punto, hai aggiunto il tuo CQWP alla pagina e hai il tuo <CommonViewFields> configurato come necessario.
Seguendo la procedura usuale, Ottenere questi risultati intermedi:
1. Creare un tipo di contenuto, un elenco personalizzato templatized per quel tipo di contenuto e due siti. Ecco il tipo di contenuto:
Ecco la struttura del sito:
2. Aggiungere il CQWP dopo la creazione di liste di riepilogo del progetto mio progetto secondari e singleton:
3. Aggiungere tutte le informazioni aggiuntive che voglio tramite il <CommonViewFields>:
<Proprietà nome="CommonViewFields" tipo="stringa">Project_x0020_Name;Project_x0020_Expenses;Project_x0020_Status;Project_x0020_Start_x0020_Date;Project_x0020_End_x0020_Date;Project_x0020_Budget</Proprietà>
Si noti che ho dovuto tenere tutti i campi di proprietà su una linea o non avrebbero funzionato (CQWP vuoi dirmi che la query non restituita elementi).
4. A questo punto, Siamo pronti a muoversi oltre l'articolo di MSDN e flip su sopra all'articolo di Heather Solomon. Seguire i suoi passi di partenza nei pressi del passo #5 per creare un personalizzato / unghosted versione di ItemStyle.xsl. Seguo i consigli di Heather, alto attraverso il passo 11 e ottenere questi risultati intermedi:
4.1: Nome mio modello XSL come segue:
<xsl:nome template = "Grid" match = "riga[@Style = 'Grid']" modalità = "itemstyle">
Anche leggermente modificare lei suggerito <xsl:for each …> con l'aggiunta di un <br /> Tag per fornire un elenco più pulito:
<xsl:for each selezionare="@*">
P:<xsl:valore di selezionare="nome()" /><br/>
</xsl:for each>
4.2: Modificare la web part, Vai a comparsa e selezionare my Grid"" stile:
Applicare la modifica ed ecco il risultato:
Da quanto sopra possiamo vedere che i campi che vogliamo (Nome del progetto, spese, status, ecc) sono disponibili per noi da utilizzare quando emettiamo il codice HTML. Non solo che, ma vediamo i nomi con cui ci dobbiamo fanno riferimento tali colonne in XSL. Per esempio, riferimento lo stato del progetto come "Project_x005F_x0020_Name".
A questo punto, Partiamo dal blog di Heather e dalle spalle di questi giganti, Aggiungo il mio po '.
ContentQueryMain.xsl
NOTA: Quando si apportano modifiche a ContentQueryMain.xsl così come ItemStyle.xsl, è necessario controllare che i file di nuovo in prima di vedere l'effetto delle modifiche.
Fini della griglia-making, MOSS utilizza due file XSL diversi per produrre i risultati che vediamo da un CQWP. Per generare il precedente bit di output, Abbiamo modificato ItemStyle.xsl. MOSS utilizza in realtà un altro file XSL, ContentQueryMain.xsl a in combinazione con ItemStyle.xsl per generare il codice HTML. Come suggerisce il nome, ContentQueryMain.xsl è il principale"" XSL che controlla il flusso complessivo di traduzione. Scorre tutti gli elementi trovati e li passa uno per modelli in ItemStyle.xsl. Verrà modificata ItemStyle.xsl per generare all'aperto <tabella> Tag prima di emettere la prima riga di dati e la chiusura <tabella> Tag dopo l'ultima riga di emissione. Per eseguire questa operazione, ContentQueryMain.xsl è modificato per passare due parametri alla nostra griglia"" modello in ItemStyle.xsl, "ultima fila" e "riga corrente". ItemStyle.xsl utilizza questi per generare in modo condizionale i tag necessari.
Utilizzando la tecnica di Heather Solomon, Siamo individuare ContentQueryMain.xsl. Si trova nello stesso luogo come ItemStyle.xsl. Questa schermata dovrebbe aiutare:
Abbiamo bisogno di apportare le seguenti modifiche:
- Modificare un modello xsl, "CallItemTemplate" che in realtà richiama il nostro modello di griglia in ItemStyle.xsl. Passeremo due parametri al modello Grid in modo che avrà i dati che necessari per generare in modo condizionale di apertura e chiusura <tabella> Tag.
- Modificare un altro po ' di ContentQueryMain.xsl che chiama la "CallItemTemplate" far passare un "LastRow" parametro quindi che LastRow potranno essere comunicati al nostro modello di griglia.
Individuare il modello denominato "OuterTemplate.CallItemTemplate" identificato dalla stringa:
<xsl:modello nome="OuterTemplate.CallItemTemplate">
Sostituire l'intero modello come segue:
|
|
<xsl:modello nome="OuterTemplate.CallItemTemplate">
<xsl:param nome="CurPosition" />
<!--
Aggiungere il "LastRow" parametro.
Usiamo solo quando l'elemento style pass in è «Griglia».
-->
<xsl:param nome="LastRow" />
<xsl:scegliere>
<xsl:Quando test="@Style = 'NewsRollUpItem'">
<xsl:apply-templates selezionare="." modalità="ItemStyle">
<xsl:con param nome="EditMode" selezionare="$cbq_iseditmode" />
</xsl:apply-templates>
</xsl:Quando>
<xsl:Quando test="@Style = 'NewsBigItem'">
<xsl:apply-templates selezionare="." modalità="ItemStyle">
<xsl:con param nome="CurPos" selezionare="$CurPosition" />
</xsl:apply-templates>
</xsl:Quando>
<xsl:Quando test="@Style = 'NewsCategoryItem'">
<xsl:apply-templates selezionare="." modalità="ItemStyle">
<xsl:con param nome="CurPos" selezionare="$CurPosition" />
</xsl:apply-templates>
</xsl:Quando>
<!--
Posizione corrente e lastrow passare il modello di griglia itemstyle.xsl.
ItemStyle.xsl che utilizzerà per emettere l'apertura e la chiusura <tabella> Tag.
-->
<xsl:Quando test="@Style = 'Griglia'">
<xsl:apply-templates selezionare="." modalità="ItemStyle">
<xsl:con param nome="CurPos" selezionare="$CurPosition" />
<xsl:con param nome="Ultima" selezionare="$LastRow" />
</xsl:apply-templates>
</xsl:Quando>
<xsl:in caso contrario>
<xsl:apply-templates selezionare="." modalità="ItemStyle">
</xsl:apply-templates>
</xsl:in caso contrario>
</xsl:scegliere>
</xsl:modello>
|
Commenti descrivono lo scopo delle modifiche.
Naturalmente, il OuterTemplate.CallItemTemplate"" Se viene chiamato da un altro modello. Individuare tale modello di ricerca per questa stringa di testo:
<xsl:modello nome="OuterTemplate.Body">
Scorrere le istruzioni in OuterTemplate.Body e inserire il parametro LastRow come segue (mostrato come un commento in corsivo):
<xsl:modello di chiamata nome="OuterTemplate.CallItemTemplate">
<xsl:con param nome="CurPosition" selezionare="$CurPosition" />
<!-- Inserire il parametro LastRow. -->
<xsl:con param nome="LastRow" selezionare="$LastRow"/>
</xsl:modello di chiamata>
Dopo tutto questo, finalmente abbiamo impostate correttamente in modo che la nostra ItemStyle.xsl può emettere cose <tabella> Tag al posto giusto.
ItemStyle.Xsl
NOTA: Ancora una volta, Dopo aver apportato eventuali modifiche, in modo che si vede l'effetto di tali modifiche il check-in ItemStyle.xsl.
Abbiamo due compiti qui:
- Sostituire l'intero modello di griglia. È possibile copiare/incollare da sotto.
- Aggiungere alcuni mumbo jumbo non rientra nella definizione di modello che consente di "formatcurrency" modello a lavorare. (Si può dire che ho una tenue maniglia su XSL).
Primo, nella parte superiore della ItemStyle.xsl, aggiungere questa riga:
<!-- Alcuni mumbo jumbo che ci permette di visualizzare gli Stati Uniti. valuta. -->
<xsl:formato decimale nome="personale" cifre="D" />
<xsl:modello nome="Predefinito" match="*" modalità="ItemStyle">
Si noti che aggiunto direttamente prima del <xsl:nome template = "Default" …> definizione.
Successivo, Torna al nostro modello di griglia. Sostituire l'intero modello di griglia con il codice riportato di seguito. È accuratamente commentato, ma non esitate a scrivermi o lasciare commenti sul mio blog, se avete domande.
|
|
<xsl:modello nome="Griglia" match="Riga[@Style = 'Griglia']" modalità="ItemStyle">
<!--
ContentMain.xsl passa CurPos e ultimo.
Usiamo questi condizionalmente emettere all'aperto e chiusura <tabella> Tag.
-->
<xsl:param nome="CurPos" />
<xsl:param nome="Ultima" />
<!-- Le seguenti variabili sono state modificate dalla ItemStyle.xsl standard -->
<xsl:variabile nome="SafeImageUrl">
<xsl:modello di chiamata nome="OuterTemplate.GetSafeStaticUrl">
<xsl:con param nome="UrlColumnName" selezionare="'ImageUrl'"/>
</xsl:modello di chiamata>
</xsl:variabile>
<xsl:variabile nome="SafeLinkUrl">
<xsl:modello di chiamata nome="OuterTemplate.GetSafeLink">
<xsl:con param nome="UrlColumnName" selezionare="'LinkUrl'"/>
</xsl:modello di chiamata>
</xsl:variabile>
<xsl:variabile nome="DisplayTitle">
<xsl:modello di chiamata nome="OuterTemplate.GetTitle">
<xsl:con param nome="Titolo" selezionare="@Title"/>
<xsl:con param nome="UrlColumnName" selezionare="'LinkUrl'"/>
</xsl:modello di chiamata>
</xsl:variabile>
<xsl:variabile nome="LinkTarget">
<xsl:Se test="@OpenInNewWindow = 'True'" >Blank</xsl:Se>
</xsl:variabile>
<!--
Qui definiamo una variabile, "tableStart". Questo file contiene il codice HTML che usiamo per definire l'apertura della tabella così come le etichette di colonna. Si noti che se CurPos = 1, Esso comprende il codice HTML in un tag CDATA.
In caso contrario, sarà vuota.
Il valore di tableStart viene emesso ogni volta ItemStyle è chiamata via ContentQueryMain.xsl.
-->
<xsl:variabile nome="tableStart">
<xsl:Se test="$CurPos = 1">
<![CDATA[
<bordo della tabella = 1>
<TR bgcolor = "blue">
<TD><colore del carattere = "white"><b>Nome del progetto</b></tipo di carattere></TD>
<TD align = "right"><colore del carattere = "white"><b>Data completa</b></tipo di carattere></TD>
<TD align = "right"><colore del carattere = "white"><b>Bilancio</b></tipo di carattere></TD>
<TD align = "right"><colore del carattere = "white"><b>Spesa effettiva</b></tipo di carattere></TD>
<TD><colore del carattere = "white"><b>Stato complessivo</b></tipo di carattere></TD>
</TR>
]]>
</xsl:Se>
</xsl:variabile>
<!--
Un'altra variabile, tableEnd definisce semplicemente la chiusura tag di tabella.
Come con tableStart, è sempre emesso. Ecco perché il relativo valore è assegnato in modo condizionale basata su se siamo stati passati l'ultima riga di ContentQueryMain.xsl.
-->
<xsl:variabile nome="tableEnd">
<xsl:Se test="$CurPos = $Last">
<![CDATA[ </tabella> ]]>
</xsl:Se>
</xsl:variabile>
<!--
Emettono sempre il contenuto di tableStart. Se questo non è la prima riga che passava a noi ContentQueryMain.xsl, quindi sappiamo che il suo valore sarà vuoto.
Disabilitare l'uscita escape perché quando tableStart non vuoto, Esso comprende HTML effettivo che vogliamo sottoporre a rendering mediante il browser. Se non diciamo il parser XSL per disabilitare output fuga, verrà generato roba come"<tabella>" invece di"<tabella>".
-->
<xsl:valore di selezionare="$tableStart" disable-output-escaping="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:valore di selezionare="@Project_x005F_x0020_Name"/>
</TD>
<TD allineare="destra">
<xsl:valore di selezionare="@Project_x005F_x0020_End_x005F_x0020_Date"/>
</TD>
<TD allineare="destra">
<xsl:modello di chiamata nome="FormatCurrency">
<xsl:con param nome="valore"
selezionare="@Project_x005F_x0020_Budget"></xsl:con param>
</xsl:modello di chiamata>
</TD>
<TD allineare="destra">
<xsl:modello di chiamata nome="FormatCurrency">
<xsl:con param nome="valore" selezionare="@Project_x005F_x0020_Expenses">
</xsl:con param>
</xsl:modello di chiamata>
</TD>
<TD>
<xsl:valore di selezionare="@Project_x005F_x0020_Status"/>
</TD>
<!--
Tutte le condizioni seguenti è commentata per chiarire le cose.
Tuttavia, riportarlo indietro e roba in un <TD> per vedere il suo effetto.
-->
<!--
<div id = "linkitem" classe = "item">
<xsl:Se prova = "string-length($SafeImageUrl) != 0">
<div class = "immagine-zona-sinistra">
<un href = "{$SafeLinkUrl}" destinazione = "{$LinkTarget}">
<img class = "immagine-larghezza fissa" src = "{$SafeImageUrl}"
ALT = "{@ImageUrlAltText}"/>
</un>
</div>
</xsl:Se>
<div class = "link-item">
<xsl:modello di chiamata
Name="OuterTemplate.CallPresenceStatusIconTemplate"/>
<un href = "{$SafeLinkUrl}"
destinazione = "{$LinkTarget}" title = "{@LinkToolTip}">
<xsl:value-of select = "$DisxslyTitle" />
</un>
<div class = "descrizione">
<xsl:valore di select="@Description" />
</div>
</div>
</div>
-->
</TR>
<!--
Emettono la chiusura tag di tabella. Se non siamo in ultima fila,
Questo sarà vuoto.
-->
<xsl:valore di selezionare="$tableEnd" disable-output-escaping="Sì"/>
</xsl:modello>
<xsl:modello nome="FormatCurrency">
<xsl:param nome="valore" selezionare="0" />
<xsl:valore di selezionare='formato numero($valore, "$DDD,DDD,DDD.DD", "personale")' />
</xsl:modello>
|
