التمرين: استخدام الصفحات المخصصة مع الأوامر

مكتمل

في هذا التمرين، ستضيف زر شريط الأوامر الذي سيعرض صفحة مخصصة في مربع حوار مشروط.

هام

استخدم بيئة اختبار مع توفير Microsoft Dataverse وعينات التطبيقات الممكنة. إذا لم يكن لديك واحد، فيمكنك الاشتراك في خطة المجتمع.

المهمة: إنشاء الصفحة المخصصة

في هذه المهمة، ستضيف صفحة مخصصة جديدة إلى تطبيق أداة جمع التبرعات‬.

  1. انتقل إلى https://make.powerapps.com وتأكد من تحديد بيئة الاختبار لديك.

  2. حدد التطبيقات وحدد تطبيق جمع التبرعات ثم حدد تحرير.

    لقطة شاشة لزر تحرير التطبيق.

  3. حدد + جديد.

    لقطة شاشة لزر إضافة جديد.

  4. حدد صفحة مخصصة، ثم حدد التالي.

  5. حدد إنشاء صفحة مخصصة جديدة، وأدخل What if للاسم، وحدد إضافة.

    لقطة شاشة لمربع حوار إنشاء صفحة مخصصة.

  6. حدد علامة التبويب البيانات ثم حدد إضافة بيانات.

    لقطة شاشة لزر إضافة بيانات.

  7. ابحث عن برنامج جمع التبرعات وحدد جدول أداة جمع التبرعات‬.

    لقطة شاشة لمربع حوار إضافة بيانات.

  8. حدد علامة التبويب ‏‏طريقة عرض شجرة ثم حدد الكائن تطبيق.

  9. حدد OnStart من والصق الصيغة أدناه في شريط الصيغة. ستنشئ هذه الصيغة متغيرات:

    1. سيحتفظ متغير السجل بالسجل الحالي في النموذج.

    2. سيحتفظ متغير remainingAmount بالمبلغ المتبقي لهدف جمع التبرعات.

    3. سيتتبع متغير numberOfPeople عدد الأشخاص الذين سيتبرعون للوصول إلى هدف جمع التبرعات. نقوم بتهيئة هذا المتغير بـ 1.

    4. سيتتبع متغير averageDonation المبلغ الذي سيتبرع به كل شخص للوصول إلى هدف جمع التبرعات. قمنا بتهيئة هذا المتغير بالمبلغ المتبقي.

    Set(record,LookUp(Fundraisers,Fundraiser=GUID(Substitute(Substitute(Param("recordId"),"{",""),"}",""))));Set(remainingAmount,record.'Fundraiser Goal'-record.'Total Donations');Set(numberOfPeople,1);Set(averageDonation,remainingAmount)

    لقطة شاشة لصيغة التطبيق عند البدء.

  10. حدد Screen1 ثم حدد + إدراج.

  11. قم بتوسيع مجموعة التخطيط وحدد الحاوية العمودية.

    لقطة شاشة لزر إدراج الحاوية الرأسية.

  12. حدد الحاوية.

  13. انتقل إلى شريط الصيغة وقم بتغيير قيمة عرض الحاوية إلى 1280.

  14. قم بتغيير قيمة ارتفاع الحاوية إلى 680.

  15. يجب أن تبدو الحاوية الآن مثل الصورة أدناه.

    لقطة شاشة للحاوية التي تم تغيير حجمها.

  16. حدد الحاوية وحدد الزر + إدراج.

  17. حدد التسمية من مجموعة شائعة.

  18. أدخل عدد الأشخاص للنص.

    لقطة شاشة لقيمة نص التسمية.

  19. حدد الحاوية وحدد الزر + إدراج.

  20. حدد مربع النص من مجموعة شائعة.

  21. إعادة تسمية المربع النصي عدد الأشخاص.

  22. قم بتعيين قيمة المربع النصي لعدد الأشخاص إلى numberOfPeople.

    لقطة شاشة لقيمة مربع النص.

  23. حدد الحاوية وحدد الزر + إدراج.

  24. حدد التسمية من مجموعة شائعة.

  25. أدخل المبلغ لكل شخص للنص.

  26. حدد الحاوية وحدد الزر + إدراج.

  27. حدد مربع النص من مجموعة شائعة.

  28. أعد تسمية المربع النصي المبلغ لكل شخص.

  29. قم بتعيين قيمة المربع النصي لمبلغ الشخص إلى averageDonation.

    لقطة شاشة لقيمة مربع النص.

  30. قم بتعيين قيمة OnChange للمربع النصي لمبلغ كل شخص إلى الصيغة أدناه. ستحدد هذه الصيغة عدد الأشخاص بناءً على متوسط تبرع معين.

    If(Value('Amount per person'.Value) > 0, Set(numberOfPeople, remainingAmount /'Amount per person'.Value), Set(numberOfPeople, 1))

    لقطة شاشة لقيمة on-change لمربع النص.

  31. حدد المربع النصي عدد الأشخاص.

  32. قم بتعيين قيمة OnChange للمربع النصي لعدد الأشخاص إلى الصيغة أدناه. ستحدد هذه الصيغة متوسط التبرع بناءً على عدد معين من الأشخاص.

    If(Value('Number of people'.Value) > 0, Set(averageDonation, remainingAmount / 'Number of people'.Value), Set(numberOfPeople, 1);Set(averageDonation, remainingAmount))

  33. حدد حفظ، ثم انتظر ليتم حفظ الصفحة.

  34. حدد نشر.

  35. حدد نشر هذا الإصدار وانتظر حتى يكتمل النشر.

  36. أغلق نافذة أو علامة تبويب متصفح محرر الصفحة المخصصة.

  37. يجب أن تعود الآن إلى محرر التطبيق الذي يستند إلى النموذج. حدد موافق.

    لقطة شاشة لمربع حوار إعادة النشر للتطبيق.

  38. حدد حفظ، ثم انتظر ليتم حفظ التطبيق.

  39. حدد نشر وانتظر حتى يتم نشر التطبيق.

  40. ابدأ جلسة متصفح جديدة، وانتقل إلَى https://make.powerapps.com وتأكد مِن تحديد بيئة الاختبار الخاصة بك.

  41. حدد الحلول وافتح الحل الافتراضي.

  42. حدد الصفحات، وحدد موقع صفحة What if التي قمت بإنشائها وانسخ الاسم. احتفظ بهذا الاسم عَلى مفكرة، فستحتاجه فِي خطوة مستقبلية.

    لقطة شاشة لاسم الصفحة المخصصة.

  43. بعد نسخ الاسم، يمكنك إغلاق جلسة المتصفح هذه.

