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

  • 15 دقائق

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

مهم

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

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

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

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

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

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

  3. حدد + جَديد.

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

  4. حدد صفحة العميل.

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

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

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

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

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

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

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

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

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

    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. حدّد نشر وانتظر حتى يتم نشر التَطبِيق.

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

  42. حدّد الحلول وافتح الحل الافترَاضي.

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

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

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

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

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

  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 لاسم العرض، وأدخل WhatIfJS للاسم، وحدّد 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. قم بتغيير قيمة المبلغ لكل شخص وانظر كيف يحسب هَذا عدد الأشخَاص.

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