Dhjetor | 2007 | Paul Galvin's SharePoint Space

Përmbledhje:

(UPDATE 12/04/07: Shtuar një tjetër burim interesant në fund të lidh në një tjetër blog që trajton këtë nëpërmjet një web shumë pjesë interesante)

This blog entry describes how to create a bar graph in SharePoint. This works in both WSS and MOSS environments as it only depends upon the data view web part.

Qasja e përgjithshme është si vijon:

Krijo një listë ose bibliotekën dokument që përmban të dhënat që ju doni të grafik.
Vendi bibliotekë dokument lidhur / listë me porosi në një faqe dhe kthyer atë në një pjesë të të dhënave Shiko Web (DVWP).
Ndrysho XSL e DVWP për të gjeneruar HTML që tregon se si një grafik.

Skenari Biznes / Setup:

Unë kam krijuar një listë me porosi me kolonën e Titullit standarde dhe një kolonë shtesë, "Status". This models (shumë e thjeshtë e) an "Authorization For Expense" skenar ku titulli paraqet projektin dhe statusi një vlerë nga lista e:

Propozuar
Në proces
Ngecur

Objektivi është për të prodhuar një grafik interaktiv horizontal bar që tregon se këto kode statusit.

Unë kam populluar listën dhe kjo duket si ky:

Krijo Dhënave Web Part Shiko:

Krijo DVWP duke shtuar listën me porosi në një faqe (Faqja Site në rastin tim) dhe ndiqni udhëzimet këtu (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).

Përveç thjesht krijimin e DVWP, we also need to set the paging property to show all available rows. Për mua, kjo duket diçka si kjo:

Në këtë pikë, I always close SPD and the browser. I then re-open the page using the browser. This avoids accidentally mucking up the web part layout on the page.

Ndrysho XSLT:

Është koha tani për të modifikuar XSLT.

I always use visual studio for this. (Shoh këtu Një shënim i rëndësishëm për rreth Intellisense që do të ju ndihmojë shumë).

Unë krijoj një projekt bosh shtoni katër fotografi të reja (replacing the words "Original" and "New" si të përshtatshme):

Original.xslt
New.xslt
Original Params.xml
Params.xml New

Në rastin tim, kjo duket si ky:

Modify the web part and copy the params and XSL to the "Original" Versioni në Visual Studio.

Qëllimi këtu është që të shkaktojë XSL për të transformuar rezultatet ne të kthehemi nga query DVWP në HTML që bën si një grafik.

Për këtë qëllim, it helps to first consider what the HTML should look like before we get confused by the insanity that is known as "XSL". (Të jetë i qartë, Më poshtë është thjesht një shembull; don’t type it or copy/paste into visual studio. I provide a full blow starting point for that later in the write-up). The following sample graph is rendered as per the HTML immediately following:

HTML Korrespondon:

<html>
<trup>
<qendër>
<Tabela width = 80%>
<tr><td><qendër>Grafiku Horizontal Bar</td></tr>
<tr>
<td align="center">
<table border="1" width = 80%>
<tr>
<td width = 10%>Hapur</td>
<td><Tabela cellpadding ="0" cellspacing ="0" border = 0 width = 50%><tr bgcolor = kuqe><td> </td></tr></tryezë></td>
</tr>
<tr>
<td width = 10%>Mbyllur</td>
<td><Tabela cellpadding ="0" cellspacing ="0" border = 0 width = 25%><tr bgcolor = kuqe><td> </td></tr></tryezë></td>
</tr>
<tr>
<td width = 10%>Ngecur</td>
<td><Tabela cellpadding ="0" cellspacing ="0" border = 0 width = 25%><tr bgcolor = kuqe><td> </td></tr></tryezë></td>
</tr>
</tryezë>
</td>
</tr>
</tryezë>
</trup>
</html>

I used a dead simple approach to creating my bars by setting the background color of a row to "red".

