كانون الأول/ديسمبر | 2007 | مساحة SharePoint بول جالفين | لكني أسمع أنهم يفعلون أشياء جيدة مع NewForm.aspx هذه الأيام 🙂 3

نظرة عامة:

(التحديث 12/04/07: إضافة مورد آخر للاهتمام في نهاية ربط آخر بلوق أن يعالج هذا عبر جزء ويب مثيرة جداً للاهتمام)

هذا بلوق دخول يصف كيفية إنشاء رسم بياني شريطي في SharePoint. هذا وتعمل في بيئات WSS وموس كما أنه يعتمد فقط على جزء ويب لعرض البيانات.

النهج العام كما يلي:

قم بإنشاء قائمة أو مكتبة المستندات التي تحتوي على البيانات التي تريدها لإنشاء رسم بياني.
مكان مكتبة المستندات المرتبطة بها / مخصصة قائمة على صفحة، وتحويله إلى جزء ويب "طريقة عرض بيانات" (دفوب).
تعديل XSL دفوب إنشاء HTML الذي يظهر كرسم بياني.

سيناريو العمل / برنامج الإعداد:

لقد خلق قائمة مخصصة مع العمود العنوان القياسية وعمود إضافي واحد, "حالة". هذه النماذج (جداً ننجرف) إذن "للمصروفات" السيناريو حيث العنوان يمثل المشروع والوضع قيمة من قائمة:

واقترح
في عملية
وتوقف

والهدف هو إنتاج رسم شريط أفقي تفاعلية التي تظهر رموز الحالة هذه.

أنا قد نشر القائمة ويبدو مثل هذا:

إنشاء جزء ويب لعرض البيانات:

إنشاء دفوب واسطة إضافة قائمة مخصصة إلى صفحة (صفحة الموقع في حالتي) واتبع الإرشادات هنا (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).

بالإضافة إلى إنشاء ببساطة دفوب, نحن أيضا بحاجة إلى تعيين الخاصية الترحيل لإظهار كافة الصفوف المتوفرة. بالنسبة لي, وهذا يبدو شيئا من هذا القبيل:

عند هذه النقطة, دائماً إغلاق المستعرض والحزب الديمقراطي الاشتراكي. ثم إعادة فتح الصفحة باستخدام المستعرض. تجنب هذا التلويث قصد إعداد تخطيط جزء ويب على صفحة.

تعديل XSLT:

حان الآن الوقت لتعديل XSLT.

أنا دائماً استخدام visual studio لهذا. (انظر هنا لملاحظة هامة حول التحسس الذكي الذي سوف تساعدك كثيرا).

إنشاء مشروع فارغ إضافة أربعة ملفات جديدة (الاستعاضة عن عبارة "الأصلي" و "جديد" حسب الاقتضاء):

Original.xslt
New.xslt
Params.xml الأصلي
Params.xml الجديدة

في حالتي, يبدو مثل هذا:

تعديل جزء ويب ثم نسخ params و XSL للنص الأصلي "" الإصدار في Visual Studio.

والهدف هنا هو التسبب في XSL تحويل النتائج التي كنا نعود من الاستعلام دفوب إلى HTML الذي يعرض كرسم بياني.

وتحقيقا لهذه الغاية, فهو يساعد على النظر أولاً في ما ينبغي أن تبدو مثل HTML قبل أن يمكننا الحصول على الخلط من جانب الجنون الذي يعرف باسم "XSL". (أن تكون واضحة, ما يلي مجرد مثال; اكتب أو نسخ/لصق في visual studio لا. وتقدم الأول ضربة كامل نقطة انطلاق لذلك في وقت لاحق الكتابة). يتم تقديم نموذج الرسم البياني التالي حسب HTML التالية مباشرة:

HTML المطابق:

