Դեկտեմբեր | 2007 | Paul Galvin's SharePoint Space

Overview:

(ԹԱՐՄԱՑՆԵԼ 12/04/07: Ավելացված է եւս մեկ հետաքրքիր ռեսուրս վերջում կապող այլ բլոգը, որը հասցեագրում այս միջոցով շատ հետաքրքիր վեբ մասի)

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.

Ընդհանուր մոտեցումը հետեւյալն է,:

Ստեղծել ցանկը կամ փաստաթղթի գրադարան, որը պարունակում է տվյալներ, որոնք ցանկանում եք գրաֆիկի.
Տեղադրել ուղեկից փաստաթուղթը գրադարանը / մաքսային ցանկը վրա էջի եւ վերափոխելու այն տվյալների դիտիր վեբ մասի (DVWP).
Փոփոխությունները DVWP ծանոթյություններ XSL առաջացնում HTML որը ցույց է տալիս, որպես գրաֆիկի.

Բիզնես Սցենար / Մատչ:

Ես ստեղծել գործարկողի ցուցակը ստանդարտ Վերնագիր սյունակում եւ մեկ լրացուցիչ սյունակի, "Status". This models (Շատ simplistically) an "Authorization For Expense" սցենարը, որտեղ վերնագիրը ներկայացնում նախագիծը եւ կարգավիճակի մի արժեք ցանկից:

Առաջարկվող
Ընթացքի մեջ է
Կողմ

Նպատակն է արտադրել ինտերակտիվ հորիզոնական բար գրաֆիկը, որը ցույց է տալիս, որ այդ կարգավիճակը ծածկագիրը.

Ես բնակեցված ցուցակը, եւ կարծես սա:

Ստեղծել Data Դիտել Web Part:

Ստեղծել DVWP ավելացնելով, որ մաքսային ցուցակը էջը (site էջը իմ դեպքում) եւ հետեւեք ցուցումներին: այստեղ (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).

Բացի պարզապես ստեղծում է DVWP, we also need to set the paging property to show all available rows. Ինձ համար, Սա նայում, նման բան է սա:

Այս պահին, 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.

Փոփոխությունները XSLT:

Այժմ ժամանակն է փոխել XSLT.

I always use visual studio for this. (Տեսնել այստեղ համար կարեւոր նշում մասին intellisense, որը կօգնի Ձեզ ավելի շատ).

Ես ստեղծել դատարկ նախագիծ ավելացնել չորս նոր ֆայլեր (replacing the words "Original" and "New" համապատասխան):

Original.xslt
New.xslt
Original Params.xml
Նոր Params.xml

Իմ դեպքում,, կարծես, այս:

Modify the web part and copy the params and XSL to the "Original" տարբերակ Visual Studio.

Նպատակն այստեղ է, ինչի հետեւանքով XSL վերափոխել արդյունքները ենք ետ DVWP հարցման մեջ HTML այն մատուցում է որպես գրաֆիկի.

