დეკემბერი | 2007 | Paul Galvin ის SharePoint ფართი

მიმოხილვა:

(განახლების 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, რომელიც აჩვენებს, როგორც გრაფაში.

ბიზნეს სცენარი / Setup:

მე შევქმენი საბაჟო სიაში სტანდარტული სათაური სვეტი და ერთი დამატებითი სვეტი, "Status". This models (ძალიან simplistically) an "Authorization For Expense" სცენარი, სადაც ტიტული წარმოადგენს პროექტს და სტატუსი ღირებულება სიიდან:

ინიციატივით გამოდის
მიმდინარეობს
შეფერხდა

მიზანია აწარმოოს ინტერაქტიული ჰორიზონტალური ბარი გრაფაში, რომელიც აჩვენებს ამ სტატუსის კოდები.

მე დასახლებული სიაში და იგი ასე გამოიყურება:

მონაცემთა ანკეტის ვებ ნაწილი:

შექმნა DVWP დამატებით საბაჟო სიაში გვერდი (საიტი გვერდზე ჩემს შემთხვევაში) და მითითებებს აქ (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
ორიგინალური Params.xml
ახალი Params.xml

ჩემს შემთხვევაში, როგორც ჩანს, ამ:

Modify the web part and copy the params and XSL to the "Original" მობილური ვიზუალური სტუდია.

ობიექტური აქ გამოიწვიოს 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>
<სხეულის>
<ცენტრი>
<მაგიდა ტელეკომპანია 80%>
<tr><td><ცენტრი>ჰორიზონტალური ბარი დიაგრამა</td></tr>
<tr>
<td align="center">
<table border="1" ტელეკომპანია 80%>
<tr>
<td width = 10%>გახსნა</td>
<td><მაგიდა cellpadding ="0" cellspacing ="0" border = 0 width = 50%><tr bgcolor = red><td> </td></tr></მაგიდა></td>
</tr>
<tr>
<td width = 10%>დახურვის</td>
<td><მაგიდა cellpadding ="0" cellspacing ="0" border = 0 width = 25%><tr bgcolor = red><td> </td></tr></მაგიდა></td>
</tr>
<tr>
<td width = 10%>შეფერხდა</td>
<td><მაგიდა cellpadding ="0" cellspacing ="0" border = 0 width = 25%><tr bgcolor = red><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".

მიიღოს-მოშორებით აქ არის ეს: და ბოლოს, ყველა ვაკეთებთ ქმნის 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:

I დაიწყო სტანდარტულ XSL, რომ SharePoint დიზაინერი მომცა, როდესაც მე პირველად შეიქმნა DVWP.
მე შეძლო დაჭრა ეს ქვემოთ SPD-ს 657 ხაზები 166 lines.
მე არ არეულობას გარშემო პარამეტრების ფაილში (რაც ცალკე 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".
საბურღი ქვემოთ მუშაობს შექმნით <კონფერენცია> მსგავსი: 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:სტილების მობილური="1.0" გამორიცხავს-შედეგზე ინდექსები="რს ჩ o s ddwrt dt msxsl" 
 xmlns:msxsl="urn:სქემები-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:o="urn:სქემები-microsoft-com:ოფისში" xmlns:s="uuid:BDC6E3F0-6DA3-11d1-A2A3-00AA00C14882" 
 xmlns:dt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882" xmlns:რს="urn:სქემები-microsoft-com:rowset" xmlns:ჩ="#RowsetSchema" 
 xmlns:ddwrt2="urn:ფორუმი:შიდა">
  <XSL:გამომავალი მეთოდი="html" აბზაცის="წლის" />
  <XSL:ათობითი ფორმატის NaN="" />
  <XSL:შეჩერება სახელი="ListUrlDir"></XSL:შეჩერება> <!-- მე უნდა ამ მხარდასაჭერად საბურღი-down.  -->

  <XSL:template ემთხვევა="/" 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 / რიგები / სკანდალი[ნორმალიზება სივრცე(@ სტატუსი) = 'ინიციატივით გამოდის "])" />
        <XSL:ცვლადი სახელი="percentProposed" შერჩევა="$totalProposed div $ dvt_RowCount" />

        <XSL:ცვლადი სახელი="totalInProcess" შერჩევა="ითვლიან(/dsQueryResponse / რიგები / სკანდალი[ნორმალიზება სივრცე(@ სტატუსი) = 'მიმდინარეობს "])" />
        <XSL:ცვლადი სახელი="percentInProcess" შერჩევა="$totalInProcess div $ dvt_RowCount" />

        <XSL:ცვლადი სახელი="totalStalled" შერჩევა="ითვლიან(/dsQueryResponse / რიგები / სკანდალი[ნორმალიზება სივრცე(@ სტატუსი) = 'ჩიხშია "])" />
        <XSL:ცვლადი სახელი="percentStalled" შერჩევა="$totalStalled div $ dvt_RowCount" />

        <!--
          ჩვენ დავაფიქსირეთ ჩვენი HTML მაგიდა აქ.  მე სესხების ზოგიერთი სტანდარტული
          .  მე ვფიქრობ, რომ პატივს მიაგებს
          .
        -->
        <მაგიდა სიგანე="100%" cellspacing="0" cellpadding="2"
