Diċembru | 2007 | SharePoint Ispazju Paul Galvin ta

Ħarsa ġenerali:

(UPDATE 12/04/07: Miżjud riżors ieħor interessanti fl-aħħar jgħaqqdu għal ieħor blog li tindirizza din permezz ta 'parti web interessanti ħafna)

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.

L-approċċ ġenerali hija kif ġej:

Tinħoloq lista jew il-librerija dokument li jkun fih l-informazzjoni li inti tixtieq li graff.
Poġġi l-librerija dokument ieħor assoċjat, / lista tad-dwana fuq il-paġna u jaqilbu għal parti data web ħsieb (DVWP).
Tibdel XSL l DVWP li tiġġenera HTML li turi bħala graff.

Xenarju Business / Setup:

I ħolqu lista custom mal-Titolu kolonna standard u l-kolonna addizzjonali waħda, "Status". This models (ħafna simplistikament) an "Authorization For Expense" xenarju fejn it-titolu jirrappreżenta l-proġett u l-Istatus ta 'valur mil-lista ta':

Propost
Fil Proċess
Waqfu

L-għan huwa li jipproduċu graff interattiv bar orizzontali li turi dawn il-kodiċijiet istat.

Għandi popolati il-lista u jidher qisu dan:

Oħloq Data View Web Parti:

Oħloq il-DVWP billi żżid il-lista tad-dwana għal paġna (Paġna sit fil-każ tiegħi) u segwi l-istruzzjonijiet hawn (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).

Minbarra li sempliċiment toħloq l-DVWP, we also need to set the paging property to show all available rows. Għalija, dan jistenna xi ħaġa bħal din:

F'dan il-punt, 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.

Tibdel il XSLT:

Issa huwa żmien biex jimmodifika l-XSLT.

I always use visual studio for this. (Ara hawn għal nota importanti dwar IntelliSense li ser jgħinek ħafna).

I joħolqu proġett vojta żid erba fajls ġodda (replacing the words "Original" and "New" kif xieraq):

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

Fil-każ tiegħi, jidher qisu dan:

Modify the web part and copy the params and XSL to the "Original" verżjoni fis Visual Studio.

L-għan hawnhekk huwa li jikkawża l XSL li tittrasforma r-riżultati nikbru lura mill-mistoqsija DVWP fis HTML li jirrendi bħala graff.

Biex dan il-għan, it helps to first consider what the HTML should look like before we get confused by the insanity that is known as "XSL". (Biex ikunu ċari, li ġej huwa sempliċement eżempju; 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 Korrispondenti:

<html>
<korp>
<ċentru>
<wisa tabella = 80%>
<tr><td><ċentru>Grafika Bar orizzontali</td></tr>
<tr>
<td align="center">
<table border="1" wisa '= 80%>
<tr>
<wisa td = 10%>Open</td>
<td><tabella cellpadding ="0" cellspacing ="0" fruntiera = 0 wisa '= 50%><tr bgcolor = aħmar><td> </td></tr></tabella></td>
</tr>
<tr>
<wisa td = 10%>Magħluq</td>
<td><tabella cellpadding ="0" cellspacing ="0" fruntiera = 0 wisa '= 25%><tr bgcolor = aħmar><td> </td></tr></tabella></td>
</tr>
<tr>
<wisa td = 10%>Waqfu</td>
<td><tabella cellpadding ="0" cellspacing ="0" fruntiera = 0 wisa '= 25%><tr bgcolor = aħmar><td> </td></tr></tabella></td>
</tr>
</tabella>
</td>
</tr>
</tabella>
</korp>
</html>

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

Il-take-away hawnhekk hija din: Fl-aħħar, kollha qed nagħmlu qed toħloq HTML ma ringieli u kolonni.

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:

I beda bil-default XSL li SharePoint Designer tatni meta I ewwel ħolqu l-DVWP.
I kien kapaċi li tnaqqas din stabbiliti minn dak tal-SPD 657 linji għal 166 lines.
I ma mess madwar il-fajl XML parametri (li hija separata mill-XSL u tkun taf taf dak li jfisser meta inti tmur biex jimmodifikaw il-DVWP innifsu; hemm żewġ fajls li inti tista 'timmodifika). Madankollu, sabiex tkun issimplifikata, 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. Imbagħad, remove my calls and insert your own calls to "ShowBar".
Il-drill isfel jaħdem billi toħloq <a href> bħal dan: http://server/List?FilterField1=fieldname&FilterValue1=actualFilterValue. This technique may be of value in other contexts. Fl-ewwel, Ħsibt I bżonn biex jikkonformaw ma 'format aktar kumplessi: 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.

Hawnhekk huwa:

<XSL:stylesheet Verżjoni="1.0" jeskludu-riżultat-prefissi="rs z o i ddwrt dt msxsl" 
 xmlns:msxsl="urn:schemos-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="urn:schemos-microsoft-com:uffiċċju" xmlns:i="UUID:BDC6E3F0-6DA3-11d1-A2A3-00AA00C14882" 
 xmlns:dt="UUID:C2F41010-65B3-11d1-A29F-00AA00C14882" xmlns:rs="urn:schemos-microsoft-com:rowset" xmlns:z="#RowsetSchema" 
 xmlns:ddwrt2="urn:Frontpage:intern">
  <XSL:output metodu="html" inċiż="ebda" />
  <XSL:dećimali-format NaN="" />
  <XSL:param isem="ListUrlDir"></XSL:param> <!-- I bżonn dan li tappoġġja drill-down.  -->

  <XSL:template jaqblu="/" xmlns:SharePoint="Microsoft.SharePoint.WebControls" 
 xmlns:__designer=http://schemas.microsoft.com/WebParts/v2/DataView/designer xmlns:asp="http://schemas.microsoft.com/ASPNET/20">
    <XSL:varjabbli isem="dvt_StyleName">Tabella</XSL:varjabbli>
    <XSL:varjabbli isem="Ringieli" tagħżel="/dsQueryResponse / Ringieli / Ringiela" />
    <XSL:varjabbli isem="dvt_RowCount" tagħżel="joqgħod($Ringieli)" />
    <XSL:varjabbli isem="IsEmpty" tagħżel="$dvt_RowCount = 0" />
    <XSL:varjabbli isem="dvt_IsEmpty" tagħżel="$dvt_RowCount = 0" />

    <XSL:jagħżlu>
      <XSL:Meta test="$dvt_IsEmpty">
        M'hemm l-ebda data lill-graff!<br/>
      </XSL:Meta>
      <XSL:inkella>

        <!--
          L-għalf interessanti jibda hawn.

          Għandna bżonn li jiddefinixxu par ta 'varjabbli għal kull ringiela fil-graff: numru totali
          .
        -->
        <XSL:varjabbli isem="totalProposed" tagħżel="joqgħod(/dsQueryResponse / Ringieli / Ringiela[jinnormalizzaw l-ispazju(@ Status) = "Proposti"])" />
        <XSL:varjabbli isem="percentProposed" tagħżel="$totalProposed div $ dvt_RowCount" />

        <XSL:varjabbli isem="totalInProcess" tagħżel="joqgħod(/dsQueryResponse / Ringieli / Ringiela[jinnormalizzaw l-ispazju(@ Status) = "Fil Proċess"])" />
        <XSL:varjabbli isem="percentInProcess" tagħżel="$totalInProcess div $ dvt_RowCount" />

        <XSL:varjabbli isem="totalStalled" tagħżel="joqgħod(/dsQueryResponse / Ringieli / Ringiela[jinnormalizzaw l-ispazju(@ Status) = "Waqaf"])" />
        <XSL:varjabbli isem="percentStalled" tagħżel="$div totalStalled $ dvt_RowCount" />

        <!--
          Aħna jiddefinixxu tabella HTML tagħna hawn.  Jien self minn xi standard
          .  Naħseb li se unur
          .
        -->
        <tabella wisa="100%" cellspacing="0" cellpadding="2"
stil="-dritt transkonfinali: 1 solidu # C0C0C0; fruntiera tal-qiegħ: 1 solidu # C0C0C0; -xellug stil fruntiera: solidu; -left-wisa fruntiera: 1; fruntiera-top-istil: solidu; -top-wisa fruntiera: 1;">

           <tr>
            <td jallinjaw="ċentru">
              <tabella fruntiera="1" wisa="100%">

                <!--
                  Għal kull status li rridu graff, we call the "ShowBar" template.
                  Aħna tgħaddiha:
                  1. A tikketta għar-ringiela.  Dan huwa trasformat hyperlink.
                  2. Il-mija (varjabbli minn fuq).
                  3. L-isem medda attwali tal-kodiċi mil-lista sottostanti.  Dan
                     .
                  4. Valur Field mqabbla għal #3.
                  5. Oġġetti totali ta 'dan il-kodiċi status (mhux-total sħiħ ta 'kulħadd
                     ).

                  Hija temetti <tr></tr> u l-bar graff linja orizzontali.

                  Aħna nsejħu dan il-mudell għal kull kodiċi status aħna tixtieq tara.
                -->
                <XSL:call-template isem="ShowBar">
                  <XSL:ma 'param isem="BarDisplayLabel" tagħżel=""Proposti""/>
                  <XSL:ma 'param isem="BarPercent" tagħżel="$percentProposed"/>
                  <XSL:ma 'param isem="QueryFilterFieldName" tagħżel=""Status""/>
                  <XSL:ma 'param isem="QueryFilterFieldValue" tagħżel=""Proposti""/>
                  <XSL:ma 'param isem="TotalItems" tagħżel="$totalProposed"></XSL:ma 'param>
                </XSL:call-template>

                <XSL:call-template isem="ShowBar">
                  <XSL:ma 'param isem="BarDisplayLabel" tagħżel=""Waqaf""/>
                  <XSL:ma 'param isem="BarPercent" tagħżel="$percentStalled"/>
                  <XSL:ma 'param isem="QueryFilterFieldName" tagħżel=""Status""/>
                  <XSL:ma 'param isem="QueryFilterFieldValue" tagħżel=""Waqaf""/>
                  <XSL:ma 'param isem="TotalItems" tagħżel="$totalStalled"></XSL:ma 'param>
                </XSL:call-template>

                <XSL:call-template isem="ShowBar">
                  <XSL:ma 'param isem="BarDisplayLabel" tagħżel=""Fil Proċess""/>
                  <XSL:ma 'param isem="BarPercent" tagħżel="$percentInProcess"/>
                  <XSL:ma 'param isem="QueryFilterFieldName" tagħżel=""Status""/>
                  <XSL:ma 'param isem="QueryFilterFieldValue" tagħżel=""Fil Proċess""/>
                  <XSL:ma 'param isem="TotalItems" tagħżel="$totalInProcess"></XSL:ma 'param>
                </XSL:call-template>

              </tabella>
            </td>
          </tr>
        </tabella>
      </XSL:inkella>
    </XSL:jagħżlu>
  </XSL:template>

  <!--
    Dan template ma l-ħidma ta 'wiri linji individwali fil-graff bar.

    Int ser ikollok probabbilment jagħmlu ħafna mix tweaking tiegħek hawn.
  -->
  <XSL:template isem="ShowBar">
    <XSL:param isem="BarDisplayLabel" /> <!-- tikketta li turi -->
    <XSL:param isem="BarPercent"/> <!-- Mija tat-total. -->
    <XSL:param isem="QueryFilterFieldName"/> <!-- Użati biex jaqbżu l-mistoqsija & filtru -->
    <XSL:param isem="QueryFilterFieldValue"/> <!-- Użati biex jaqbżu l-mistoqsija & filtru -->
    <XSL:param isem="TotalItems" /> <!-- għadd totali ta 'dan barlabel -->

    <tr>

      <!-- It-tikketta bar innifsu. -->
      <td klassi="ms-formbody" wisa="30%">

        <!--
          Dan is-sett li jmiss ta 'dikjarazzjonijiet jibni string query li tippermetti
          .
          Nagħmlu użu ta 'ftit affarijiet hawn:
          1. Nistgħu jgħaddu FilterField1 u FilterValue1 għal lista li filtru fuq kolonna.
          2. SharePoint hija tgħaddi parametru ewlieni għalina, ListUrlDir that points to
             the underlying list against which this DVWP is "running".

          Mhuwiex XSL gost?
        -->
        <XSL:test jiskonnettja-output-ħarba="iva">
        <![CDATA[<a href ="]]></XSL:test>
        <XSL:il-valur tal- tagħżel="$ListUrlDir"/>
        <XSL:test jiskonnettja-output-ħarba="iva"><![CDATA[?FilterField1 =]]></XSL:test>
        <XSL:il-valur tal- tagħżel="$QueryFilterFieldName"/>
        <XSL:test jiskonnettja-output-ħarba="iva"><![CDATA[&= FilterValue1]]></XSL:test>
        <XSL:il-valur tal- tagħżel="$QueryFilterFieldValue"/>
        <XSL:test jiskonnettja-output-ħarba="iva"><![CDATA[">]]></XSL:test>
        <XSL:il-valur tal- tagħżel="$BarDisplayLabel"/>
        <XSL:test jiskonnettja-output-ħarba="iva"><![CDATA[</a>]]></XSL:test>

        <!-- Il bit jmiss turi xi numri fil-format: "(total / % tat-total)" -->
        (<XSL:il-valur tal- tagħżel="$TotalItems"/> /

        <!-- Dan joħloq tikketta mija sbieħ għalina.  Grazzi, Microsoft! -->
        <XSL:call-template isem="percentformat">
          <XSL:ma 'param isem="mija" tagħżel="$BarPercent"/>
        </XSL:call-template>)

      </td>

      <!-- Fl-aħħarnett, jitfa ' <td> tag għall-bar innifsu.-->
      <td>
        <tabella cellpadding="0" cellspacing="0" fruntiera="0"
wisa="{round($BarPercent * 100)+1}%">
          <tr bgcolor="aħmar">
            <XSL:test jiskonnettja-output-ħarba="iva"><![CDATA[&nbsp;]]></XSL:test>
          </tr>
        </tabella>
      </td>
    </tr>

  </XSL:template>

  <!-- Dan huwa meħud direttament minn xi XSL sibt fi SM template. -->
  <XSL:template isem="percentformat">
    <XSL:param isem="mija"/>
    <XSL:jagħżlu>
      <XSL:Meta test="-Numru format($mija, "#, # # 0%;-#,##0%")= "NaN"">0%</XSL:Meta>
      <XSL:inkella>
        <XSL:il-valur tal- tagħżel="-Numru format($mija, "#, # # 0%;-#,##0%")" />
      </XSL:inkella>
    </XSL:jagħżlu>
  </XSL:template>

</XSL:stylesheet>

Ir-Riżultati:

Il XSL minn fuq jiġġenera dan il-graff:

Drill stabbiliti għad-data sottostanti billi tikklikkja fuq l-status code:

Ħsibijiet konklużivi:

Jista 'dan jiġi Ġeneralizzata?

I love dan il-kunċett graphing, 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, jekk jogħġbok ħu nota fil-kummenti jew email me.

Grafiċi vertikali:

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, please let me know and I’ll gladly link to your blog 🙂

Naħseb li l-isfida ma graff vertikali hija li t-tikketti għall-graff huma aktar diffiċli biex tamminstrahom, iżda ċertament mhux impossibbli.

Isem il-Qasam Gotcha tal:

Hemm mill-inqas żewġ affarijiet li għandek toqgħod attent għal mal-qasam ismijiet tiegħek.

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

        <XSL:varjabbli isem="totalProposed" 
 tagħżel="joqgħod(/dsQueryResponse / Ringieli / Ringiela[jinnormalizzaw l-ispazju(@ Status) = "Proposti"])" />

If your "Status" column is actually named "Status Code" then you need to reference it as "Status_x0020_Code":
   <XSL:varjabbli isem="totalProposed" 
 tagħżel="joqgħod(/dsQueryResponse / Ringieli / Ringiela[jinnormalizzaw l-ispazju(@ Status_x0020_Code) = "Proposti"])" />
Tieni, u jien fuzzy ftit fuq dan, but you also need to be on the alert for field name changes. If you name your field "Status Code" u mbagħad aktar tard, 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" rabtiet jistgħu jgħinu dijanjosi u jikkoreġu dan it-tip ta 'problema.

Dwar dak Kulur:

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. Per eżempju, if the percentage of "stalled" Tal-AFE huwa > 10% mbagħad juru dan aħmar, otherwise show it in black. Użu <XSL:jagħżlu> biex dan jintlaħaq.

Riżorsi oħra:

Iddetermina l-isem intern (u info oħra tajba) għad-data fil-lista: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!134.entry
Uri d-data kollha pprovduti mill SharePoint (l-XML prima): http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!190.entry
Niżżel l-espressjoni XPath ta 'kolonna speċifika: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!155.entry
Approċċ ieħor bl OWA(?). I have not dug into it, iżda jistenna promettenti, speċjalment għall-mapep pie: http://www.waka.dk/Blog/PermaLink,guid,e2532e71-d774-4ac9-8f25-883964b830f4.aspx

Happy trasformazzjoni!

<aħħari />

Abbona għall-blog tiegħi!

Tags: SharePoint, DVWP, Data View Web Parti, XSL, XSLT, WSS, MOSS

SharePoint Ispazju Paul Galvin ta

Arkivji ta 'Kull Xahar: Diċembru 2007

Oħloq Grafiċi Bar fl SharePoint