archivi categoria: Sviluppo di SharePoint

Attenzione ultime modifiche a ItemStyle.xsl

Stavo lavorando con ItemStyle.xsl per personalizzare l'aspetto di una Web Part Query contenuto e diritto a ora di pranzo, Ho fatto una rottura cambiare al xsl. Non avevo capito che, ma questo ha avuto effetti in tutta la raccolta siti di vasta portata. Sono andato a pranzo e al mio ritorno, notato questo messaggio che appare in un mucchio di posti:

Impossibile visualizzare questa Web Part. Per risolvere il problema, aprire questa pagina Web in un editor HTML compatibile con Windows SharePoint Services come Microsoft Office SharePoint Designer. Se il problema persiste, contattare l'amministratore del server Web.

Accusato il client (ancora non accorgendosi che era colpa mia a questo punto) ma alla fine notato che intellisense di visual studio stava avvertendo me che avevo XSL non valido. Ho corretto e tutto ha iniziato a lavorare.

Essere dannatamente attenti quando si lavora con ItemStyle.xsl (e un file XSL globale) — rompendo li colpisce molti artefatti nella raccolta siti.

<fine />

Visualizzare il contenuto Web Part risultati della Query in una griglia / Tabella

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:

immagine

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:

immagine

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:

  1. Identificare i componenti della griglia (righe e colonne).
  2. Definire e creare le colonne del sito necessario.
  3. Creare siti sub per i progetti e le liste di singleton.
  4. Aggiungere il CQWP in una pagina web e configurarlo per cercare gli elenchi.
  5. Modificare XML del CQWP per raccogliere le colonne aggiuntive.
  6. 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:

immagine

Ecco la struttura del sito:

immagine

2. Aggiungere il CQWP dopo la creazione di liste di riepilogo del progetto mio progetto secondari e singleton:

immagine

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:

immagine

Applicare la modifica ed ecco il risultato:

immagine

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:

immagine

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"&lt;tabella&gt;" invece di"<tabella>".
    -->
    <xsl:valore di selezionare="$tableStart" disable-output-escaping=""/>


    <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=""/> </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>

Standard schermi di immissione dati WSS/MOSS non supportano CSS Drop-Down (o altri intra-dalla comunicazione)

AGGIORNAMENTO (04/2008): Questa voce di blog grande mostra un approccio di buon javascript basata a questo problema: http://webborg.blogspot.com/2008/04/add-functions-and-events-to-sharepoint.html

AGGIORNAMENTO II: (04/2008): Questa voce di blog sembra promettente pure: http://www.cleverworkarounds.com/2008/03/13/free-mosswss-2007-web-part-hide-controls-via-javascript/

Più volte a settimana, Se non quotidiane, Gli utenti del forum descrivono un requisito che normalmente sarebbe soddisfatte tramite CSS drop-down. Per esempio, Ho due controlli a discesa:

  • Elenco degli Stati Uniti. Stati
  • Elenco degli Stati Uniti. città.

Come provider di interfaccia utente responsabile, vogliamo operare come questo:

  • Paul seleziona degli Stati Uniti. stato dal menu a discesa.
  • In questo modo le città discesa per filtrare solo quelle città che appartengono allo stato selezionato.
  • Paul seleziona una città dall'elenco filtrato.

Non c'è nessun supporto out-of-the-box per questa funzione. Infatti, non c'è nessun supporto OOB per qualsiasi tipo di comunicazione intra-forma diretta. Questo include a livello di codice campi nascondersi/abilitazione/disabilitazione in risposta ai cambiamenti di campo altrove nel modulo.