<html>
<الهيئة>
<مركز>
<جدول العرض = 80%>
<tr><td><مركز>رسم بياني شريطي أفقي</td></tr>
<tr>
<محاذاة td = "توسيط">
<حدود الجدول = "1" العرض = 80%>
<tr>
<عرض td = 10%>مفتوحة</td>
<td><الجدول cellpadding ="0" cellspacing ="0" الحدود = 0 العرض = 50%><tr bgcolor = أحمر><td> </td></tr></الجدول></td>
</tr>
<tr>
<عرض td = 10%>إغلاق</td>
<td><الجدول cellpadding ="0" cellspacing ="0" الحدود = 0 العرض = 25%><tr bgcolor = أحمر><td> </td></tr></الجدول></td>
</tr>
<tr>
<عرض td = 10%>وتوقف</td>
<td><الجدول cellpadding ="0" cellspacing ="0" الحدود = 0 العرض = 25%><tr bgcolor = أحمر><td> </td></tr></الجدول></td>
</tr>
</الجدول>
</td>
</tr>
</الجدول>
</الهيئة>
</html>

لقد استخدمت نهجاً القتلى بسيطة لإنشاء أشرطة بلدي بتعيين لون الخلفية لصف "الأحمر".

هذا هنا الوجبات الجاهزة: وفي نهاية المطاف, كل ما نقوم به هو إنشاء HTML مع الصفوف والأعمدة.

قالب XSLT:

لقد قمت بنسخ XSLT الذي يقوم بإنشاء رسم بياني شريطي أفقي. جيد إلى حد ما علقت لذلك أنا لن تضيف الكثير هنا باستثناء هذه الملاحظات:

لقد بدأت مع XSL الذي أعطاني مصمم SharePoint عندما أنشئت أول مرة في دفوب الافتراضي.
قد تمكنت من خفض هذا من الحزب الاشتراكي الديمقراطي 657 خطوط إلى 166 خطوط.
لم أكن نحو الفوضى مع معلمات ملف XML (وهو مستقل من XSL وعليك أن تعرف ماذا يعني عندما تذهب إلى تعديل دفوب نفسها; هناك اثنين من الملفات التي يمكنك تعديلها). ومع ذلك, من أجل تبسيط تقنية المعلومات, أقوم بإزالة كل منهم ما يقرب من XSL. وهذا يعني أنه إذا كنت تريد أن تجعل استخدام هذه المعلمات, تحتاج فقط إلى إضافة تعريفات المتغير بها مرة أخرى إلى XSL. التي تكون سهلة حيث سيكون لديك تعريفات المتغير الأصلي XSL في مشروع visual studio الخاص بك.
يجب عليك أن تكون قادراً على نسخ ولصق هذا مباشرة في المشروع الخاص بك في visual studio. ثم, إزالة بلدي المكالمات وإدراج المكالمات الخاصة بك إلى "شووبار".
الحفر أسفل يعمل عن طريق إنشاء <href> أحب هذا: http://server/List?FilterField1=fieldname&FilterValue1=actualFilterValue. هذا الأسلوب قد تكون ذات قيمة في سياقات أخرى. في البداية, وأعتقد أنني بحاجة إلى أن تلتزم بشكل أكثر تعقيداً: http://server/List/AllItems.aspx?View={guid}&FilterField1=blah&FilterValue1=blah, ولكن في بلدي البيئة التي ليس من الضروري. URL في القائمة يتم تمريرها إلينا من SharePoint حتى هذا من السهل جداً أن التعميم.

هنا:

