دسامبر | 2007 | شیرپوینت فضای پاول گالوین در

بررسی اجمالی:

(تکمیلی 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).
اصلاح XSL DVWP را برای تولید HTML است که به عنوان یک گراف را نشان می دهد.

سناریوی کسب و کار / برپایی:

من ایجاد کرده است یک لیست سفارشی با ستون عنوان مقاله: استاندارد و یک ستون اضافی, "Status". This models (بسیار ساده انگارانه) 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 مسئول:

<اچ تی ام ال>
<بدن>
<مرکز>
<جدول عرض = 80٪>
<TR><فلش><مرکز>نمودار میله ای افقی</فلش></TR>
<TR>
<td align="center">
<table border="1" عرض = 80٪>
<TR>
<عرض TD = 10٪>باز</فلش>
<فلش><جدول فاصلهگذاری ="0" cellspacing ="0" مرز = 0 عرض = 50٪><TR bgcolor = قرمز><فلش>&nbsp حداقل;</فلش></TR></جدول></فلش>
</TR>
<TR>
<عرض TD = 10٪>بسته</فلش>
<فلش><جدول فاصلهگذاری ="0" cellspacing ="0" مرز = 0 عرض = 25٪><TR bgcolor = قرمز><فلش>&nbsp حداقل;</فلش></TR></جدول></فلش>
</TR>
<TR>
<عرض TD = 10٪>متوقف شده</فلش>
<فلش><جدول فاصلهگذاری ="0" cellspacing ="0" مرز = 0 عرض = 25٪><TR bgcolor = قرمز><فلش>&nbsp حداقل;</فلش></TR></جدول></فلش>
</TR>
</جدول>
</فلش>
</TR>
</جدول>
</بدن>
</اچ تی ام ال>

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:

من با پیش فرض XSL آغاز شده که شیرپوینت طراح به من داد وقتی که من برای اولین بار ایجاد 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".
مته به پایین با ایجاد یک کار می کند <یک عکاس هنگام عکسبرداری> مثل این: http://server/List?FilterField1=fieldname&FilterValue1=actualFilterValue. This technique may be of value in other contexts. At first, من فکر کردم که باید برای مطابقت با فرمت پیچیده تر: 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" نتیجه حذف پیشوندها="تومان. Z درجه ddwrt DT msxsl" 
 xmlns:msxsl="کوزه:طرحواره مایکروسافت کام:XSLT" xmlns:XSL="HTTP://www.w3.org/1999/XSL/Transform" 
 xmlns:شیرپوینت="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:درجه="کوزه:طرحواره مایکروسافت کام:دفتر" xmlns:ها="UUID:BDC6E3F0-6DA3-11d1-A2A3-00AA00C14882" 
 xmlns:DT="UUID:C2F41010-65B3-11d1-A29F-00AA00C14882" xmlns:تومان="کوزه:طرحواره مایکروسافت کام:rowset" xmlns:Z="#RowsetSchema" 
 xmlns:ddwrt2="کوزه:فرانت پیج:داخلی">
  <XSL:تولید روش="اچ تی ام ال" دندانه دار کردن="هیچ" />
  <XSL:فرمت اعشاری نان="" />
  <XSL:پارامتر نام="ListUrlDir"></XSL:پارامتر> <!-- من این نیاز به حمایت از یک تمرین پایین.  -->

  <XSL:قالب مسابقه="/" xmlns:شیرپوینت="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">
        هیچ اطلاعات به گراف وجود دارد!<برزیلی/>
      </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" را انتخاب کنید="$DIV totalStalled شده $ dvt_RowCount شده" />

        <!--
          جدول HTML ما در اینجا تعریف می کنیم.  من قرض از برخی از استاندارد
          .  من فکر می کنم آن را افتخار
          .
        -->
        <جدول عرض="100%" cellspacing="0" فاصلهگذاری="2"
