Nollaig | 2007 | SharePoint Spás Paul Galvin ar

Forbhreathnú:

(Suas chun dáta 12/04/07: Curtha acmhainn suimiúil eile ag an deireadh nascadh le blag eile a thugann aghaidh ar seo trí cuid gréasáin an-suimiúil)

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.

Is é an cur chuige foriomlán mar seo a leanas:

Cruthaigh liosta nó leabharlann doiciméad ina bhfuil na sonraí is mian leat a graf.
Cuir an leabharlann doiciméad gaolmhar / liosta saincheaptha isteach ar leathanach agus é a thiontú go sonraí a gcuid gréasáin dearcadh (DVWP).
Athraigh XSL an DVWP HTML a léiríonn mar ghraf a ghiniúint.

Cás Gnó / Socrú:

Chruthaigh mé liosta saincheaptha leis an gcolún Teideal caighdeánach agus aon cholún breise, "Status". This models (an-simplistically) an "Authorization For Expense" cás nuair a dhéanann ionadaíocht ar an teideal an tionscadail agus an Stádas luach as an liosta de:

Molta
I Próiseas
Stop tagtha

Is é an cuspóir a thabhairt ar aird graf barra cothrománach idirghníomhach a léiríonn na cóid seo stádas.

Tá mé daonra an liosta agus tá sé cosúil le seo:

Cruthaigh Sonraí View Web Cuid:

Cruthaigh an DVWP tríd an liosta saincheaptha le leathanach (leathanach an láthair i mo chás) agus lean na treoracha anseo (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).

Chomh maith le go simplí a chruthú ar an DVWP, we also need to set the paging property to show all available rows. Maidir liom féin, seo Breathnaíonn an rud éigin mar seo:

Ag an bpointe seo, 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.

Athraigh an XSLT:

Tá sé am anois a mhodhnú an XSLT.

I always use visual studio for this. (Féach anseo do nóta tábhachtach faoi IntelliSense a chabhróidh leat go leor).

Chruthú mé mo tionscadal folamh chur ceithre comhad nua (replacing the words "Original" and "New" mar is cuí):

Original.xslt
New.xslt
Params.xml Bunaidh
Params.xml Nua

I mo chás, tá sé cosúil leis an:

Modify the web part and copy the params and XSL to the "Original" leagan i Stiúideo Amharc.

Is é an cuspóir anseo a chur faoi deara an XSL a athrú ar na torthaí a fhaigheann muid ar ais ó na cheist DVWP i HTML go Rindreáil mar ghraf.