Të-larg këtu është kjo: Në fund, të gjithë ne po bëjmë është krijuar me HTML rreshtave dhe kolonave.

Template XSLT:

I’ve copied the XSLT that generates a horizontal bar graph. It’s fairly well commented so I won’t add much here except for these notes:

Unë fillova me XSL parazgjedhur që SharePoint Designer dha mua kur unë së pari krijoi DVWP.
Unë kam qenë në gjendje për të shkurtuar këtë poshtë nga SPD-së 657 linja të 166 lines.
Unë nuk bela rreth me dosjen XML parametrave (e cila është ndarë nga XSL dhe ju do të dini se çfarë dua të them, kur ju shkoni për të modifikuar DVWP vetë; ka dy fotografi ju mund të modifikoj). Megjithatë, në mënyrë që të thjeshtojë atë, I did remove nearly all of them from the XSL. This means that if you want to make use of those parameters, you just need to add their variable definitions back to the XSL. That will be easy since you will have the original XSL variable definitions in your visual studio project.
You ought to be able to copy and paste this directly into your visual studio project. Pastaj, remove my calls and insert your own calls to "ShowBar".
Stërvitja poshtë punon duke krijuar një <a href> si kjo: http://server/List?FilterField1=fieldname&FilterValue1=actualFilterValue. This technique may be of value in other contexts. Në fillim, Unë mendova se do të duhet të jenë në përputhje me një format më të ndërlikuar: http://server/List/AllItems.aspx?View={guid}&FilterField1=blah&FilterValue1=blah, but in my environment that is not necessary. The List’s URL is passed to us by SharePoint so this is quite easy to generalize.

Këtu ajo është:

<XSL:stylesheet version="1.0" përjashtojnë-rezultat-Parashtesat="ddwrt RS Z o s dt msxsl" 
 xmlns:msxsl="urnë: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:nëpërkë="http://schemas.microsoft.com/ASPNET/20" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" 
 xmlns:o="urnë:schemas-microsoft-com:zyrë" xmlns:s="UUID:BDC6E3F0-6DA3-11d1-A2A3-00AA00C14882" 
 xmlns:dt="UUID:C2F41010-65B3-11d1-A29F-00AA00C14882" xmlns:rs="urnë:schemas-microsoft-com:rowset" xmlns:Z="#RowsetSchema" 
 xmlns:ddwrt2="urnë:Ballina:i brendshëm">
  <XSL:prodhim metodë="html" porosit="jo" />
  <XSL:Te Dhjeta-format NaN="" />
  <XSL:param emër="ListUrlDir"></XSL:param> <!-- Unë kam nevojë për këtë për të mbështetur një stërvitje down-.  -->

  <XSL:shabllon ndeshje="/" xmlns:SharePoint="Microsoft.SharePoint.WebControls" 
 xmlns:__designer=http://schemas.microsoft.com/WebParts/v2/DataView/designer xmlns:nëpërkë="http://schemas.microsoft.com/ASPNET/20">
    <XSL:variabël emër="dvt_StyleName">Tryezë</XSL:variabël>
    <XSL:variabël emër="Rreshtat" zgjedh="/dsQueryResponse / Rreshtat / Row" />
    <XSL:variabël emër="dvt_RowCount" zgjedh="numëroj($Rreshtat)" />
    <XSL:variabël emër="IsEmpty" zgjedh="$dvt_RowCount = 0" />
    <XSL:variabël emër="dvt_IsEmpty" zgjedh="$dvt_RowCount = 0" />

    <XSL:zgjedh>
      <XSL:kur provë="$dvt_IsEmpty">
        Nuk ka të dhëna në grafik!<br/>
      </XSL:kur>
      <XSL:ndryshe>

        <!--
          Stuff interesante fillon këtu.

          Ne kemi nevojë për të përcaktuar një palë e variablave për çdo rresht në grafik: Numri i përgjithshëm
          .
        -->
        <XSL:variabël emër="totalProposed" zgjedh="numëroj(/dsQueryResponse / Rreshtat / Row[normalizojë-hapësirë(@ Status) = 'Propozuar'])" />
        <XSL:variabël emër="percentProposed" zgjedh="$div totalProposed $ dvt_RowCount" />

        <XSL:variabël emër="totalInProcess" zgjedh="numëroj(/dsQueryResponse / Rreshtat / Row[normalizojë-hapësirë(@ Status) = 'Në Procesin'])" />
        <XSL:variabël emër="percentInProcess" zgjedh="$totalInProcess div $ dvt_RowCount" />

        <XSL:variabël emër="totalStalled" zgjedh="numëroj(/dsQueryResponse / Rreshtat / Row[normalizojë-hapësirë(@ Status) = 'Ngujuar'])" />
        <XSL:variabël emër="percentStalled" zgjedh="$div totalStalled $ dvt_RowCount" />

        <!--
          Ne define tabelën tonë HTML këtu.  Unë jam duke marrë borxh nga disa standarde
          .  Unë mendoj se kjo do ta nderojë
          .
        -->
        <tryezë gjerësi="100%" cellspacing="0" cellpadding="2"