Այս նպատակով, it helps to first consider what the HTML should look like before we get confused by the insanity that is known as "XSL". (Լինել պարզ, Հետեւյալ պարզապես օրինակ; 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:

<html>
<մարմին>
<կենտրոն>
<Աղյուսակ width = 80%>
<TR><TD><կենտրոն>Հորիզոնական Բար Գրաֆիկի</TD></TR>
<TR>
<td align="center">
<table border="1" width = 80%>
<TR>
<TD width = 10%>Բաց</TD>
<TD><սեղան cellpadding ="0" cellspacing ="0" սահմանի = 0 width = 50%><TR bgcolor = կարմիր><TD> </TD></TR></սեղան></TD>
</TR>
<TR>
<TD width = 10%>Փակ</TD>
<TD><սեղան cellpadding ="0" cellspacing ="0" սահմանի = 0 width = 25%><TR bgcolor = կարմիր><TD> </TD></TR></սեղան></TD>
</TR>
<TR>
<TD width = 10%>Կողմ</TD>
<TD><սեղան cellpadding ="0" cellspacing ="0" սահմանի = 0 width = 25%><TR bgcolor = կարմիր><TD> </TD></TR></սեղան></TD>
</TR>
</սեղան>
</TD>
</TR>
</սեղան>
</մարմին>
</html>

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

The Take-հեռու այստեղ սա: Վերջում, մենք դա անում է ստեղծում HTML է շարքերում ու սյուները.

Կաղապար 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:

Ես սկսեցի հետ լռելյայն XSL, որ SharePoint Designer տվեց ինձ, երբ ես առաջին անգամ ստեղծվել է DVWP.
Ես կարողացել եմ կտրել, այս իջնում SPD է 657 գծերի 166 lines.
Ես չեմ խառնաշփոթ շուրջ պարամետրերի XML ֆայլը (որը առանձին է XSL եւ դուք գիտեք, թե ինչ նկատի ունեմ, երբ դուք գնում է փոփոխել DVWP իրեն; կա երկու ֆայլեր կարող եք փոփոխությունները). Սակայն, որպեսզի պարզեցնել այն, 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. Ապա, remove my calls and insert your own calls to "ShowBar".
The փորված են աշխատում `ստեղծելով մի <ա Ռաֆֆի Չ.> այսպես: http://server/List?FilterField1=fieldname&FilterValue1=actualFilterValue. This technique may be of value in other contexts. Սկզբում, Ես կարծում եմ, որ պետք է համապատասխանեն ավելի բարդ ձեւաչափ: 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.

Այստեղ է, որ:

<xsl:stylesheet տարբերակ="1.0" բացառում, արդյունքում, prefixes="RS Z O Կարդալ ddwrt dt msxsl" 
 xmlns:msxsl="սափոր: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:իժ="http :/://schemas.microsoft.com/ASPNET/20" xmlns:ddwrt="http :/://schemas.microsoft.com/WebParts/v2/DataView/runtime" 
 xmlns:որ="սափոր:schemas - Microsoft-com:գրասենյակ" xmlns:s="uuid:BDC6E3F0-6DA3-11d1-A2A3-00AA00C14882" 
 xmlns:dt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882" xmlns:RS="սափոր:schemas - Microsoft-com:rowset" xmlns:z="#RowsetSchema" 
 xmlns:ddwrt2="սափոր:լրագրային:ներքին">
  <xsl:արտադրանք մեթոդ="html" պահանջագիր="ոչ" />
  <xsl:Decimal-format NaN="" />
  <xsl:Param անուն="ListUrlDir"></xsl:Param> <!-- Ես ուզում եմ սա աջակցել փորված-down.  -->

  <xsl:Կաղապար համընկնում="/" xmlns:Sharepoint="Microsoft.SharePoint.WebControls" 
 xmlns:__designer=http://schemas.microsoft.com/WebParts/v2/DataView/designer xmlns:իժ="http :/://schemas.microsoft.com/ASPNET/20">
    <xsl:փոփոխական մեծություն անուն="dvt_StyleName">Սեղան</xsl:փոփոխական մեծություն>
    <xsl:փոփոխական մեծություն անուն="Ստանալու" ընտրել="/dsQueryResponse / Ստանալու / անընդմեջ" />
    <xsl:փոփոխական մեծություն անուն="dvt_RowCount" ընտրել="հաշվել($Ստանալու)" />
    <xsl:փոփոխական մեծություն անուն="IsEmpty" ընտրել="$dvt_RowCount = 0" />
    <xsl:փոփոխական մեծություն անուն="dvt_IsEmpty" ընտրել="$dvt_RowCount = 0" />

    <xsl:ընտրել>
      <xsl:երբ փորձարկում="$dvt_IsEmpty">
        Կա որեւէ տվյալների գրաֆիկը!<BR/>
      </xsl:երբ>
      <xsl:այլապես>

        <!--
          Հետաքրքիրն իրեր սկսվում այստեղ.

          Մենք պետք է սահմանել մի զույգ փոփոխականների համար յուրաքանչյուր տողում եւ գրաֆիկի: ընդհանուր
          .
        -->
        <xsl:փոփոխական մեծություն անուն="totalProposed" ընտրել="հաշվել(/dsQueryResponse / Ստանալու / անընդմեջ[նորմալացնել, տարածք(@ Status) = 'Առաջարկվող.])" />
        <xsl:փոփոխական մեծություն անուն="percentProposed" ընտրել="$totalProposed div $ dvt_RowCount" />

        <xsl:փոփոխական մեծություն անուն="totalInProcess" ընտրել="հաշվել(/dsQueryResponse / Ստանալու / անընդմեջ[նորմալացնել, տարածք(@ Status) = 'Ընթացքի մեջ է.])" />
        <xsl:փոփոխական մեծություն անուն="percentInProcess" ընտրել="$totalInProcess div $ dvt_RowCount" />

        <xsl:փոփոխական մեծություն անուն="totalStalled" ընտրել="հաշվել(/dsQueryResponse / Ստանալու / անընդմեջ[նորմալացնել, տարածք(@ Status) = 'Կողմ'])" />
        <xsl:փոփոխական մեծություն անուն="percentStalled" ընտրել="$totalStalled div $ dvt_RowCount" />

        <!--
          Մենք սահմանել ենք մեր օրերի սեղան այստեղ.  Ես վերցնում որոշ ստանդարտ
          .  Ես կարծում եմ, որ դա պատվի
          .
        -->
        <սեղան լայնություն="100%" cellspacing="0" cellpadding="2"
ոճ="սահմանային իրավունք: 1 կուռ # C0C0C0; սահմանային ներքեւի: 1 կուռ # C0C0C0; սահմանային ձախ-style: պինդ; սահմանային ձախ լայնությունը: 1; սահմանային վերեւ-style: պինդ; սահմանային վերին լայնությունը: 1;">

           <TR>
            <TD շարել="կենտրոն">
              <սեղան սահման="1" լայնություն="100%">

                <!--
                  Յուրաքանչյուր կարգավիճակի է, որ մենք ցանկանում ենք գրաֆիկի, we call the "ShowBar" Կաղապար.
                  Մենք պետք է այն:
                  1. Պիտակի համար շարքով.  Սա այն վերափոխվում է հղում.
                  2. Տոկոսը (փոփոխական վերէն).
                  3. Փաստացի դաշտը անունը, վարքականոնի է հիմքում ընկած ցուցակից.  Այս
                     .
                  4. Field արժեք համապատասխանում է #3.
                  5. Ընդհանուր իրեր այս ԿԱՐԳԱՎԻՃԱԿ ԿՈԴԸ (ոչ մեծ ընդամենը բոլոր
                     ).

                  Այն emits է <TR></TR> եւ հորիզոնական բար գրաֆիկի գիծ.

                  Մենք կոչ ենք անում այս ձեւանմուշ համար յուրաքանչյուր ԿԱՐԳԱՎԻՃԱԿ ԿՈԴԸ մենք ուզում ենք տեսնել.
                -->
                <xsl:Call-ձեւանմուշ անուն="ShowBar">
                  <xsl:հետ-Param անուն="BarDisplayLabel" ընտրել="«Առաջարկվող '"/>
                  <xsl:հետ-Param անուն="BarPercent" ընտրել="$percentProposed"/>
                  <xsl:հետ-Param անուն="QueryFilterFieldName" ընտրել="«Ստատուս -"/>
                  <xsl:հետ-Param անուն="QueryFilterFieldValue" ընտրել="«Առաջարկվող '"/>
                  <xsl:հետ-Param անուն="TotalItems" ընտրել="$totalProposed"></xsl:հետ-Param>
                </xsl:Call-ձեւանմուշ>

                <xsl:Call-ձեւանմուշ անուն="ShowBar">
                  <xsl:հետ-Param անուն="BarDisplayLabel" ընտրել="«Կողմ»,"/>
                  <xsl:հետ-Param անուն="BarPercent" ընտրել="$percentStalled"/>
                  <xsl:հետ-Param անուն="QueryFilterFieldName" ընտրել="«Ստատուս -"/>
                  <xsl:հետ-Param անուն="QueryFilterFieldValue" ընտրել="«Կողմ»,"/>
                  <xsl:հետ-Param անուն="TotalItems" ընտրել="$totalStalled"></xsl:հետ-Param>
                </xsl:Call-ձեւանմուշ>

                <xsl:Call-ձեւանմուշ անուն="ShowBar">
                  <xsl:հետ-Param անուն="BarDisplayLabel" ընտրել="«Ընթացքի մեջ է»"/>
                  <xsl:հետ-Param անուն="BarPercent" ընտրել="$percentInProcess"/>
                  <xsl:հետ-Param անուն="QueryFilterFieldName" ընտրել="«Ստատուս -"/>
                  <xsl:հետ-Param անուն="QueryFilterFieldValue" ընտրել="«Ընթացքի մեջ է»"/>
                  <xsl:հետ-Param անուն="TotalItems" ընտրել="$totalInProcess"></xsl:հետ-Param>
                </xsl:Call-ձեւանմուշ>

              </սեղան>
            </TD>
          </TR>
        </սեղան>
      </xsl:այլապես>
    </xsl:ընտրել>
  </xsl:Կաղապար>

  <!--
    Այս կաղապարը չի աշխատանքը ցուցաբերելով անհատական գծերի եւ բար գրաֆիկի.

    Դուք հավանաբար պետք է ձեր tweaking այստեղ.
  -->
  <xsl:Կաղապար անուն="ShowBar">
    <xsl:Param անուն="BarDisplayLabel" /> <!-- պիտակը ցույց -->
    <xsl:Param անուն="BarPercent"/> <!-- Տոկոսը ընդամենը. -->
    <xsl:Param անուն="QueryFilterFieldName"/> <!-- Օգտագործվում է անցնել, որ հարցմանը & զտել -->
    <xsl:Param անուն="QueryFilterFieldValue"/> <!-- Օգտագործվում է անցնել, որ հարցմանը & զտել -->
    <xsl:Param անուն="TotalItems" /> <!-- Ընդհանուր հաշվիչ այս barlabel -->

    <TR>

      <!-- Բար պիտակը ինքնին. -->
      <TD դաս="MS-formbody" լայնություն="30%">

        <!--
          Սա հերթական փաթեթը հաշվետվությունների կառուցում հարցման տողը, որը թույլ է տալիս
          .
          Մենք օգտվել մի քանի բաների այստեղ:
          1. Մենք կարող ենք անցնել FilterField1 եւ FilterValue1 մի ցուցակում ֆիլտրում է սյունակ.
          2. SharePoint անցնում առանցքային պարամետր մեզ, ListUrlDir that points to
             the underlying list against which this DVWP is "running".

          Չէ XSL զվարճալի?
        -->
        <xsl:տեքստ անջատել, արտադրանքի, փախչող="այո">
        <![CDATA[<ա href ="]]></xsl:տեքստ>
        <xsl:արժեք է ընտրել="$ListUrlDir"/>
        <xsl:տեքստ անջատել, արտադրանքի, փախչող="այո"><![CDATA[?FilterField1 =]]></xsl:տեքստ>
        <xsl:արժեք է ընտրել="$QueryFilterFieldName"/>
        <xsl:տեքստ անջատել, արտադրանքի, փախչող="այո"><![CDATA[&FilterValue1 =]]></xsl:տեքստ>
        <xsl:արժեք է ընտրել="$QueryFilterFieldValue"/>
        <xsl:տեքստ անջատել, արտադրանքի, փախչող="այո"><![CDATA[">]]></xsl:տեքստ>
        <xsl:արժեք է ընտրել="$BarDisplayLabel"/>
        <xsl:տեքստ անջատել, արտադրանքի, փախչող="այո"><![CDATA[</ա>]]></xsl:տեքստ>

        <!-- Հաջորդ քիչ ցույց որոշ թվեր ձեւաչափով: "(Ընդհանուր / % ՀՀ ընդամենը)" -->
        (<xsl:արժեք է ընտրել="$TotalItems"/> /

        <!-- Սա ստեղծում է հաճելի տոկոս պատկերանիշը մեզ համար.  Շնորհակալություն, Microsoft! -->
        <xsl:Call-ձեւանմուշ անուն="percentformat">
          <xsl:հետ-Param անուն="տոկոս" ընտրել="$BarPercent"/>
        </xsl:Call-ձեւանմուշ>)

      </TD>

      <!-- Վերջապես, արտադրել է <TD> Պիտակ համար բար բուն.-->
      <TD>
        <սեղան cellpadding="0" cellspacing="0" սահման="0"
լայնություն="{շուրջը($BarPercent * 100)+1}%">
          <TR bgcolor="կարմիր">
            <xsl:տեքստ անջատել, արտադրանքի, փախչող="այո"><![CDATA[&nbsp;]]></xsl:տեքստ>
          </TR>
        </սեղան>
      </TD>
    </TR>

  </xsl:Կաղապար>

  <!-- Սա արվում է անմիջապես որեւէ XSL գտա է MS Կաղապար. -->
  <xsl:Կաղապար անուն="percentformat">
    <xsl:Param անուն="տոկոս"/>
    <xsl:ընտրել>
      <xsl:երբ փորձարկում="ֆորմատ, թիվ($տոկոս, "# # # 0%;-#,##0%')= 'NaN.">0%</xsl:երբ>
      <xsl:այլապես>
        <xsl:արժեք է ընտրել="ֆորմատ, թիվ($տոկոս, "# # # 0%;-#,##0%')" />
      </xsl:այլապես>
    </xsl:ընտրել>
  </xsl:Կաղապար>

</xsl:stylesheet>

Ի արդյունքները:

The XSL վերեւից Սկիզբ գրաֆիկը:

Փորված ներքեւ հիմքում ընկած տվյալների սեղմելով ԿԱՐԳԱՎԻՃԱԿ ԿՈԴԸ:

Եզրափակիչ Thoughts:

Կարելի է ընդհանրացված?

Ես սիրում եմ այս 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, խնդրում ենք նշում է մեկնաբանություններում կամ փոստին ինձ.

Ուղղահայաց գրաֆիկները:

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 🙂

Կարծում եմ, որ մարտահրավեր է ուղղահայաց գրաֆիկի այն է, որ labels համար գրաֆիկի ավելի դժվար է կառավարել, բայց, իհարկե, ոչ անհնար.

Field Անունը հեռախոսային խոսակցությունները ի:

Կան առնվազն երկու բան Նայիր համար ձեր դաշտային անուններ.

Առաջին, a field name with a space has to be escaped in the XSL. This will probably be an issue here:

        <xsl:փոփոխական մեծություն անուն="totalProposed" 
 ընտրել="հաշվել(/dsQueryResponse / Ստանալու / անընդմեջ[նորմալացնել, տարածք(@ Status) = 'Առաջարկվող.])" />

If your "Status" column is actually named "Status Code" then you need to reference it as "Status_x0020_Code":
   <xsl:փոփոխական մեծություն անուն="totalProposed" 
 ընտրել="հաշվել(/dsQueryResponse / Ստանալու / անընդմեջ[նորմալացնել, տարածք(@ Status_x0020_Code) = 'Առաջարկվող.])" />
Երկրորդ, եւ ես մի քիչ խուճուճ այս, but you also need to be on the alert for field name changes. If you name your field "Status Code" եւ ապա հետագայում, 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" Հղումները կարող է օգնել ախտորոշել եւ ճիշտ նման խնդրի.

Այդ Գույների:

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. Օրինակ,, if the percentage of "stalled" Afe ի ն > 10% ապա ցույց տալ այն կարմիր, otherwise show it in black. Օգտագործում <xsl:ընտրել> իրականացնել սույն.

Այլ Ռեսուրսներ:

Որոշել ներքին անունը (եւ այլ հարգելի Մանրամասն) համար տվյալների մի ցուցակում: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!134.entry
Ցույց տալ բոլոր տվյալները նախատեսված SharePoint (որ հում XML): http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!190.entry
Ստացեք XPATH արտահայտությունը կոնկրետ սյունակ: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!155.entry
Մեկ այլ մոտեցում է, օգտագործելով OWA(?). I have not dug into it, բայց նայում խոստումնալից, հատկապես կարկանդակ տրամագրերը: http://www.waka.dk/Blog/PermaLink,guid,e2532e71-d774-4ac9-8f25-883964b830f4.aspx

Happy փոխակերպման!

<Խաղի տեւողությունը րոպեներով />

Անդամագրվել իմ բլոգում!

Արորդիների Tags: Sharepoint, DVWP, Data Դիտել Web Part, XSL, XSLT, WSS, MOSS

Paul Galvin's SharePoint Space

Monthly Archives: Դեկտեմբեր 2007

Ստեղծել բար գրաֆիկներն է Sharepoint