სტილი="სასაზღვრო უფლება: 1 მყარი # C0C0C0; სასაზღვრო ბოლოში: 1 მყარი # C0C0C0; სასაზღვრო მარცხენა სტილი: მყარი; სასაზღვრო მარცხენა სიგანე: 1; სასაზღვრო ყველაზე სტილი: მყარი; სასაზღვრო ყველაზე სიგანე: 1;">

           <tr>
            <td უერთდებიან="ცენტრი">
              <მაგიდა სასაზღვრო="1" სიგანე="100%">

                <!--
                  ყოველი მდგომარეობა, რომ ჩვენ გვინდა გრაფაში, we call the "ShowBar" template.
                  ჩვენ გაიაროს ეს:
                  1. Label for ზედიზედ.  ეს გადაკეთდა ჰიპერბმულის.
                  2. პროცენტი (ცვლადი ზემოდან).
                  3. ფაქტობრივი სფეროში სახელით კოდი ძირითადი სია.  ეს
                     .
                  4. საველე ღირებულება შეესაბამება არცერთი for #3.
                  5. სულ ნივთები ამ სტატუსის კოდი (არ გრანდიოზული საერთო ყველა
                     ).

                  ეს emits <tr></tr> და ჰორიზონტალური ბარი გრაფაში ხაზი.

                  ჩვენ მოვუწოდებთ ამ template თითოეული სტატუსი კოდი გვინდა, ნახატის.
                -->
                <XSL:ზარის template სახელი="ShowBar">
                  <XSL:with-param სახელი="BarDisplayLabel" შერჩევა=""შემოთავაზებული""/>
                  <XSL:with-param სახელი="BarPercent" შერჩევა="$percentProposed"/>
                  <XSL:with-param სახელი="QueryFilterFieldName" შერჩევა=""სტატუსი""/>
                  <XSL:with-param სახელი="QueryFilterFieldValue" შერჩევა=""შემოთავაზებული""/>
                  <XSL:with-param სახელი="TotalItems" შერჩევა="$totalProposed"></XSL:with-param>
                </XSL:ზარის template>

                <XSL:ზარის template სახელი="ShowBar">
                  <XSL:with-param სახელი="BarDisplayLabel" შერჩევა=""შეჩერებულია""/>
                  <XSL:with-param სახელი="BarPercent" შერჩევა="$percentStalled"/>
                  <XSL:with-param სახელი="QueryFilterFieldName" შერჩევა=""სტატუსი""/>
                  <XSL:with-param სახელი="QueryFilterFieldValue" შერჩევა=""შეჩერებულია""/>
                  <XSL:with-param სახელი="TotalItems" შერჩევა="$totalStalled"></XSL:with-param>
                </XSL:ზარის template>

                <XSL:ზარის template სახელი="ShowBar">
                  <XSL:with-param სახელი="BarDisplayLabel" შერჩევა=""მიმდინარეობს '"/>
                  <XSL:with-param სახელი="BarPercent" შერჩევა="$percentInProcess"/>
                  <XSL:with-param სახელი="QueryFilterFieldName" შერჩევა=""სტატუსი""/>
                  <XSL:with-param სახელი="QueryFilterFieldValue" შერჩევა=""მიმდინარეობს '"/>
                  <XSL:with-param სახელი="TotalItems" შერჩევა="$totalInProcess"></XSL:with-param>
                </XSL:ზარის template>

              </მაგიდა>
            </td>
          </tr>
        </მაგიდა>
      </XSL:წინააღმდეგ შემთხვევაში>
    </XSL:აირჩიოს>
  </XSL:template>

  <!--
    ეს თარგი აკეთებს მუშაობის ჩვენებისას ინდივიდუალური ხაზები ბარი გრაფაში.

    თქვენ ალბათ ყველაზე თქვენი tweaking აქ.
  -->
  <XSL:template სახელი="ShowBar">
    <XSL:შეჩერება სახელი="BarDisplayLabel" /> <!-- ეტიკეტების რათა ნახოთ -->
    <XSL:შეჩერება სახელი="BarPercent"/> <!-- პროცენტი. -->
    <XSL:შეჩერება სახელი="QueryFilterFieldName"/> <!-- გამოიყენება გადასვლა შეკითხვის & გავფილტროთ -->
    <XSL:შეჩერება სახელი="QueryFilterFieldValue"/> <!-- გამოიყენება გადასვლა შეკითხვის & გავფილტროთ -->
    <XSL:შეჩერება სახელი="TotalItems" /> <!-- საერთო რაოდენობა ამ barlabel -->

    <tr>

      <!-- ბარი ეტიკეტების თავად. -->
      <td კლასი="ms-formbody" სიგანე="30%">

        <!--
          ეს მომდევნო კომპლექტი განცხადებები აშენებს მოთხოვნის სტრიქონი, რომელიც საშუალებას აძლევს
          .
          ჩვენ გამოიყენოს რამდენიმე რამ აქ:
          1. ჩვენ შეგვიძლია გაივლის FilterField1 და FilterValue1 to სია, რათა გავფილტროთ წლის სვეტი.
          2. SharePoint გადის გასაღები პარამეტრების ჩვენთვის, ListUrlDir that points to
             the underlying list against which this DVWP is "running".

          არ არის XSL fun?
        -->
        <XSL:ტექსტი გაუქმდება და გამოშვების-აფარებს="დიახ">
        <![CDATA[<ტექნიკური კონფერენცია"]]></XSL:ტექსტი>
        <XSL:ღირებულების შესახებ შერჩევა="$ListUrlDir"/>
        <XSL:ტექსტი გაუქმდება და გამოშვების-აფარებს="დიახ"><![CDATA[?FilterField1 =]]></XSL:ტექსტი>
        <XSL:ღირებულების შესახებ შერჩევა="$QueryFilterFieldName"/>
        <XSL:ტექსტი გაუქმდება და გამოშვების-აფარებს="დიახ"><![CDATA[&FilterValue1 =]]></XSL:ტექსტი>
        <XSL:ღირებულების შესახებ შერჩევა="$QueryFilterFieldValue"/>
        <XSL:ტექსტი გაუქმდება და გამოშვების-აფარებს="დიახ"><![CDATA[">]]></XSL:ტექსტი>
        <XSL:ღირებულების შესახებ შერჩევა="$BarDisplayLabel"/>
        <XSL:ტექსტი გაუქმდება და გამოშვების-აფარებს="დიახ"><![CDATA[</a>]]></XSL:ტექსტი>

        <!-- მომდევნო ცოტა ერთგვარი ნომრები ფორმატში: "(სულ / % მთლიანი)" -->
        (<XSL:ღირებულების შესახებ შერჩევა="$TotalItems"/> /

        <!-- ეს ქმნის ლამაზი პროცენტის წარწერა ჩვენთვის.  მადლობა, Microsoft! -->
        <XSL:ზარის template სახელი="percentformat">
          <XSL:with-param სახელი="პროცენტი" შერჩევა="$BarPercent"/>
        </XSL:ზარის template>)

      </td>

      <!-- და ბოლოს, გადასცემს <td> tag for ბარი თავად.-->
      <td>
        <მაგიდა cellpadding="0" cellspacing="0" სასაზღვრო="0"
სიგანე="{გარშემო($BarPercent * 100)+1}%">
          <tr bgcolor="წითელი">
            <XSL:ტექსტი გაუქმდება და გამოშვების-აფარებს="დიახ"><![CDATA[&nbsp;]]></XSL:ტექსტი>
          </tr>
        </მაგიდა>
      </td>
    </tr>

  </XSL:template>

  <!-- ეს არის აღებული უშუალოდ ზოგიერთი XSL I ნაპოვნი MS template. -->
  <XSL:template სახელი="percentformat">
    <XSL:შეჩერება სახელი="პროცენტი"/>
    <XSL:აირჩიოს>
      <XSL:როდესაც ტესტი="ფორმატი ნომერი($პროცენტი, "# # # 0%;-#,##0%')= 'NaN "">0%</XSL:როდესაც>
      <XSL:წინააღმდეგ შემთხვევაში>
        <XSL:ღირებულების შესახებ შერჩევა="ფორმატი ნომერი($პროცენტი, "# # # 0%;-#,##0%')" />
      </XSL:წინააღმდეგ შემთხვევაში>
    </XSL:აირჩიოს>
  </XSL:template>

</XSL:სტილების>

შედეგები:

XSL ზემოდან წარმოშობს ამ გრაფაში:

საბურღი ქვემოთ ძირითადი მონაცემები დაჭერით სტატუსი კოდი:

დასკვნითი ფიქრები:

შეიძლება თუ არა ეს იყოს გენერალიზებული?

მე მიყვარს ეს 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 🙂

მე ვფიქრობ, რომ პრობლემას ვერტიკალური გრაფაში არის, რომ ეტიკეტები გრაფაში უფრო ძნელი მართვა, მაგრამ რა თქმა უნდა არა შეუძლებელი.

საველე სახელი GOTCHA ნახვა:

არსებობს მინიმუმ ორი რამ მოსაძებნად გარეთ თქვენი საველე სახელები.

პირველი, a field name with a space has to be escaped in the XSL. This will probably be an issue here:

        <XSL:ცვლადი სახელი="totalProposed" 
 შერჩევა="ითვლიან(/dsQueryResponse / რიგები / სკანდალი[ნორმალიზება სივრცე(@ სტატუსი) = 'ინიციატივით გამოდის "])" />

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

ბედნიერი ტრანსფორმირების!

<ბოლოს />

გამოწერა ჩემი დღიური!

პროგრამები Tags: SharePoint, DVWP, მონაცემთა ანკეტის ვებ ნაწილი, XSL, XSLT, WSS, Moss

Paul Galvin ის SharePoint ფართი

ყოველთვიური არქივი: დეკემბერი 2007

შექმნა ბარი გრაფიკის SharePoint