Desembre | 2007 | SharePoint espai de Paul Galvin

Visió de conjunt:

(ACTUALITZACIÓ 12/04/07: Afegit un altre recurs interessant al final vinculació a un altre bloc que tracta això mitjançant un element web molt interessant)

Aquesta entrada del bloc descriu com crear un gràfic de barres en SharePoint. Això funciona en entorns WSS tant MOSS com només depen el element web de visualització de dades.

El plantejament general és la següent:

Crear una llista o biblioteca de documents que conté les dades que voleu gràfic.
Lloc a la biblioteca de documents associats / costum llista a una pàgina i convertir-lo en un element web de visualització de dades (DVWP).
Modificar l'XSL de la DVWP per generar el codi HTML perquè et mostra com un gràfic.

Escenari de negocis / Programa d'instal·lació:

He creat una llista personalitzada amb la columna de títol estàndard i una columna addicional, "Estat". Aquest model (elementalment molt) un "autorització de despesa" escenari on el títol representa el projecte i l'estat un valor de la llista de:

Proposat
En procés
Aturat

L'objectiu és produir un gràfic de barres horitzontal interactiva que Mostra aquests codis d'estat.

Han poblat la llista i s'assembla a això:

Crear l'element Web de visualització de dades:

Crear el DVWP, afegint la llista personalitzada a una pàgina (pàgina del lloc en el meu cas) i seguiu les instruccions aquí (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).

A més de simplement crear el DVWP, També cal definir la propietat de paginació per mostrar totes les files disponibles. Per a mi, Això es veu alguna cosa com això:

En aquest punt, Sempre tanco SPD i el navegador. Jo llavors tornar a obrir la pàgina utilitzant el navegador. Això evita accidentalment mucking fins al disseny de part de web a la pàgina.

Modificar el XSLT:

Ara és el moment de modificar l'XSLT.