<xsl:أوراق الأنماط الإصدار="1.0" استبعاد-النتيجة-البادئات="rs z o s دورت dt مسكسسل" 
 xmlns:مسكسسل="urn:مخططات--مايكروسوفت-كوم:xslt" xmlns:xsl="http://www.w3.org/تحويل/1999/XSL" 
 xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" 
 xmlns:آسيا والمحيط الهادئ="http://schemas.microsoft.com/ASPNET/20" xmlns:دورت="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" 
 xmlns:o="urn:مخططات--مايكروسوفت-كوم:مكتب" xmlns:s="uuid:BDC6E3F0-6DA3-11d1-A2A3-00AA00C14882" 
 xmlns:dt="uuid:C2F41010-65B3-11d 1-A29F-00AA00C14882" xmlns:rs="urn:مخططات--مايكروسوفت-كوم:مجموعة الصفوف" xmlns:z="#رووسيتشيما" 
 xmlns:ddwrt2="urn:frontpage:الداخلية">
  <xsl:الإخراج الأسلوب="html" المسافة البادئة="لا" />
  <xsl:تنسيق عشري نان="" />
  <xsl:بارام الاسم="ليستورلدير"></xsl:بارام> <!-- أنا بحاجة إلى هذا الدعم حفر أسفل.  -->

  <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:متغير الاسم="الصفوف" حدد="/دسكويريريسبونسي/الصفوف/الصف" />
    <xsl:متغير الاسم="dvt_RowCount" حدد="العد($الصفوف)" />
    <xsl:متغير الاسم="IsEmpty" حدد="$dvt_RowCount = 0" />
    <xsl:متغير الاسم="dvt_IsEmpty" حدد="$dvt_RowCount = 0" />

    <xsl:اختر>
      <xsl:عندما اختبار="$dvt_IsEmpty">
        لا توجد أي بيانات إلى الرسم البياني!<br/>
      </xsl:عندما>
      <xsl:خلاف ذلك>

        <!--
          الأشياء المثيرة للاهتمام التي تبدأ هنا.

          ونحن بحاجة إلى تحديد زوج من متغيرات لكل صف في الرسم البياني: العدد الإجمالي للعناصر وفي المائة من إجمالي.
        -->
        <xsl:متغير الاسم="توتالبروبوسيد" حدد="العد(/دسكويريريسبونسي/الصفوف/الصف[تطبيع والفضاء(@Status) = 'اقترح'])" />
        <xsl:متغير الاسم="بيرسينتبروبوسيد" حدد="$شعبة توتالبروبوسيد $dvt_RowCount" />

        <xsl:متغير الاسم="توتالينبروسيس" حدد="العد(/دسكويريريسبونسي/الصفوف/الصف[تطبيع والفضاء(@Status) = 'في عملية'])" />
        <xsl:متغير الاسم="بيرسينتينبروسيس" حدد="$شعبة توتالينبروسيس $dvt_RowCount" />

        <xsl:متغير الاسم="توتالستاليد" حدد="العد(/دسكويريريسبونسي/الصفوف/الصف[تطبيع والفضاء(@Status) = 'توقفت'])" />
        <xsl:متغير الاسم="بيرسينتستاليد" حدد="$شعبة توتالستاليد $dvt_RowCount" />

        <!--
          علينا أن نحدد جدول HTML لدينا هنا.  وأنا أشعر بالاقتراض من بعض الأنماط القياسية SharePoint الموجودة هنا لجعلها متسقة.  وأعتقد أنها سوف شرف التغييرات إلى ملف css العالمية، فضلا عن تجاوز الموضوع.
        -->
        <الجدول العرض="100%" سيلسباسينج="0" سيلبادينج="2"