المهمة: إضافة زر الأمر

في هذه المهمة، ستضيف زر أمر جديداً إلَى النموذج الرئيسي لجدول جمع التبرعات.

  1. افتح المفكرة والصق JavaScript أدناه. سيفتح JavaScript هذا مربع حوار مركزي.

    function calculate(itemId)
    {
    // Centered Dialog
    var pageInput = {
        pageType: "custom",
        name: "[YOUR CUSTOM PAGE NAME]",
    	recordId: itemId
    };
    var navigationOptions = {
        target: 2, 
        position: 1,
        width: {value: 50, unit:"%"},
        title: "What if"
    };
    Xrm.Navigation.navigateTo(pageInput, navigationOptions)
        .then(
            function () {
                // Called when the dialog closes
            }
        ).catch(
            function (error) {
                // Handle error
            }
        );
    }
    
  2. استبدل [YOUR CUSTOM PAGE NAME] باسم صفحتك المخصصة التي نسختها في المهمة 1.

    لقطة شاشة لملف JavaScript.

  3. احفظ الملف محلياً على جهاز الكمبيوتر الخاص بك وقم بتسميته WhatIf.js. تأكد من أن امتداد الملف هو .js.

  4. ارجع إلى مصمم التطبيق الذي يستند إلى النموذج.

  5. حدد الزر ... من جمع التبرعات وحدد تحرير شريط الأوامر.

    لقطة شاشة لزر شريط أوامر التحرير.

  6. حدد النموذج الرئيسي، ثم حدد تحرير.

  7. حدد + جديد ثم حدد الأمر.

    لقطة شاشة لزر إضافة أمر جديد.

  8. حدد Power Fx ثم حدد متابعة.

  9. أدخل What if لـ "التسمية"، حدد استخدام الأيقونة، وحدد إعادة حساب، وحدد تشغيل JavaScript للإجراء.

    لقطة شاشة لقيم القائمة المنسدلة للإجراء.

  10. حدد + إضافة مكتبة.

    لقطة شاشة لزر المكتبة.

  11. حدد + مورد ويب جديد.

    لقطة شاشة لزر إضافة مَورد ويب جديد.

  12. حدد اختيار ملف.

  13. حدد ملف WhatIf.js الذي قمت بإنشائه وحدد فتح.

  14. أدخل What If JS لاسم العرض، وأدخل WhaIfJS للاسم، وحدد JavaScript (JS) للنوع، ثم حدد حفظ ونشر.

    لقطة شاشة لمربع حوار إضافة مَورد ويب جديد.

  15. ابحث عن what if، حدد مورد الويب What If JS الذي أضفته للتو، ثم حدد إضافة.

    لقطة شاشة لمربع حوار

  16. أدخل حساباً لاسم الوظيفة وحدد + إضافة معلمة.

    لقطة شاشة لزر

  17. حدد FirstPrimaryItemId للمعلمة 1.

  18. حدد حفظ ونشر وانتظر حتى اكتمال النشر.

  19. حدد تشغيل.

  20. حدد جمع الأموال وافتح أحد سجلات جمع الأموال.

  21. يجب أن ترى زر شريط الأمر What If الذي أضفته. حدد زر شريط الأمر What if.

    لقطة شاشة لزر what if.

  22. يفترض أن يتم عرض مربع الحوار what if.

    لقطة شاشة لمربع حوار صفحة مخصصة.

  23. قم بتغيير قيمة عدد الأشخاص إلى 5. يجب أن يتم تحديث المبلغ لكل شخص لكيفية حث كل شخص على التبرع للوصول إلى هدف جمع التبرعات.

    لقطة شاشة للتبرع المحسوب.

  24. قم بتغيير قيمة المبلغ لكل شخص وانظر كيف يحسب ذلك عدد الأشخاص.

  25. تهانينا، لقد قمت أنشأت صفحة مخصصة وفتحتها كمربع حوار باستخدام زر شريط الأوامر.