Sempre utilitzo visual studio per a això. (Veure aquí per a una nota important sobre intellisense que t'ajudarà alot).

Puc crear un projecte buida afegir quatre nous fitxers (substituint les paraules "Original" i "nou" Si s'escau):

Original.XSLT
New.XSLT
Original Params.xml
Params.xml nou

En el meu cas, s'assembla a això:

Modificar l'element web i copiar la params i XSL a l'Original"" versió en estudi Visual.

L'objectiu és provocar l'XSL transformar els resultats que vam tornar de la consulta DVWP en HTML que rendeix com un gràfic.

Amb aquesta finalitat, ajuda a considerar en primer lloc que el codi HTML ha de ser semblant abans podem confondre amb la bogeria que es coneix com "XSL". (Per ser clars, a continuació és simplement un exemple; no escriviu-lo o copiar i enganxar en estudi visual. Vaig donar un cop ple, punt de partida per a que més tard en el reportatge). El següent gràfic mostra es rendeix segons el codi HTML immediatament després:

HTML corresponent:

<HTML>
<cos>
<Centre>
<amplada de la taula = 80%>
<tr><TD><Centre>Gràfic de barres horitzontals</TD></tr>
<tr>
<TD alinear = "center">
<frontera taula = "1" amplada = 80%>
<tr>
<amplada TD = 10%>Obert</TD>
<TD><taula cellpadding ="0" cellspacing ="0" frontera = 0 width = 50%><tr bgcolor = vermell><TD> </TD></tr></taula></TD>
</tr>
<tr>
<amplada TD = 10%>Tancat</TD>
<TD><taula cellpadding ="0" cellspacing ="0" frontera = 0 width = 25%><tr bgcolor = vermell><TD> </TD></tr></taula></TD>
</tr>
<tr>
<amplada TD = 10%>Aturat</TD>
<TD><taula cellpadding ="0" cellspacing ="0" frontera = 0 width = 25%><tr bgcolor = vermell><TD> </TD></tr></taula></TD>
</tr>
</taula>
</TD>
</tr>
</taula>
</cos>
</HTML>

Utilitzava un enfocament totalment simple per crear la meva barres posant el color de fons d'una filera de "vermell".

És l'aquí per emportar: Al final, tots estem fent està creant HTML amb files i columnes.

Plantilla XSLT:

He copiat l'XSLT que genera un gràfic de barres horitzontal. És bastant bé comentar perquè no afegeixo molt aquí excepte aquestes notes:

Vaig començar amb l'omissió XSL que SharePoint Designer em va donar quan primer he creat el DVWP.
Jo era capaç de reduir aquest des de l'SPD 657 línies a 166 línies.
No perdré amb el fitxer XML de paràmetres (que és independent de l'XSL i sabrà a què em refereixo quan vas a modificar el propi DVWP; hi ha dos arxius que pot modificar). No obstant això, per tal de simplificar-lo, Em va treure gairebé tots ells de l'XSL. Això significa que si voleu fer ús d'aquests paràmetres, només cal afegir les seves definicions variables a l'XSL. Que serà fàcil ja que tindran les definicions de variable XSL originals en el seu projecte d'estudi visual.
Vostè hauria de ser capaç de copiar i enganxar aquesta directament en el teu projecte d'estudi visual. Llavors, treure les meves trucades i inserir el seu propi trucades a "ShowBar".
El desglossar els treballs creant un <un href> d'aquesta: http://server/List?FilterField1=fieldname&FilterValue1=actualFilterValue. Aquesta tècnica pot ser de valor en altres contextos. En un primer moment, Vaig pensar que seria necessari ajustar-se a un format més complex: http://server/List/AllItems.aspx?View={guid}&FilterField1=blah&FilterValue1=blah, però en el meu entorn que no és necessari. D'URL de la llista es passa a nosaltres per SharePoint perquè això és bastant fàcil de generalitzar.

Aquí és:

<XSL:full d'estil versió="1.0" excloure-resultat-prefixos="RS z o s ddwrt dt msxsl" 
 xmlns:msxsl="urna:esquemes-microsoft-com:XSLT" xmlns:XSL="http://www.w3.org/ 1999 / / transformació XSL" 
 xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" 
 xmlns:escurçó="http://schemas.microsoft.com/ASPNET/20" xmlns:DDWRT="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" 
 xmlns:o="urna:esquemes-microsoft-com:Oficina" xmlns:s="UUID:BDC6E3F0-6DA3-11D1-A2A3-00AA00C14882" 
 xmlns:DT="UUID:C2F41010-65B3 - 11d 1-A29F-00AA00C14882" xmlns:RS="urna:esquemes-microsoft-com:conjunt de files" xmlns:z="#RowsetSchema" 
 xmlns:ddwrt2="urna:FrontPage:interna">
  <XSL:sortida mètode="HTML" sagnia="no" />
  <XSL:format de decimals NaN="" />
  <XSL:Param nom="ListUrlDir"></XSL:Param> <!-- Jo necessitar això per donar suport a un trepant avall.  -->

  <XSL:plantilla Partit="/" xmlns:SharePoint="Microsoft.SharePoint.WebControls" 
 xmlns:__designer=http://schemas.microsoft.com/WebParts/v2/DataView/designer xmlns:escurçó="http://schemas.microsoft.com/ASPNET/20">
    <XSL:variable nom="dvt_StyleName">Taula</XSL:variable>
    <XSL:variable nom="Files" Selecciona="/dsQueryResponse/files/fila" />
    <XSL:variable nom="dvt_RowCount" Selecciona="Comte($Files)" />
    <XSL:variable nom="IsEmpty" Selecciona="$dvt_RowCount = 0" />
    <XSL:variable nom="dvt_IsEmpty" Selecciona="$dvt_RowCount = 0" />

    <XSL:triar>
      <XSL:Quan prova="$dvt_IsEmpty">
        Hi ha dades al gràfic!<BR/>
      </XSL:Quan>
      <XSL:en cas contrari>

        <!--
          Les coses interessants aquí comença.

          Cal definir un parell de variables per a cada fila en el gràfic: nombre total d'elements i per cent del total.
        -->
        <XSL:variable nom="totalProposed" Selecciona="Comte(/dsQueryResponse/files/fila[Normalitzar-espai(@Status) = 'Proposar'])" />
        <XSL:variable nom="percentProposed" Selecciona="$totalProposed div $dvt_RowCount" />

        <XSL:variable nom="totalInProcess" Selecciona="Comte(/dsQueryResponse/files/fila[Normalitzar-espai(@Status) = "En procés"])" />
        <XSL:variable nom="percentInProcess" Selecciona="$totalInProcess div $dvt_RowCount" />

        <XSL:variable nom="totalStalled" Selecciona="Comte(/dsQueryResponse/files/fila[Normalitzar-espai(@Status) = "Estancat"])" />
        <XSL:variable nom="percentStalled" Selecciona="$totalStalled div $dvt_RowCount" />

        <!--
          Definim la nostra taula HTML aquí.  Jo estic préstecs de alguns estàndard SharePoint estils aquí perquè sigui coherent.  Crec que complirà els canvis del fitxer global css, així com tema invalida.
        -->
        <taula amplada="100%" cellspacing="0" cellpadding="2"
estil="vora dreta: 1 #C0C0C0 sòlida; frontera-fons: 1 #C0C0C0 sòlida; vora esquerra-estil: sòlid; vora esquerra-amplada: 1; frontera-cim-style: sòlid; frontera-cim-amplada: 1;">

           <tr>
            <TD Alineació="Centre">
              <taula frontera="1" amplada="100%">

                <!--
                  Per a cada situació que volem gràfic, que anomenem la «ShowBar" plantilla.
                  Vam passar-lo:
                  1. Una etiqueta per a la fila.  Això es transforma en un enllaç.
                  2. El percentatge (variable des de dalt).
                  3. El nom de camp real del codi de la llista subjacent.  Això no ha de coincidir amb l'etiqueta d'exhibició.
                  4. Camp de valor aparellat per #3.
                  5. Total d'elements d'aquest codi d'estatus (no el total de tots els codis d'estat).

                  Que emet una <tr></tr> i la línia de gràfic de barres horitzontals.

                  Reivindiquem aquesta plantilla que voleu visualitzar cada codi d'estatus.
                -->
                <XSL:crida-plantilla nom="ShowBar">
                  <XSL:amb-param nom="BarDisplayLabel" Selecciona="'Proposar'"/>
                  <XSL:amb-param nom="BarPercent" Selecciona="$percentProposed"/>
                  <XSL:amb-param nom="QueryFilterFieldName" Selecciona="'Estat'"/>
                  <XSL:amb-param nom="QueryFilterFieldValue" Selecciona="'Proposar'"/>
                  <XSL:amb-param nom="TotalItems" Selecciona="$totalProposed"></XSL:amb-param>
                </XSL:crida-plantilla>

                <XSL:crida-plantilla nom="ShowBar">
                  <XSL:amb-param nom="BarDisplayLabel" Selecciona=""Aturat""/>
                  <XSL:amb-param nom="BarPercent" Selecciona="$percentStalled"/>
                  <XSL:amb-param nom="QueryFilterFieldName" Selecciona="'Estat'"/>
                  <XSL:amb-param nom="QueryFilterFieldValue" Selecciona=""Aturat""/>
                  <XSL:amb-param nom="TotalItems" Selecciona="$totalStalled"></XSL:amb-param>
                </XSL:crida-plantilla>

                <XSL:crida-plantilla nom="ShowBar">
                  <XSL:amb-param nom="BarDisplayLabel" Selecciona=""En procés""/>
                  <XSL:amb-param nom="BarPercent" Selecciona="$percentInProcess"/>
                  <XSL:amb-param nom="QueryFilterFieldName" Selecciona="'Estat'"/>
                  <XSL:amb-param nom="QueryFilterFieldValue" Selecciona=""En procés""/>
                  <XSL:amb-param nom="TotalItems" Selecciona="$totalInProcess"></XSL:amb-param>
                </XSL:crida-plantilla>

              </taula>
            </TD>
          </tr>
        </taula>
      </XSL:en cas contrari>
    </XSL:triar>
  </XSL:plantilla>

  <!--
    Aquesta plantilla fa el treball de mostrar línies individuals en el gràfic de barres.

    Vostè probablement a fer la majoria dels seus pessigant aquí.
  -->
  <XSL:plantilla nom="ShowBar">
    <XSL:Param nom="BarDisplayLabel" /> <!-- etiqueta per mostrar -->
    <XSL:Param nom="BarPercent"/> <!-- Per cent del total. -->
    <XSL:Param nom="QueryFilterFieldName"/> <!-- Solia anar a la consulta & filtre -->
    <XSL:Param nom="QueryFilterFieldValue"/> <!-- Solia anar a la consulta & filtre -->
    <XSL:Param nom="TotalItems" /> <!-- recompte total d'aquest barlabel -->

    <tr>

      <!-- El bar etiquetar-se. -->
      <TD classe="MS-formbody" amplada="30%">

        <!--
          Aquest pròxim conjunt d'afirmacions construeix una cadena de consulta que permet perfori avall un visualització filtrada de les dades subjacents.
          Fem ús d'unes quantes coses aquí:
          1. Podem passar FilterField1 i FilterValue1 a una llista per filtrar en una columna.
          2. SharePoint és passar un paràmetre clau per a nosaltres, ListUrlDir que apunta a la llista subjacent contra el qual aquest DVWP està "funcionant".

          XSL, tampoc?
        -->
        <XSL:text impossibilitar-sortida-escapar="Sí">
        <![CDATA[<un href ="]]></XSL:text>
        <XSL:valor de Selecciona="$ListUrlDir"/>
        <XSL:text impossibilitar-sortida-escapar="Sí"><![CDATA[?FilterField1 =]]></XSL:text>
        <XSL:valor de Selecciona="$QueryFilterFieldName"/>
        <XSL:text impossibilitar-sortida-escapar="Sí"><![CDATA[&FilterValue1 =]]></XSL:text>
        <XSL:valor de Selecciona="$QueryFilterFieldValue"/>
        <XSL:text impossibilitar-sortida-escapar="Sí"><![CDATA[">]]></XSL:text>
        <XSL:valor de Selecciona="$BarDisplayLabel"/>
        <XSL:text impossibilitar-sortida-escapar="Sí"><![CDATA[</un>]]></XSL:text>

        <!-- El bit següent mostra alguns números en el format: "(total / % del total)" -->
        (<XSL:valor de Selecciona="$TotalItems"/> /

        <!-- Això crea una etiqueta percentatge agradable per a nosaltres.  Gràcies, Microsoft! -->
        <XSL:crida-plantilla nom="percentformat">
          <XSL:amb-param nom="per cent" Selecciona="$BarPercent"/>
        </XSL:crida-plantilla>)

      </TD>

      <!-- Finalment, emeten un <TD> etiqueta pel bar propi.-->
      <TD>
        <taula cellpadding="0" cellspacing="0" frontera="0"
amplada="{ronda($BarPercent * 100)+1}%">
          <tr BGCOLOR="vermell">
            <XSL:text impossibilitar-sortida-escapar="Sí"><![CDATA[&nbsp;]]></XSL:text>
          </tr>
        </taula>
      </TD>
    </tr>

  </XSL:plantilla>

  <!-- Això és pres directament d'algunes XSL vaig trobar en una plantilla de MS. -->
  <XSL:plantilla nom="percentformat">
    <XSL:Param nom="per cent"/>
    <XSL:triar>
      <XSL:Quan prova="format de nombre($per cent, '#,##0%;-#,##0%')= 'NaN'">0%</XSL:Quan>
      <XSL:en cas contrari>
        <XSL:valor de Selecciona="format de nombre($per cent, '#,##0%;-#,##0%')" />
      </XSL:en cas contrari>
    </XSL:triar>
  </XSL:plantilla>

</XSL:full d'estil>

Els resultats:

L'XSL de dalt genera aquest gràfic:

Perfori avall les dades subjacents fent clic al codi d'estatus:

Reflexions finals:

Pot això ser generalitzada?

M'encanta aquest concepte graphing, però odio el fet que he d'entrar i fer tanta mà codificant. Li he donat una mica de pensament per si es poden generalitzar i sóc optimista, però jo també sóc una mica de por que hi hagi una paret de Maó en algun lloc al llarg del camí que no ofereix cap treball al voltant. Si algú té algunes bones idees sobre aquest, Si us plau fer una nota en els comentaris o Rebi per email.

Gràfics verticals:

Aquest és un gràfic de barres horitzontal. És certament possible crear un gràfic vertical. Només hem de canviar el codi HTML. M'agradaria començar igual: Crear una representació d'HTML d'un gràfic de barres vertical i després esbrinar com aconseguir que la via XSL. Si algú està interessat en que, Jo podria ser persuadits a provar-ho i treballar l'enrosca. Si algú ja ha fet que, please let me know and I’ll gladly link to your blog 🙂

Jo crec que el repte amb un gràfic vertical és que les etiquetes per a la gràfica són més difícils de gestionar, però certament no és impossible.

Del camp nom Gotcha:

Hi ha almenys dues coses cal buscar amb els seus noms de camp.

Primer, té un nom de camp amb un espai poder escapar a l'XSL. Això serà probablement un problema aquí:

        <XSL:variable nom="totalProposed" 
 Selecciona="Comte(/dsQueryResponse/files/fila[Normalitzar-espai(@Status) = 'Proposar'])" />

Si el seu estatus de"" columna és en realitat anomenat "codi d'estatus" llavors vostè necessita fer referència a ell com "Status_x0020_Code":
   <XSL:variable nom="totalProposed" 
 Selecciona="Comte(/dsQueryResponse/files/fila[Normalitzar-espai(@Status_x0020_Code) = 'Proposar'])" />
Segon, i estic una mica borrós en aquest, però també cal estar alerta a canvis de nom de camp del. Si anomeneu el seu camp "codi d'estatus" i més tard, Rebategi'l a "AFE estatus", el nom"intern" no canvia. El nom Interno encara serà "codi d'estatus" i cal fer referència a com "Status_x0020_Code". "Altres recursos" enllaços poden ajudar a diagnosticar i corregir aquesta classe de problema.

Sobre aquell Color:

Triava "vermell" perquè és agradable per a mi en el moment. No seria una gran cosa per mostrar diferents colors per aportar més que una descripció visual d'un nombre, però també proporcionar una útils KPI. Per exemple, Si el percentatge de "estancat" És del AFE > 10% llavors mostrar-ho vermell, en cas contrari es mostra en negre. Ús <XSL:triar> per aconseguir això.

Altres recursos:

Determinar el nom intern (i una altra bona informació) per a les dades en una llista: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!134.entry
Mostra totes les dades proporcionades pel SharePoint (l'XML crua): http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!190.entry
Obtenir l'expressió d'XPATH d'una columna concret: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!155.entry
Una altra aproximació utilitzant OWA(?). Jo té no excava-, però es veu prometedor, especialment per a gràfics circulars: http://www.waka.dk/Blog/PermaLink,guid,e2532e71-d774-4ac9-8f25-883964b830f4.aspx

Transformant feliç!

Subscriure's al meu blog!

Etiquetas de Technorati: SharePoint, DVWP, Element Web de visualització de dades, XSL, XSLT, WSS, MOSS

SharePoint espai de Paul Galvin

Arxius per mes: Desembre 2007

Creï gràfics de barres en SharePoint