stil="kufirit të djathtë: 1 solid # C0C0C0; kufirit-poshtme: 1 solid # C0C0C0; kufirit të majtë-style: i fortë; kufirit-width majtë: 1; kufirit-top-style: i fortë; kufirit-top-width: 1;">

           <tr>
            <td align="qendër">
              <tryezë kufi="1" gjerësi="100%">

                <!--
                  Për çdo status që ne duam të grafik, we call the "ShowBar" shabllon.
                  Ne të kalojë atë:
                  1. Një emërtim për rresht.  Kjo është shndërruar në një hyperlink.
                  2. Për qind (ndryshueshme nga lart).
                  3. Emri aktual Fusha e kodit nga lista themelor.  Kjo
                     .
                  4. Vlera fushë krahasohen për #3.
                  5. Artikuj totale e këtij kodi statusit (nuk grand total prej të gjithë
                     ).

                  Ai lëshon një <tr></tr> dhe horizontale Bar Grafiku linjë.

                  Ne e quajmë këtë template për secilin kod statusit ne duam për të parë.
                -->
                <XSL:thirrje-template emër="ShowBar">
                  <XSL:me param- emër="BarDisplayLabel" zgjedh="'Propozuar'"/>
                  <XSL:me param- emër="BarPercent" zgjedh="$percentProposed"/>
                  <XSL:me param- emër="QueryFilterFieldName" zgjedh="'Statusi'"/>
                  <XSL:me param- emër="QueryFilterFieldValue" zgjedh="'Propozuar'"/>
                  <XSL:me param- emër="TotalItems" zgjedh="$totalProposed"></XSL:me param->
                </XSL:thirrje-template>

                <XSL:thirrje-template emër="ShowBar">
                  <XSL:me param- emër="BarDisplayLabel" zgjedh="'Ngujuar'"/>
                  <XSL:me param- emër="BarPercent" zgjedh="$percentStalled"/>
                  <XSL:me param- emër="QueryFilterFieldName" zgjedh="'Statusi'"/>
                  <XSL:me param- emër="QueryFilterFieldValue" zgjedh="'Ngujuar'"/>
                  <XSL:me param- emër="TotalItems" zgjedh="$totalStalled"></XSL:me param->
                </XSL:thirrje-template>

                <XSL:thirrje-template emër="ShowBar">
                  <XSL:me param- emër="BarDisplayLabel" zgjedh="'Në Procesi'"/>
                  <XSL:me param- emër="BarPercent" zgjedh="$percentInProcess"/>
                  <XSL:me param- emër="QueryFilterFieldName" zgjedh="'Statusi'"/>
                  <XSL:me param- emër="QueryFilterFieldValue" zgjedh="'Në Procesi'"/>
                  <XSL:me param- emër="TotalItems" zgjedh="$totalInProcess"></XSL:me param->
                </XSL:thirrje-template>

              </tryezë>
            </td>
          </tr>
        </tryezë>
      </XSL:ndryshe>
    </XSL:zgjedh>
  </XSL:shabllon>

  <!--
    Kjo template bën punën e shfaqur linjat individuale në grafik bar.

    Ju ndoshta do të bëjë më të tweaking tuaj këtu.
  -->
  <XSL:shabllon emër="ShowBar">
    <XSL:param emër="BarDisplayLabel" /> <!-- etiketë për të treguar -->
    <XSL:param emër="BarPercent"/> <!-- Përqind të gjithsej. -->
    <XSL:param emër="QueryFilterFieldName"/> <!-- Përdoret për të hidhen në query & filtroni -->
    <XSL:param emër="QueryFilterFieldValue"/> <!-- Përdoret për të hidhen në query & filtroni -->
    <XSL:param emër="TotalItems" /> <!-- numërimin total të këtij barlabel -->

    <tr>

      <!-- Etiketë bar vetë. -->
      <td klasë="ms-formbody" gjerësi="30%">

        <!--
          Ky grup tjetër i deklaratave ndërton një varg pyetje që lejon
          .
          Ne e bëjnë përdorimin e disa gjëra këtu:
          1. Ne mund të kalojë FilterField1 dhe FilterValue1 në një listë për të filtruar në një kolonë.
          2. SharePoint është duke kaluar një parametër kyç për ne, ListUrlDir that points to
             the underlying list against which this DVWP is "running".

          A nuk XSL fun?
        -->
        <XSL:tekst disable-output-ikin="po">
        <![CDATA[<a href ="]]></XSL:tekst>
        <XSL:vlera-e zgjedh="$ListUrlDir"/>
        <XSL:tekst disable-output-ikin="po"><![CDATA[?FilterField1 =]]></XSL:tekst>
        <XSL:vlera-e zgjedh="$QueryFilterFieldName"/>
        <XSL:tekst disable-output-ikin="po"><![CDATA[&= FilterValue1]]></XSL:tekst>
        <XSL:vlera-e zgjedh="$QueryFilterFieldValue"/>
        <XSL:tekst disable-output-ikin="po"><![CDATA[">]]></XSL:tekst>
        <XSL:vlera-e zgjedh="$BarDisplayLabel"/>
        <XSL:tekst disable-output-ikin="po"><![CDATA[</një>]]></XSL:tekst>

        <!-- Bit tjetër tregon disa numra në formatin: "(total / % i totalil)" -->
        (<XSL:vlera-e zgjedh="$TotalItems"/> /

        <!-- Kjo krijon një etiketë të këndshme për qind për ne.  Falënderim, Microsoft! -->
        <XSL:thirrje-template emër="percentformat">
          <XSL:me param- emër="përqind" zgjedh="$BarPercent"/>
        </XSL:thirrje-template>)

      </td>

      <!-- Më në fund, lëshojnë një <td> tag për bar vetë.-->
      <td>
        <tryezë cellpadding="0" cellspacing="0" kufi="0"
gjerësi="{rrumbullakët($* BarPercent 100)+1}%">
          <tr bgcolor="i kuq">
            <XSL:tekst disable-output-ikin="po"><![CDATA[&nbsp;]]></XSL:tekst>
          </tr>
        </tryezë>
      </td>
    </tr>

  </XSL:shabllon>

  <!-- Ky është marrë direkt nga disa XSL kam gjetur në një template MS. -->
  <XSL:shabllon emër="percentformat">
    <XSL:param emër="përqind"/>
    <XSL:zgjedh>
      <XSL:kur provë="Formati-numri($përqind, '#, # # 0%;-#,##0%')= 'NaN'">0%</XSL:kur>
      <XSL:ndryshe>
        <XSL:vlera-e zgjedh="Formati-numri($përqind, '#, # # 0%;-#,##0%')" />
      </XSL:ndryshe>
    </XSL:zgjedh>
  </XSL:shabllon>

</XSL:stylesheet>

Rezultatet:

XSL nga lart gjeneron këtij grafiku:

Stërvitja poshtë në të dhënat themelore duke klikuar mbi kodin e statusit:

Mendime përfundimtare:

Kjo mund të përgjithësohet?

Unë e dua këtë koncept grafikët, but I hate the fact that I have to go in and do so much hand-coding. I’ve given a little thought to whether it can be generalized and I’m optimistic, but I’m also a little fearful that there may be a brick wall somewhere along the path that won’t offer any work-around. If anyone has some good ideas on this, ju lutem bëni një shënim në komentet ose email mua.

Grafikët Vertical:

This is a horizontal bar graph. It’s certainly possible to create a vertical graph. We just need to change the HTML. I would start the same way: Create an HTML representation of a vertical bar graph and then figure out how to get that via XSL. If anyone is interested in that, I could be persuaded to try it out and work out the kinks. If someone has already done that, ju lutem më njoftoni dhe unë me kënaqësi do të lidhem me blogun tuaj

Unë mendoj se sfida me një grafik vertikale është se etiketat për grafikun janë më të vështira për të menaxhuar, por sigurisht jo e pamundur.

Emri Fusha e Gotcha:

Ka të paktën dy gjëra për të parë jashtë për me emrat tuaj në terren.

I parë, a field name with a space has to be escaped in the XSL. This will probably be an issue here:

        <XSL:variabël emër="totalProposed" 
 zgjedh="numëroj(/dsQueryResponse / Rreshtat / Row[normalizojë-hapësirë(@ Status) = 'Propozuar'])" />

If your "Status" column is actually named "Status Code" then you need to reference it as "Status_x0020_Code":
   <XSL:variabël emër="totalProposed" 
 zgjedh="numëroj(/dsQueryResponse / Rreshtat / Row[normalizojë-hapësirë(@ Status_x0020_Code) = 'Propozuar'])" />
I dytë, dhe unë jam një fuzzy pak në këtë, but you also need to be on the alert for field name changes. If you name your field "Status Code" dhe pastaj më vonë, rename it to "AFE Status", the "internal name" does not change. The internal name will still be "Status Code" and must be referenced as "Status_x0020_Code". The "other resources" Lidhje mund të ndihmojë në diagnostikimin dhe korrigjuar këtë lloj problemi.

Rreth asaj Color:

I picked "red" because it’s pleasing to me at the moment. It would not be a big deal to show different colors so as to provide more than just a visual description of a number, but to also provide a useful KPI. Për shembull, if the percentage of "stalled" AFE-së është > 10% pastaj të tregojë atë të kuqe, otherwise show it in black. Përdorim <XSL:zgjedh> për të arritur këtë.

Burime të tjera:

Përcaktoni emrin e brendshëm (dhe info tjera të mira) për të dhënat në një listë: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!134.entry
Shfaq të gjitha të dhënat e ofruara nga SharePoint (XML papërpunuara): http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!190.entry
Get shprehje XPath e një kolonë të veçantë: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!155.entry
Një qasje tjetër duke përdorur Owa(?). I have not dug into it, por duket premtuese, sidomos për Listat: http://www.waka.dk/Blog/PermaLink,guid,e2532e71-d774-4ac9-8f25-883964b830f4.aspx

Gëzuar transformuar!

Abonohen në blogun tim!

Technorati Tags: SharePoint, DVWP, Të dhënat Pjesa Shiko Web-faqen, XSL, XSLT, WSS, Moss

Paul Galvin's SharePoint Space

Arkivat mujore: Dhjetor 2007

Krijo grafikët Bar në SharePoint