نمط="الحق في الحدود: 1 #C0C0C0 الصلبة; الحدود السفلي: 1 #C0C0C0 الصلبة; الحدود على غرار اليسار: الصلبة; عرض الحدود اليسرى: 1; نمط الحد الأعلى: الصلبة; عرض الحد الأعلى: 1;">

           <tr>
            <td قم بمحاذاة="مركز">
              <الجدول الحدود="1" العرض="100%">

                <!--
                  لكل حالة نريد أن الرسم البياني, ونحن ندعو شووبار "" قالب.
                  نحن نقله:
                  1. تسمية للصف.  وهذا هو تحويلها إلى ارتباط تشعبي.
                  2. النسبة المئوية (متغير من أعلى).
                  3. اسم الحقل الفعلي للتعليمات البرمجية من القائمة الأساسية.  وهذا لا يحتاج لمطابقة عرض التسمية.
                  4. مطابقة لقيمة الحقل #3.
                  5. مجموع البنود من هذا رمز الحالة (لا المجموع الكلي لكافة رموز الحالة).

                  أنها تنبعث <tr></tr> والخط الأفقي شريطي.

                  أننا ندعو هذا القالب لكل رمز الحالة التي نريد أن عرض.
                -->
                <xsl:قالب المكالمة الاسم="شووبار">
                  <xsl:مع بارام الاسم="بارديسبلايلابيل" حدد="'اقترح'"/>
                  <xsl:مع بارام الاسم="باربيرسينت" حدد="$بيرسينتبروبوسيد"/>
                  <xsl:مع بارام الاسم="قويريفيلتيرفيلدنامي" حدد="'مركز'"/>
                  <xsl:مع بارام الاسم="قويريفيلتيرفيلدفالوي" حدد="'اقترح'"/>
                  <xsl:مع بارام الاسم="توتاليتيمس" حدد="$توتالبروبوسيد"></xsl:مع بارام>
                </xsl:قالب المكالمة>

                <xsl:قالب المكالمة الاسم="شووبار">
                  <xsl:مع بارام الاسم="بارديسبلايلابيل" حدد="'توقفت'"/>
                  <xsl:مع بارام الاسم="باربيرسينت" حدد="$بيرسينتستاليد"/>
                  <xsl:مع بارام الاسم="قويريفيلتيرفيلدنامي" حدد="'مركز'"/>
                  <xsl:مع بارام الاسم="قويريفيلتيرفيلدفالوي" حدد="'توقفت'"/>
                  <xsl:مع بارام الاسم="توتاليتيمس" حدد="$توتالستاليد"></xsl:مع بارام>
                </xsl:قالب المكالمة>

                <xsl:قالب المكالمة الاسم="شووبار">
                  <xsl:مع بارام الاسم="بارديسبلايلابيل" حدد="'في عملية'"/>
                  <xsl:مع بارام الاسم="باربيرسينت" حدد="$بيرسينتينبروسيس"/>
                  <xsl:مع بارام الاسم="قويريفيلتيرفيلدنامي" حدد="'مركز'"/>
                  <xsl:مع بارام الاسم="قويريفيلتيرفيلدفالوي" حدد="'في عملية'"/>
                  <xsl:مع بارام الاسم="توتاليتيمس" حدد="$توتالينبروسيس"></xsl:مع بارام>
                </xsl:قالب المكالمة>

              </الجدول>
            </td>
          </tr>
        </الجدول>
      </xsl:خلاف ذلك>
    </xsl:اختر>
  </xsl:قالب>

  <!--
    هذا القالب لا العمل لعرض البنود الفردية في الرسم البياني الشريطي.

    ربما عليك أن تفعل أكثر من اللف الخاص بك هنا.
  -->
  <xsl:قالب الاسم="شووبار">
    <xsl:بارام الاسم="بارديسبلايلابيل" /> <!-- التسمية لإظهار -->
    <xsl:بارام الاسم="باربيرسينت"/> <!-- بالمئة من إجمالي. -->
    <xsl:بارام الاسم="قويريفيلتيرفيلدنامي"/> <!-- تستخدم للانتقال إلى الاستعلام & عامل التصفية -->
    <xsl:بارام الاسم="قويريفيلتيرفيلدفالوي"/> <!-- تستخدم للانتقال إلى الاستعلام & عامل التصفية -->
    <xsl:بارام الاسم="توتاليتيمس" /> <!-- العدد الإجمالي لهذه بارلابيل -->

    <tr>

      <!-- الشريط التسمية نفسها. -->
      <td فئة="مرض التصلب العصبي المتعدد--فورمبودي" العرض="30%">

        <!--
          يبني هذه المجموعة التالية من عبارات استعلام من سلسلة أحرف الذي يسمح لنا لأسفل إلى طريقة عرض تمت تصفيتها من البيانات الأساسية.
          ونحن جعل استخدام عدد قليل من الأشياء هنا:
          1. ونحن يمكن أن تمر FilterField1 و FilterValue1 إلى قائمة لتصفية على عمود.
          2. SharePoint يتم تمرير معلمة رئيسية بالنسبة لنا, ليستورلدير يشير إلى القائمة الأساسية التي دفوب هذا هو "تشغيل".

          ليست متعة XSL?
        -->
        <xsl:النص تعطيل-إخراج-الهروب="نعم">
        <![CDATA[<a href ="]]></xsl:النص>
        <xsl:القيمة حدد="$ليستورلدير"/>
        <xsl:النص تعطيل-إخراج-الهروب="نعم"><![CDATA[?FilterField1 =]]></xsl:النص>
        <xsl:القيمة حدد="$قويريفيلتيرفيلدنامي"/>
        <xsl:النص تعطيل-إخراج-الهروب="نعم"><![CDATA[&FilterValue1 =]]></xsl:النص>
        <xsl:القيمة حدد="$قويريفيلتيرفيلدفالوي"/>
        <xsl:النص تعطيل-إخراج-الهروب="نعم"><![CDATA[">]]></xsl:النص>
        <xsl:القيمة حدد="$بارديسبلايلابيل"/>
        <xsl:النص تعطيل-إخراج-الهروب="نعم"><![CDATA[</أ>]]></xsl:النص>

        <!-- بت التالية تظهر بعض الأرقام في تنسيق: "(المجموع / % ومن المجموع)" -->
        (<xsl:القيمة حدد="$توتاليتيمس"/> /

        <!-- وهذا يخلق علامة النسبة مئوية لطيفة بالنسبة لنا.  بفضل, مايكروسوفت! -->
        <xsl:قالب المكالمة الاسم="بيرسينتفورمات">
          <xsl:مع بارام الاسم="في المائة" حدد="$باربيرسينت"/>
        </xsl:قالب المكالمة>)

      </td>

      <!-- وأخيراً, تنبعث <td> العلامة للشريط نفسه.-->
      <td>
        <الجدول سيلبادينج="0" سيلسباسينج="0" الحدود="0"
العرض="{الجولة($باربيرسينت * 100)+1}%">
          <tr لون الخلفية="الأحمر">
            <xsl:النص تعطيل-إخراج-الهروب="نعم"><![CDATA[&nbsp;]]></xsl:النص>
          </tr>
        </الجدول>
      </td>
    </tr>

  </xsl:قالب>

  <!-- هذا مأخوذ مباشرة من بعض XSL التي وجدت في قالب مرض التصلب العصبي المتعدد. -->
  <xsl:قالب الاسم="بيرسينتفورمات">
    <xsl:بارام الاسم="في المائة"/>
    <xsl:اختر>
      <xsl:عندما اختبار="تنسيق الرقم($في المائة, '#,##0%;-#,##0%')= 'نان'">0%</xsl:عندما>
      <xsl:خلاف ذلك>
        <xsl:القيمة حدد="تنسيق الرقم($في المائة, '#,##0%;-#,##0%')" />
      </xsl:خلاف ذلك>
    </xsl:اختر>
  </xsl:قالب>

</xsl:أوراق الأنماط>

النتائج:

XSL من أعلاه ينشئ هذا الرسم البياني:

انتقل لأسفل للبيانات الأساسية عن طريق النقر على رمز الحالة:

أفكار ختامية:

يمكن أن يكون هذا المعمم?

أنا أحب هذا المفهوم الرسوم البيانية, ولكن أنا أكره حقيقة أن لا بد لي من الذهاب والقيام بالكثير من ناحية الترميز. لقد أعطيت القليل من التفكير لما إذا كان يمكن أن يعمم وأنا متفائل, ولكن أنا أيضا قليلاً خوفاً من أنه قد يكون هناك بحائط من طوب في مكان ما على طول المسار الذي لن تقدم أي عمل حول. إذا كان أي شخص لديه بعض الأفكار الجيدة في هذا, يرجى تقديم مذكرة في التعليقات أو أرسل لي.

الرسوم البيانية العمودية:

هذا رسم بياني شريطي أفقي. فمن الممكن بالتأكيد لإنشاء رسم بياني عمودي. نحن بحاجة فقط لتغيير HTML. وأود أن ابدأ بنفس الطريقة: إنشاء تمثيل HTML لرسم شريط عمودي وثم معرفة كيفية الحصول على ذلك عن طريق XSL. إذا كان أي شخص مهتم في هذا, أنا يمكن أن يكون إقناع جربة والعمل بها على مكامن الخلل. إذا كان شخص ما قد فعلت ذلك, يرجى إعلامي وسأرتبط بكل سرور بمدونتك 🙂

وأعتقد أن التحدي مع رسم بياني عمودي أن التسميات للرسم البياني أكثر صعوبة لإدارة, ولكن بالتأكيد ليس مستحيلاً.

حقل اسم مسكتك:

هناك أشياء اثنين على الأقل نبحث مع أسماء الحقول الخاصة بك.

الأولى, اسم حقل بمسافة يجب أن يكون قد فر في XSL. ربما تكون هذه مشكلة هنا:

        <xsl:متغير الاسم="توتالبروبوسيد" 
 حدد="العد(/دسكويريريسبونسي/الصفوف/الصف[تطبيع والفضاء(@Status) = 'اقترح'])" />

إذا كان وضعك "" هو فعلا تسمية العمود "رمز الحالة" ثم كنت بحاجة إلى مرجع له ك "Status_x0020_Code":
   <xsl:متغير الاسم="توتالبروبوسيد" 
 حدد="العد(/دسكويريريسبونسي/الصفوف/الصف[تطبيع والفضاء(@Status_x0020_Code) = 'اقترح'])" />
الثانية, وأنا غامض بعض الشيء في هذا, ولكن تحتاج أيضا إلى أن تكون على أهبة الاستعداد لتغير اسم حقل. إذا قمت بتسمية حقل "رمز الحالة" وثم في وقت لاحق على, إعادة تسميتها إلى "مركز AFE", اسم الداخلية "" لا تغيير. سيكون الاسم الداخلي لا يزال "رمز الحالة" ويجب أن يكون المشار إليه بوصفه "Status_x0020_Code". "الموارد الأخرى" روابط قد تساعد على تشخيص وتصحيح هذا النوع من المشكلة.

حول هذا اللون:

وقد اخترت "الأحمر" لأنه من دواعي السرور بالنسبة لي في هذه اللحظة. أنه لا صفقة كبيرة لإظهار ألوان مختلفة بغية توفير أكثر من مجرد وصف بصرية لعدد, ولكن أيضا توفير KPI مفيدة. وعلى سبيل المثال, إذا كانت النسبة المئوية من "المتوقفة" في AFE > 10% ثم تبين أنها حمراء, وإلا تظهر باللون الأسود. استخدام <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(?). وقد حفرت ليس فيه, ولكن تبدو واعدة, خاصة بالنسبة للمخططات الدائرية: http://www.waka.dk/Blog/PermaLink,guid,e2532e71-d774-4ac9-8f25-883964b830f4.aspx

تحويل سعيد!

<نهاية/>

الاشتراك في بلادي بلوق!

[تشنورتي] بطاقات: SharePoint, دفوب, جزء ويب لطريقة عرض البيانات, XSL, XSLT, WSS, موس

مساحة SharePoint بول جالفين

المحفوظات الشهرية: كانون الأول/ديسمبر 2007

إنشاء شريط الرسوم البيانية في SharePoint