Chun na críche sin, it helps to first consider what the HTML should look like before we get confused by the insanity that is known as "XSL". (Chun a bheith soiléir, Is é an méid seo a leanas ach sampla; 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 comhfhreagrach:

<html>
<comhlacht>
<lár>
<leithead tábla = 80%>
<tr><td><lár>Graf Bar Cothrománach</td></tr>
<tr>
<td align="center">
<table border="1" width = 80%>
<tr>
<td width = 10%>Oscail</td>
<td><tábla cellpadding ="0" cellspacing ="0" teorann = 0 leithead = 50%><tr bgcolor = dearg><td> </td></tr></tábla></td>
</tr>
<tr>
<td width = 10%>Dúnta</td>
<td><tábla cellpadding ="0" cellspacing ="0" teorann = 0 leithead = 25%><tr bgcolor = dearg><td> </td></tr></tábla></td>
</tr>
<tr>
<td width = 10%>Stop tagtha</td>
<td><tábla cellpadding ="0" cellspacing ="0" teorann = 0 leithead = 25%><tr bgcolor = dearg><td> </td></tr></tábla></td>
</tr>
</tábla>
</td>
</tr>
</tábla>
</comhlacht>
</html>

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

An glan-amach anseo seo: Sa deireadh, gach táimid ag déanamh go bhfuil a chruthú HTML le sraitheanna agus colúin.

Teimpléad 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:

Thosaigh mé leis an mainneachtain XSL gur thug SharePoint Dearthóir dom nuair a chruthaigh mé ar dtús leis an DVWP.
Bhí mé in ann a ghearradh síos seo ón SPD ar 657 línte a 166 lines.
Ní raibh mé praiseach ar fud leis an gcomhad XML paraiméadair (atá ar leith ó na XSL agus beidh a fhios agat cad is ciall agam nuair a théann tú a mhodhnú ar an DVWP féin; tá dhá comhad féidir leat a mhodhnú). Mar sin féin, d'fhonn a shimpliú é, 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. Ansin,, remove my calls and insert your own calls to "ShowBar".
An druil Oibríonn síos ag a chruthú <a href> mar seo: http://server/List?FilterField1=fieldname&FilterValue1=actualFilterValue. This technique may be of value in other contexts. Ar dtús, Shíl mé go mbeadh de dhíth orm chun cloí le formáid níos casta: 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.

Anseo tá sé:

<XSL:Stílbhileog leagan="1.0" eisiamh-thoradh-réimíreanna="rs z o s ddwrt 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:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" 
 xmlns:o="urn:schemas-microsoft-com:oifig" 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:frontpage:inmheánacha">
  <XSL:aschur modh="html" fleasc="aon" />
  <XSL:deachúil-format NaN="" />
  <XSL:stop a chur ainm="ListUrlDir"></XSL:stop a chur> <!-- Gá dom seo chun tacú le druil síos-.  -->

  <XSL:teimpléad mheaitseáil="/" xmlns:SharePoint="Microsoft.SharePoint.WebControls" 
 xmlns:__designer=http://schemas.microsoft.com/WebParts/v2/DataView/designer xmlns:asp="http://schemas.microsoft.com/ASPNET/20">
    <XSL:athróg ainm="dvt_StyleName">Tábla</XSL:athróg>
    <XSL:athróg ainm="Rónna" roghnú="/dsQueryResponse / Rónna / Rae" />
    <XSL:athróg ainm="dvt_RowCount" roghnú="comhaireamh($Rónna)" />
    <XSL:athróg ainm="IsEmpty" roghnú="$dvt_RowCount = 0" />
    <XSL:athróg ainm="dvt_IsEmpty" roghnú="$dvt_RowCount = 0" />

    <XSL:roghnú>
      <XSL:nuair a tástáil="$dvt_IsEmpty">
        Níl aon sonraí ar ghraf!<br/>
      </XSL:nuair a>
      <XSL:ar shlí eile>

        <!--
          Tosaíonn an stuif suimiúil anseo.

          Ní mór dúinn a shainiú le péire de na hathróga maidir le gach as a chéile sa ghraf: líon iomlán
          .
        -->
        <XSL:athróg ainm="totalProposed" roghnú="comhaireamh(/dsQueryResponse / Rónna / Rae[normalú-spás(@ Stádas) = 'Na'])" />
        <XSL:athróg ainm="percentProposed" roghnú="$totalProposed div $ dvt_RowCount" />

        <XSL:athróg ainm="totalInProcess" roghnú="comhaireamh(/dsQueryResponse / Rónna / Rae[normalú-spás(@ Stádas) = 'I Próiseas'])" />
        <XSL:athróg ainm="percentInProcess" roghnú="$totalInProcess div $ dvt_RowCount" />

        <XSL:athróg ainm="totalStalled" roghnú="comhaireamh(/dsQueryResponse / Rónna / Rae[normalú-spás(@ Stádas) = 'Ag fanacht'])" />
        <XSL:athróg ainm="percentStalled" roghnú="$div totalStalled $ dvt_RowCount" />

        <!--
          Táimid shainiú ár tábla HTML anseo.  Tá mé ar iasacht ó roinnt caighdeán
          .  Sílim go mbeidh sé onóir
          .
        -->
        <tábla leithead="100%" cellspacing="0" cellpadding="2"
stíl="teorann-dheis: 1 # soladach C0C0C0; teorann-bun: 1 # soladach C0C0C0; teorann-chlé-stíl: soladach; teorann-chlé-leithead: 1; teorann-top-stíl: soladach; teorann-top-leithead: 1;">

           <tr>
            <td ailíniú="lár">
              <tábla teorann="1" leithead="100%">

                <!--
                  I gcás gach stádas gur mhaith linn a graf, we call the "ShowBar" teimpléad.
                  Pas muid é:
                  1. A lipéad le haghaidh an tsraith nua.  Seo é a chlaochlú i hyperlink.
                  2. An gcéad (athraitheach ó thuas).
                  3. An t-ainm réimse iarbhír an cód as an liosta bunúsacha.  Seo
                     .
                  4. Luach réimse mheaitseáil le haghaidh #3.
                  5. Míreanna Iomlán an cód stádais (nach bhfuil an iomlán mhór de gach
                     ).

                  Astaíonn sé <tr></tr> agus an líne chothrománach graf barra.

                  Glaoch orainn an teimpléad le haghaidh gach cód stádais a ba mhaith linn a fheiceáil.
                -->
                <XSL:glao-teimpléad ainm="ShowBar">
                  <XSL:le-param ainm="BarDisplayLabel" roghnú="'Na'"/>
                  <XSL:le-param ainm="BarPercent" roghnú="$percentProposed"/>
                  <XSL:le-param ainm="QueryFilterFieldName" roghnú="'Stádas'"/>
                  <XSL:le-param ainm="QueryFilterFieldValue" roghnú="'Na'"/>
                  <XSL:le-param ainm="TotalItems" roghnú="$totalProposed"></XSL:le-param>
                </XSL:glao-teimpléad>

                <XSL:glao-teimpléad ainm="ShowBar">
                  <XSL:le-param ainm="BarDisplayLabel" roghnú="'Ag fanacht'"/>
                  <XSL:le-param ainm="BarPercent" roghnú="$percentStalled"/>
                  <XSL:le-param ainm="QueryFilterFieldName" roghnú="'Stádas'"/>
                  <XSL:le-param ainm="QueryFilterFieldValue" roghnú="'Ag fanacht'"/>
                  <XSL:le-param ainm="TotalItems" roghnú="$totalStalled"></XSL:le-param>
                </XSL:glao-teimpléad>

                <XSL:glao-teimpléad ainm="ShowBar">
                  <XSL:le-param ainm="BarDisplayLabel" roghnú="'I Próiseas'"/>
                  <XSL:le-param ainm="BarPercent" roghnú="$percentInProcess"/>
                  <XSL:le-param ainm="QueryFilterFieldName" roghnú="'Stádas'"/>
                  <XSL:le-param ainm="QueryFilterFieldValue" roghnú="'I Próiseas'"/>
                  <XSL:le-param ainm="TotalItems" roghnú="$totalInProcess"></XSL:le-param>
                </XSL:glao-teimpléad>

              </tábla>
            </td>
          </tr>
        </tábla>
      </XSL:ar shlí eile>
    </XSL:roghnú>
  </XSL:teimpléad>

  <!--
    Dhéanann an teimpléad seo ar obair na línte aonair sa ghraf barra a thaispeánann.

    Feicfidh tú a dhéanamh is dócha an chuid is mó de do tweaking anseo.
  -->
  <XSL:teimpléad ainm="ShowBar">
    <XSL:stop a chur ainm="BarDisplayLabel" /> <!-- lipéad a thaispeáint -->
    <XSL:stop a chur ainm="BarPercent"/> <!-- Céatadán den iomlán. -->
    <XSL:stop a chur ainm="QueryFilterFieldName"/> <!-- A úsáidtear chun léim chuig an cheist & scagaire -->
    <XSL:stop a chur ainm="QueryFilterFieldValue"/> <!-- A úsáidtear chun léim chuig an cheist & scagaire -->
    <XSL:stop a chur ainm="TotalItems" /> <!-- líon iomlán an barlabel -->

    <tr>

      <!-- An barra lipéad féin. -->
      <td ranga="ms-formbody" leithead="30%">

        <!--
          Ceadaíonn an chéad sraith eile de ráitis go gcuireann an teaghrán cheist
          .
          Déanaimid úsáid a bhaint as cúpla rudaí anseo:
          1. Is féidir linn a pas a fháil FilterField1 agus FilterValue1 a scagadh ar colún le liosta.
          2. Is SharePoint paraiméadar eochair ag dul a chur chugainn, ListUrlDir that points to
             the underlying list against which this DVWP is "running".

          Ní XSL spraoi?
        -->
        <XSL:téacs dhíchumasú-aschur-éalú="yes">
        <![CDATA[<a href ="]]></XSL:téacs>
        <XSL:luach-ar roghnú="$ListUrlDir"/>
        <XSL:téacs dhíchumasú-aschur-éalú="yes"><![CDATA[?FilterField1 =]]></XSL:téacs>
        <XSL:luach-ar roghnú="$QueryFilterFieldName"/>
        <XSL:téacs dhíchumasú-aschur-éalú="yes"><![CDATA[&FilterValue1 =]]></XSL:téacs>
        <XSL:luach-ar roghnú="$QueryFilterFieldValue"/>
        <XSL:téacs dhíchumasú-aschur-éalú="yes"><![CDATA[">]]></XSL:téacs>
        <XSL:luach-ar roghnú="$BarDisplayLabel"/>
        <XSL:téacs dhíchumasú-aschur-éalú="yes"><![CDATA[</a>]]></XSL:téacs>

        <!-- Léiríonn an beagán eile roinnt uimhreacha san fhormáid: "(iomlán / % den iomlán)" -->
        (<XSL:luach-ar roghnú="$TotalItems"/> /

        <!-- Cruthaíonn sé seo lipéad faoin gcéad deas dúinn.  Go raibh maith agat, Microsoft! -->
        <XSL:glao-teimpléad ainm="percentformat">
          <XSL:le-param ainm="faoin gcéad" roghnú="$BarPercent"/>
        </XSL:glao-teimpléad>)

      </td>

      <!-- Mar fhocal scoir, scaoileann <td> tag do na barra féin.-->
      <td>
        <tábla cellpadding="0" cellspacing="0" teorann="0"
leithead="{bhabhta($BarPercent * 100)+1}%">
          <tr bgcolor="dearg">
            <XSL:téacs dhíchumasú-aschur-éalú="yes"><![CDATA[&nbsp;]]></XSL:téacs>
          </tr>
        </tábla>
      </td>
    </tr>

  </XSL:teimpléad>

  <!-- Tá sé seo thógtar iad go díreach ó roinnt XSL a bhí ann i teimpléad MS. -->
  <XSL:teimpléad ainm="percentformat">
    <XSL:stop a chur ainm="faoin gcéad"/>
    <XSL:roghnú>
      <XSL:nuair a tástáil="bhformáid-uimhir($faoin gcéad, '#, # # 0%;-#,##0%')= 'NaN'">0%</XSL:nuair a>
      <XSL:ar shlí eile>
        <XSL:luach-ar roghnú="bhformáid-uimhir($faoin gcéad, '#, # # 0%;-#,##0%')" />
      </XSL:ar shlí eile>
    </XSL:roghnú>
  </XSL:teimpléad>

</XSL:Stílbhileog>

Na Torthaí:

An XSL ó thuas Gineann an graf seo:

Druileáil síos go dtí na sonraí bunúsacha trí chliceáil ar an cód stádais:

Smaointe Clabhsúr:

Is féidir é seo a bheith ginearálta?

Is breá liom an coincheap 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, le do thoil déan nóta sa tuairimí nó ríomhphost chugam.

Graif Ingearach:

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, cuir in iúl dom agus beidh mé gladly nasc chuig do bhlag 🙂

Sílim go bhfuil dúshlán le graf ingearach go bhfuil na lipéid don ghraf níos deacra a bhainistiú, ach is cinnte nach bhfuil sé dodhéanta.

Réimse Ainm Gotcha ar:

Tá ar a laghad dhá rud chun breathnú amach le do ainmneacha réimse.

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

        <XSL:athróg ainm="totalProposed" 
 roghnú="comhaireamh(/dsQueryResponse / Rónna / Rae[normalú-spás(@ Stádas) = 'Na'])" />

If your "Status" column is actually named "Status Code" then you need to reference it as "Status_x0020_Code":
   <XSL:athróg ainm="totalProposed" 
 roghnú="comhaireamh(/dsQueryResponse / Rónna / Rae[normalú-spás(@ Status_x0020_Code) = 'Na'])" />
Dara, agus mé fuzzy beag ar an, but you also need to be on the alert for field name changes. If you name your field "Status Code" agus ansin ina dhiaidh sin ar, 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" Is féidir naisc seo cabhrú dhiagnóiseadh agus a cheartú chineál seo fhadhb.

Faoi sin Dath:

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. Mar shampla, if the percentage of "stalled" AFE é > 10% ansin a thaispeáint sé dearg, otherwise show it in black. Úsáid <XSL:roghnú> chun accomplish seo.

Acmhainní Eile:

Socraigh an t-ainm inmheánach (agus info maith eile) do na sonraí i liosta: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!134.entry
Taispeáin na sonraí go léir ar fáil ag SharePoint (an XML amh): http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!190.entry
Faigh an abairt XPath de colún ar leith: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!155.entry
Cur chuige eile ag baint úsáide as OWA(?). I have not dug into it, ach tá gealladh, go háirithe le haghaidh píchairteacha: http://www.waka.dk/Blog/PermaLink,guid,e2532e71-d774-4ac9-8f25-883964b830f4.aspx

Shona athrú!

Liostáil le mo bhlag!

Clibeanna Technorati: SharePoint, DVWP, Sonraí View Web Cuid, XSL, XSLT, SSU, CAONAIGH

SharePoint Spás Paul Galvin ar

Cartlanna míosúla: Nollaig 2007

Cruthaigh Graif Bharra i SharePoint