سبک="مرز راست: 1 جامد # C0C0C0:; مرز پایین: 1 جامد # C0C0C0:; مرز چپ سبک: جامد; مرز چپ عرض: 1; مرز بالا به سبک: جامد; مرز بالا عرض: 1;">

           <TR>
            <فلش ردیف کردن="مرکز">
              <جدول مرز="1" عرض="100%">

                <!--
                  برای هر وضعیت است که ما به گراف می خواهید, we call the "ShowBar" قالب.
                  ما آن را عبور:
                  1. برچسب برای ردیف.  این است که به یک لینک تبدیل.
                  2. درصد (متغیر از بالا).
                  3. نام زمینه واقعی از کد آن را از لیست زیرین.  این
                     .
                  4. ارزش فیلد همسان شده #3.
                  5. اقلام کل این کد وضعیت (نه کل بزرگ از همه
                     ).

                  این از خود ساطع میکند <TR></TR> و خط نمودار میله ای افقی.

                  ما به این قالب برای هر کد وضعیت ما می خواهیم برای مشاهده.
                -->
                <XSL:تماس قالب نام="ShowBar">
                  <XSL:با پارامترها نام="BarDisplayLabel" را انتخاب کنید="'پیشنهاد'"/>
                  <XSL:با پارامترها نام="BarPercent" را انتخاب کنید="$percentProposed"/>
                  <XSL:با پارامترها نام="QueryFilterFieldName" را انتخاب کنید="'وضعیت'"/>
                  <XSL:با پارامترها نام="QueryFilterFieldValue" را انتخاب کنید="'پیشنهاد'"/>
                  <XSL:با پارامترها نام="TotalItems" را انتخاب کنید="$totalProposed"></XSL:با پارامترها>
                </XSL:تماس قالب>

                <XSL:تماس قالب نام="ShowBar">
                  <XSL:با پارامترها نام="BarDisplayLabel" را انتخاب کنید="'متوقف'"/>
                  <XSL:با پارامترها نام="BarPercent" را انتخاب کنید="$percentStalled"/>
                  <XSL:با پارامترها نام="QueryFilterFieldName" را انتخاب کنید="'وضعیت'"/>
                  <XSL:با پارامترها نام="QueryFilterFieldValue" را انتخاب کنید="'متوقف'"/>
                  <XSL:با پارامترها نام="TotalItems" را انتخاب کنید="$totalStalled"></XSL:با پارامترها>
                </XSL:تماس قالب>

                <XSL:تماس قالب نام="ShowBar">
                  <XSL:با پارامترها نام="BarDisplayLabel" را انتخاب کنید="در فرآیند"/>
                  <XSL:با پارامترها نام="BarPercent" را انتخاب کنید="$percentInProcess"/>
                  <XSL:با پارامترها نام="QueryFilterFieldName" را انتخاب کنید="'وضعیت'"/>
                  <XSL:با پارامترها نام="QueryFilterFieldValue" را انتخاب کنید="در فرآیند"/>
                  <XSL:با پارامترها نام="TotalItems" را انتخاب کنید="$totalInProcess"></XSL:با پارامترها>
                </XSL:تماس قالب>

              </جدول>
            </فلش>
          </TR>
        </جدول>
      </XSL:وگرنه>
    </XSL:را انتخاب کنید>
  </XSL:قالب>

  <!--
    این الگو کار می کند به نمایش خطوط فرد در نمودار میله ای.

    شما احتمالا بیشتر از افزایش سرعت خود را انجام دهد در اینجا.
  -->
  <XSL:قالب نام="ShowBar">
    <XSL:پارامتر نام="BarDisplayLabel" /> <!-- برچسب نشان می دهد -->
    <XSL:پارامتر نام="BarPercent"/> <!-- درصد از کل. -->
    <XSL:پارامتر نام="QueryFilterFieldName"/> <!-- مورد استفاده برای پرش به پرس و جو & فیلتر -->
    <XSL:پارامتر نام="QueryFilterFieldValue"/> <!-- مورد استفاده برای پرش به پرس و جو & فیلتر -->
    <XSL:پارامتر نام="TotalItems" /> <!-- تعداد کل این barlabel، -->

    <TR>

      <!-- برچسب نوار خود. -->
      <فلش کلاس="MS-formbody" عرض="30%">

        <!--
          این مجموعه بعد از اظهارات ایجاد یک رشته پرس و جو است که اجازه می دهد تا
          .
          ما استفاده از چند چیز در اینجا:
          1. ما می توانیم های FilterField1 و FilterValue1 را به یک لیست عبور بر روی یک ستون برای فیلتر کردن.
          2. شیرپوینت در حال عبور از یک پارامتر کلیدی به ما, ListUrlDir that points to
             the underlying list against which this DVWP is "running".

          است اکساسال سرگرم کننده نیست?
        -->
        <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"/> /

        <!-- این یک برچسب خوب درصد برای ما ایجاد.  سپاس ها, مایکروسافت! -->
        <XSL:تماس قالب نام="percentformat">
          <XSL:با پارامترها نام="در صد" را انتخاب کنید="$BarPercent"/>
        </XSL:تماس قالب>)

      </فلش>

      <!-- سرانجام, منتشر می کنند <فلش> برچسب برای خود نوار.-->
      <فلش>
        <جدول فاصلهگذاری="0" cellspacing="0" مرز="0"
عرض="{دور($BarPercent * 100)+1}%">
          <TR bgcolor="قرمز">
            <XSL:متن غیر فعال کردن خروجی فرار="بله"><![CDATA[&nbsp حداقل;]]></XSL:متن>
          </TR>
        </جدول>
      </فلش>
    </TR>

  </XSL:قالب>

  <!-- این است که به طور مستقیم از برخی از XSL گرفته شده من در قالب MS. -->
  <XSL:قالب نام="percentformat">
    <XSL:پارامتر نام="در صد"/>
    <XSL:را انتخاب کنید>
      <XSL:وقتی که آزمون="فرمت شماره($در صد, # # # # # 0٪;-#,##0%')= 'نان'">0%</XSL:وقتی که>
      <XSL:وگرنه>
        <XSL:ارزش را انتخاب کنید="فرمت شماره($در صد, # # # # # 0٪;-#,##0%')" />
      </XSL:وگرنه>
    </XSL:را انتخاب کنید>
  </XSL:قالب>

</XSL:شیوه نامه>

نمایش نتایج: از شماره:

XSL از بالا تولید این گراف:

تمرین کردن به داده های لایه ی زیرین با کلیک کردن بر روی کد وضعیت:

انعقاد افکار:

می تواند این باشد منتشر?

من عاشق این مفهوم نموداری, 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, لطفا اجازه دهید من می دانم و من با کمال میل شما به وبلاگ شما لینک 🙂

من فکر می کنم که چالش با یک گراف عمودی است که برچسب برای این گراف مشکل تر برای مدیریت, اما مطمئنا غیر ممکن نیست.

نام فیلد دستت رو شد:

حداقل دو چیز را به مراقب با نام فیلد شما وجود دارد.

اولین, 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
نمایش تمام اطلاعات ارائه شده توسط شیرپوینت (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

مبارک تبدیل!

<پایان پیام />

مشترک شدن در وبلاگ من!

برچسب ها: شیرپوینت, DVWP, داده ها مشاهده وب قسمت, XSL, XSLT, WSS, خزه

شیرپوینت فضای پاول گالوین در

بایگانی ماهانه: دسامبر 2007

ایجاد نمودارهای نوار در شیرپوینت