Il vero obiettivo di questo articolo per descrivere le possibili soluzioni e queste sono le opzioni come li conosco:

  1. Sviluppare un tipo di colonna personalizzato. Come un custom-colonna-developer, avete controllo completo sopra il mondo"" di tale colonna personalizzata. È possibile implementare un CSS menu a discesa in questo modo.
  2. Considerare l'utilizzo del flusso di lavoro. In alcuni casi, si desidera assegnare automaticamente un valore di campo basata sul valore di un altro campo. In questo caso, si sarebbe normalmente tenta di utilizzare una colonna calcolata, ma alcune volte, solo non otterrà il lavoro fatto. Flusso di lavoro SharePoint Designer è un'alternativa relativamente amministrare-friendly a cadere verso il basso nel codice e visual studio. Se vuoi seguire questa strada, essere consapevoli del problema affrontato da in questo articolo (http://paulgalvin.spaces.live.com/blog/cns!CC1EDB3DAA9B8AA!405.entry).
  3. Gestori eventi: Come flusso di lavoro, si tratta di una soluzione di dopo--fatto. Il gestore eventi è un assembly .NET (C#, VB.NET) a quali SharePoint passa il controllo. L'oggetto che si sviluppa ha accesso ai dati dell'elenco (e l'intero modello) e può fare qualsiasi calcolo necessario.
  4. Utilizzare SharePoint Designer per creare i moduli di iscrizione personalizzata. Non ho esperienza diretta con questo approccio, ma ho sentito che stanno facendo cose buone con NewForm.aspx in questi giorni 🙂
  5. Rotolare la propria funzione di ingresso dati ASP.NET (come pagina web stand-alone o come parte web) invece che utilizzare.

Se qualcuno conosce altre opzioni e/o migliore, si prega di postare un commento e aggiornerò il corpo di questo post.

<fine />

Technorati Tags:

Creare grafici Bar in SharePoint

Panoramica:

(AGGIORNAMENTO 12/04/07: Aggiunta di un'altra risorsa interessante alla fine collegamento a un altro blog che affronta questo tramite una web part molto interessante)

Questo Blog viene descritto come creare un grafico a barre in SharePoint. Questo funziona in ambienti WSS e MOSS come dipende solo la web part visualizzazione dati.

L'approccio generale è come segue:

  1. Creare un elenco o raccolta di documenti che contiene i dati che si desidera grafico.
  2. Posto la libreria del documento associato / personalizzati elencati su una pagina e convertirlo in una web part visualizzazione dati (DVWP).
  3. Modificare XSL del DVWP per generare il codice HTML che mostra come un grafico.

Scenario business / Installazione:

Ho creato un elenco personalizzato con la colonna titolo standard e una colonna aggiuntiva, "Status". Questo modelli (molto semplicisticamente) un' "autorizzazione di spesa" scenario dove il titolo rappresenta il progetto e lo stato di un valore dall'elenco dei:

  • Proposto
  • Nel processo di
  • In fase di stallo

L'obiettivo è quello di produrre un grafico a barre orizzontale interattivo che mostra questi codici di stato.

Io ho compilato la lista e sembra che questo:

immagine

Creare Web Part visualizzazione dati:

Creare il DVWP aggiungendo l'elenco personalizzato in una pagina (pagina del sito nel mio caso) e seguire le istruzioni qui (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).

Oltre a creare semplicemente il DVWP, Abbiamo anche bisogno di impostare la proprietà di spostamento per visualizzare tutte le righe disponibili. Per me, Questo sembra qualcosa di simile:

immagine

A questo punto, Chiudo sempre SPD e il browser. Quindi riaprire la pagina utilizzando il browser. Questo consente di evitare accidentalmente rovinando il layout di parte web nella pagina.

Modificare il XSLT:

Ora è il momento di modificare il XSLT.

Io uso sempre visual studio per questo. (Vedere qui per una nota importante su intellisense che ti aiuterà molto).

Creare un progetto vuoto aggiungere quattro nuovi file (sostituire le parole "originale" e "New" se del caso):

  • Original.XSLT
  • New.XSLT
  • Params.xml originale
  • Params.xml nuovo

Nel mio caso, sembra che questo:

immagine

Modificare la parte web e copiare il params e XSL all'originale"" versione di Visual Studio.

Qui l'obiettivo è quello di causare il XSL trasformare i risultati che otteniamo indietro dalla query DVWP in HTML che esegue il rendering come un grafico.

A tal fine, Aiuta a in primo luogo considerare che cosa il codice HTML dovrebbe essere simile prima di noi rimaniamo confusi dalla follia che è conosciuta come "XSL". (Per essere chiari, di seguito è semplicemente un esempio; non digitare o copiare e incollare in visual studio. Fornisco un colpo completo punto di partenza per questo più tardi nel write-up). Il grafico di esempio seguente viene eseguito il rendering come HTML immediatamente dopo:

Esempio di grafico a barre

HTML corrispondente:

<html>
<corpo>
<centro>
<Table width = 80%>
<TR><TD><centro>Grafico a barre orizzontali</TD></TR>
<TR>
<TD align = "center">
<table border = "1" larghezza = 80%>
<TR>
<larghezza TD = 10%>Aperto</TD>
<TD><tabella cellpadding ="0" CellSpacing ="0" border = 0 width = 50%><TR bgcolor = colore rosso><TD>&nbsp;</TD></TR></tabella></TD>
</TR>
<TR>
<larghezza TD = 10%>Chiuso</TD>
<TD><tabella cellpadding ="0" CellSpacing ="0" border = 0 width = 25%><TR bgcolor = colore rosso><TD>&nbsp;</TD></TR></tabella></TD>
</TR>
<TR>
<larghezza TD = 10%>In fase di stallo</TD>
<TD><tabella cellpadding ="0" CellSpacing ="0" border = 0 width = 25%><TR bgcolor = colore rosso><TD>&nbsp;</TD></TR></tabella></TD>
</TR>
</tabella>
</TD>
</TR>
</tabella>
</corpo>
</html>

Ho usato un approccio morto semplice per creare il mio bar impostando il colore di sfondo di una riga su "red".

Qui il Take-Away è questo: Alla fine, tutto quello che stiamo facendo è la creazione di HTML con righe e colonne.

Modello XSLT:

Ho copiato il codice XSLT che genera un grafico a barre orizzontale. È abbastanza ben commentato così non aggiungerà molto qui tranne queste note:

  • Ho iniziato con il valore predefinito XSL che SharePoint Designer mi ha dato quando ho creato il DVWP.
  • Sono stato in grado di tagliare questo da SPD 657 linee di 166 linee.
  • Non pasticciare con il file XML dei parametri (quale è separato da XSL e saprete che cosa voglio dire quando si va a modificare il DVWP stesso; ci sono due file che è possibile modificare). Tuttavia, al fine di semplificare l'it, Ho fatto rimuovere quasi tutti da XSL. Questo significa che se si vuole fare uso di tali parametri, Hai solo bisogno di aggiungere loro le definizioni di variabili torna al XSL. Che sarà facile, poiché avrete le definizioni di variabili XSL originale nel progetto visual studio.
  • Si dovrebbe essere in grado di copiare e incollare questo direttamente nel progetto visual studio. Poi, rimuovere le mie chiamate e inserire le proprie chiamate a "ShowBar".
  • Il drill-down funziona creando un <href> In questo modo: http://server/List?FilterField1=fieldname&FilterValue1=actualFilterValue. Questa tecnica può essere utile in altri contesti. In un primo momento, Ho pensato che avrei bisogno di conformarsi a un formato più complesso: http://server/List/AllItems.aspx?View={guid}&FilterField1=blah&FilterValue1=blah, ma nel mio ambiente che non è necessario. URL dell'elenco viene passato a noi da SharePoint quindi questo è abbastanza facile da generalizzare.

Qui è:

<xsl:StyleSheet Versione="1.0" escludere-risultato-prefissi="RS z o s ddwrt dt msxsl" 
xmlns:msxsl="urna:schemas-microsoft-com:XSLT" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer"
xmlns:ASP="http://schemas.microsoft.com/ASPNET/20" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime"
xmlns:o="urna:schemas-microsoft-com:Ufficio" xmlns:s="UUID:BDC6E3F0-6DA3-11D1-A2A3-00AA00C14882"
xmlns:DT="UUID:C2F41010-65B3 - 11d 1-A29F-00AA00C14882" xmlns:RS="urna:schemas-microsoft-com:set di righe" xmlns:z="#RowsetSchema"
xmlns:ddwrt2="urna:FrontPage:interno"
> <xsl:uscita Metodo.="html" trattino="No" /> <xsl:formato decimale NaN="" /> <xsl:param nome="ListUrlDir"></xsl:param> <!-- Ho bisogno di questo per sostenere un drill-down. --> <xsl:modello match="/" xmlns:SharePoint="Microsoft.SharePoint.WebControls"
xmlns:__designer=http://schemas.microsoft.com/WebParts/v2/DataView/designer xmlns:ASP="http://schemas.microsoft.com/ASPNET/20"
> <xsl:variabile nome="dvt_StyleName">Tabella</xsl:variabile> <xsl:variabile nome="Righe" selezionare="/Riga/righe/dsQueryResponse" /> <xsl:variabile nome="dvt_RowCount" selezionare="Conte($Righe)" /> <xsl:variabile nome="IsEmpty" selezionare="$dvt_RowCount = 0" /> <xsl:variabile nome="dvt_IsEmpty" selezionare="$dvt_RowCount = 0" /> <xsl:scegliere> <xsl:Quando test="$dvt_IsEmpty"> Non sono disponibili dati per il grafico!<br/> </xsl:Quando> <xsl:in caso contrario> <!-- La roba interessante inizia qui. Abbiamo bisogno di definire una coppia di variabili per ogni riga nel grafico: numero totale di elementi e per cento del totale. --> <xsl:variabile nome="totalProposed" selezionare="Conte(/Riga/righe/dsQueryResponse[normalizzare-spazio(@Status) = 'Proposto'])" /> <xsl:variabile nome="percentProposed" selezionare="$totalProposed div $dvt_RowCount" /> <xsl:variabile nome="totalInProcess" selezionare="Conte(/Riga/righe/dsQueryResponse[normalizzare-spazio(@Status) = 'Nel processo'])" /> <xsl:variabile nome="percentInProcess" selezionare="$totalInProcess div $dvt_RowCount" /> <xsl:variabile nome="totalStalled" selezionare="Conte(/Riga/righe/dsQueryResponse[normalizzare-spazio(@Status) = 'Stallo'])" /> <xsl:variabile nome="percentStalled" selezionare="$totalStalled div $dvt_RowCount" /> <!-- Definiamo la nostra tabella HTML qui. Prendo in prestito da alcuni stili standard di SharePoint qui per renderlo coerente. Penso che onorerà modifiche al file css globale così come si esegue l'override di tema. --> <tabella Larghezza="100%" CellSpacing="0" cellpadding="2" stile="Border-destra: 1 #C0C0C0 solido; border-bottom: 1 #C0C0C0 solido; border-left-style: solido; border-left-width: 1; border-top-style: solido; border-top-width: 1;"> <TR> <TD allineare="centro"> <tabella confine="1" Larghezza="100%"> <!-- Per ogni stato che si desidera rappresentare, noi chiamiamo il "ShowBar" modello. Abbiamo passarlo: 1. Un'etichetta per la riga. Questo si trasforma in un collegamento ipertestuale. 2. Il per cento (variabile dall'alto). 3. Il nome di campo effettivo del codice dall'elenco sottostante. Questo non deve corrispondere l'etichetta di visualizzazione. 4. Valore del campo corrispondente per #3. 5. Totali articoli di questo codice di stato (non il totale di tutti i codici di stato). Emette un <TR></TR> e la linea del grafico a barre orizzontali. Noi chiamiamo questo modello per ogni codice di stato che si desidera visualizzare. --> <xsl:modello di chiamata nome="ShowBar"> <xsl:con param nome="BarDisplayLabel" selezionare="'Proposto'"/> <xsl:con param nome="BarPercent" selezionare="$percentProposed"/> <xsl:con param nome="QueryFilterFieldName" selezionare="'Status'"/> <xsl:con param nome="QueryFilterFieldValue" selezionare="'Proposto'"/> <xsl:con param nome="TotalItems" selezionare="$totalProposed"></xsl:con param> </xsl:modello di chiamata> <xsl:modello di chiamata nome="ShowBar"> <xsl:con param nome="BarDisplayLabel" selezionare="'Stallo'"/> <xsl:con param nome="BarPercent" selezionare="$percentStalled"/> <xsl:con param nome="QueryFilterFieldName" selezionare="'Status'"/> <xsl:con param nome="QueryFilterFieldValue" selezionare="'Stallo'"/> <xsl:con param nome="TotalItems" selezionare="$totalStalled"></xsl:con param> </xsl:modello di chiamata> <xsl:modello di chiamata nome="ShowBar"> <xsl:con param nome="BarDisplayLabel" selezionare="'Nel processo'"/> <xsl:con param nome="BarPercent" selezionare="$percentInProcess"/> <xsl:con param nome="QueryFilterFieldName" selezionare="'Status'"/> <xsl:con param nome="QueryFilterFieldValue" selezionare="'Nel processo'"/> <xsl:con param nome="TotalItems" selezionare="$totalInProcess"></xsl:con param> </xsl:modello di chiamata> </tabella> </TD> </TR> </tabella> </xsl:in caso contrario> </xsl:scegliere> </xsl:modello> <!-- Questo modello fa il lavoro di visualizzazione di singole linee in grafico a barre. Probabilmente farete la maggior parte del vostro ritocco qui. --> <xsl:modello nome="ShowBar"> <xsl:param nome="BarDisplayLabel" /> <!-- etichetta per mostrare --> <xsl:param nome="BarPercent"/> <!-- Per cento del totale. --> <xsl:param nome="QueryFilterFieldName"/> <!-- Utilizzato per passare alla query & filtro --> <xsl:param nome="QueryFilterFieldValue"/> <!-- Utilizzato per passare alla query & filtro --> <xsl:param nome="TotalItems" /> <!-- conteggio totale di questo barlabel --> <TR> <!-- La barra stessa etichetta. --> <TD classe="MS-formbody" Larghezza="30%"> <!-- Questo prossimo set di istruzioni genera una stringa di query che permette di drill-down in una visualizzazione filtrata dei dati sottostanti. Facciamo uso di un paio di cose qui: 1. Possiamo passare a un elenco per filtrare una colonna FilterField1 e FilterValue1. 2. SharePoint è passando un parametro chiave per noi, ListUrlDir che punta all'elenco sottostante su cui questo DVWP viene "eseguita". Non è divertente XSL? --> <xsl:Testo disable-output-escaping=""> <![CDATA[<href ="]]></xsl:Testo> <xsl:valore di selezionare="$ListUrlDir"/> <xsl:Testo disable-output-escaping=""><![CDATA[?FilterField1 =]]></xsl:Testo> <xsl:valore di selezionare="$QueryFilterFieldName"/> <xsl:Testo disable-output-escaping=""><![CDATA[&FilterValue1 =]]></xsl:Testo> <xsl:valore di selezionare="$QueryFilterFieldValue"/> <xsl:Testo disable-output-escaping=""><![CDATA[">]]></xsl:Testo> <xsl:valore di selezionare="$BarDisplayLabel"/> <xsl:Testo disable-output-escaping=""><![CDATA[</un>]]></xsl:Testo> <!-- Il bit successivo mostra alcuni numeri nel formato: "(totale / % del totale)" --> (<xsl:valore di selezionare="$TotalItems"/> / <!-- Questo crea una bella etichetta percentuale per noi. Grazie, Microsoft! --> <xsl:modello di chiamata nome="PercentFormat"> <xsl:con param nome="per cento" selezionare="$BarPercent"/> </xsl:modello di chiamata>) </TD> <!-- Infine, emettono un <TD> Tag per la barra stessa.--> <TD> <tabella cellpadding="0" CellSpacing="0" confine="0" Larghezza="{turno($BarPercent * 100)+1}%"> <TR bgcolor="rosso"> <xsl:Testo disable-output-escaping=""><![CDATA[&nbsp;]]></xsl:Testo> </TR> </tabella> </TD> </TR> </xsl:modello> <!-- Questo è preso direttamente da alcuni XSL che ho trovato in un modello di MS. --> <xsl:modello nome="PercentFormat"> <xsl:param nome="per cento"/> <xsl:scegliere> <xsl:Quando test="formato numero($per cento, '#,##0%;-#,##0%')= 'NaN'">0%</xsl:Quando> <xsl:in caso contrario> <xsl:valore di selezionare="formato numero($per cento, '#,##0%;-#,##0%')" /> </xsl:in caso contrario> </xsl:scegliere> </xsl:modello> </xsl:StyleSheet>

I risultati:

il XSL da sopra genera questo grafico:

immagine

Dettaglio dei dati sottostanti cliccando sul codice di stato:

immagine

Riflessioni conclusive:

Questo può essere generalizzato?

Mi piace questo concetto grafico, ma odio il fatto che devo andare e fare così tanto di mano-codifica. Ho dato un piccolo pensiero per se può essere generalizzato e sono ottimista, ma io sono anche un po' timoroso che potrebbe esserci un muro di mattoni da qualche parte lungo il percorso che non offre alcun lavoro intorno. Se qualcuno ha delle buone idee su questo, si prega di fare una nota nei commenti o email me.

Grafici verticali:

Si tratta di un grafico a barre orizzontale. È certamente possibile creare un grafico verticale. Abbiamo solo bisogno di modificare il codice HTML. Vorrei iniziare allo stesso modo: Creare una rappresentazione HTML di un grafico a barre verticale e poi capire come ottenere che tramite XSL. Se qualcuno è interessato a che, Io potrei essere convinto a provarlo e risolvere i nodi. Se qualcuno lo ha già fatto, per favore fatemelo sapere e sarò contento di link al tuo blog 🙂

Credo che la sfida con un grafico verticale è che le etichette del grafico sono più difficili da gestire, ma certamente non impossibile.

Campo nome Gotcha:

Ci sono almeno due cose da guardare fuori con i nomi di campo..

Primo, un nome di campo con uno spazio deve essere sottoposto a escape in XSL. Questo sarà probabilmente un problema qui:

        <xsl:variabile nome="totalProposed" 
selezionare="Conte(/Riga/righe/dsQueryResponse[normalizzare-spazio(@Status) = 'Proposto'])" />

Se il tuo Status"" colonna è in realtà denominato "codice di stato" quindi è necessario fare riferimento ad esso come "Status_x0020_Code":

   <xsl:variabile nome="totalProposed" 
selezionare="Conte(/Riga/righe/dsQueryResponse[normalizzare-spazio(@Status_x0020_Code) = 'Proposto'])" />

Secondo, e io sono un po ' sfocata su questo, ma devi anche essere in allerta per le modifiche di nome di campo. Se il nome il campo "codice di stato" e poi in seguito, rinominarlo in "AFE Status", il nome"interno" non cambia. Il nome interno sarà ancora "codice di stato" e deve essere fatto riferimento come "Status_x0020_Code". Le "altre risorse" link possono aiutare a diagnosticare e correggere questo tipo di problema.

Info su quel colore:

Ho scelto "rosso" perché è piacevole per me al momento. Non sarebbe un grosso problema a mostrare diversi colori in modo da fornire più appena una descrizione visiva di un numero, ma anche fornire un utile indicatore KPI. Per esempio, Se la percentuale di "stallo" AFE è > 10% poi Visualizza rosso, in caso contrario mostrarlo in nero. Uso <xsl:scegliere> per eseguire questa operazione.

Altre risorse:

Trasformando felice!

<fine />

Iscriviti al mio blog!

OM presentano i dati tramite un elenco personalizzato (o, Ancora un altro OM dati Displayor [come YACC, ma diverso])

Oggi, Ho trascorso una manciata di ore rintracciare la causa principale dietro il messaggio "il nome di colonna immesso è già in uso o riservato. Scegliere un altro nome."

La colonna in questione potrebbe essere creata, eliminato e ricreato in un altro ambiente, quindi sapevo che non era un nome riservato. Tuttavia, Semplicemente non riuscivo a trovare la colonna ovunque tramite l'interfaccia utente di SharePoint standard a qualsiasi sito nella raccolta siti.

Inviato a Forum MSDN qui e l'indomito Andrew Woodward mi ha segnalato in direzione di dati di modello dell'oggetto sottostante.

Sono andato a CodePlex per trovare alcuni strumenti che mi aiuterebbe a scrutare i dati sottostanti OM e mi aiuta a individuare i problemi.

Ho provato diversi strumenti ed erano molto fresco e interessante, ma alla fine, l'interfaccia utente non era abbastanza buono per il mio scopo. Io non sto criticando con qualsiasi mezzo, ma chiaramente i costruttori di utensili non ha avuto il mio problema in mente quando hanno creato la loro interfaccia utente :). La maggior parte delle persone sembrano essere investire una discreta quantità di tempo e fatica nella creazione di workstation / applicazioni client che offrono una vista ad albero, destro del mouse su menu di scelta rapida e così via. Queste sono belle e tutte le, ma è un sacco di lavoro per creare un'esperienza utente top-of-the-line che è anche molto flessibile.

Ho davvero bisogno di una risposta a questo problema. Mi venne in mente che se potessi avere tutte le colonne del sito nella raccolta siti in un elenco personalizzato, Potuto filtrare, ordinare e creare visualizzazioni che possa aiutarmi a trovare questa colonna presumibilmente esistente (che ha fatto, BTW). Sono andato avanti e ha fatto che e un'ora o due più tardi, avevano tutte le colonne del mio sito caricato in un elenco personalizzato con raggruppamento, ordinamento e così via. Cinque minuti più tardi trovato la mia risposta.

Se e quando prendo con successo il mondo, Penso che sarà decreto che tutti i fornitori di strumenti di SharePoint devono prendere seriamente in considerazione i dati del modello di oggetto in un elenco personalizzato di affioramento. in questo modo, Ho il potere per cercare qualsiasi modo voglio (vincolata, Naturalmente, di funzionalità standard di sharepoint).