تمرين - استخدام المتغيرات والمجموعات

مكتمل

يوضح لك هذا التمرين العملي كيفية إنشاء واستخدام دالات Global، وContextual، وCollections.

  1. سجّل الدخول إلى Power Apps maker portal (‏make.powerapps.com).

  2. من لوحة التنقل فِي الجانب الأيسر من الشاشة الرئيسية، حدّد + إنشاء، ثم حدّد تطبيق فارغ وفي النافذة المنبثقةإنشاء ضمن تطبيق اللوحة الفارغ حدّد إنشاء.

  3. قم بتسمية تطبيقك تمرين المجموعة، واترك التنسيق كـ الجدول، وحدّد إنشاء.

  4. بعد بضع لحظات، سيظهر تطبيقك الجديد. يمكنك تخطي مربع الحوار الترحيبي (إذا ظهر). في لوحة طريقة عرض الشجرة ابحث عن الكائن التطبيق وحدّده، ثم حدّد الخاصية OnStart.

    لقطة شاشة لشاشة العرض مع تمييز onstart والتطبيق.

  5. قم بتعيين الخاصية OnStart لهذه المعادلة التي نستخدمها لإنشاء مجموعة من أرقام العملاء وأرقام الفواتير ذات الصلة (ما عليك سوى نسخها ولصقها فِي شريط المعادلة fx):

    ClearCollect(colCustomer,
    {CustomerNumber: 7470, InvoiceNumber: "INV70817"},
    {CustomerNumber: 4259, InvoiceNumber: "INV29595"},
    {CustomerNumber: 8251, InvoiceNumber: "INV74302"},
    {CustomerNumber: 2338, InvoiceNumber: "INV35115"},
    {CustomerNumber: 1524, InvoiceNumber: "INV82337"},
    {CustomerNumber: 1530, InvoiceNumber: "INV82338"}
    );
    Set(varUserDisplayName, User().FullName)
    
  6. حدّد علامة الحذف (…) بجوار كائن التطبيق وحدّد تشغيل OnStart. يؤدي ذلك إلى تشغيل صيغة OnStart التي قمت للتو بإدخالها ويقوم أيضًا بتعبئة مجموعة colCustomer الخاصة بك.

  7. لعرض المجموعة، حدّد علامة التبويب إدراج (أو + إدراج من شريط الأوامر) وأضف معرض رأسي، وقم بتعيين خاصية Items الخاصة به إلى colCustomer.

    قم بإجراء التغييرات أدناه على Gallery1 الجديد الخاص بك باستخدام لوحة الخصائص على يمين الشاشة:

    • تخطيط: العنوان والعنوان الفرعي

    • الارتفاع: 650

    • الحقول: قم بتغيير اللوحة لتعكس CustomerNumber فِي لوحة البيانات (وبدلاً من ذلك، يمكنك تحديد تسمية العنوان داخل المعرض وتغيير الخاصية Text إلى ThisItem.CustomerNumber)

    • حذف أيقونة NextArrow (حدّدها من داخل المعرض)

  8. في المعرض، حدّد قلم التحرير المحاط بدائرة فِي المعرض أو تسمية اللوحة، واستخدم علامة التبويب إدراج لإضافة أيقونة. ابحث عن أيقونة ‏‫المهملات وقم بتحديدها. انقل أيقونة سلة المهملات إلى الجانب الأيسر من المعرض.

    يتضمن معرضك الآن أيقونة سلة المهملات.

    لقطة شاشة للمعرض مع عرض أيقونات سلة المهملات.

  9. حدّد أيقونة سلة المهملات والمعادلة الواردة أدناه إلى خاصية OnSelect:

    Remove(colCustomer,ThisItem)

  10. اضغط مع الاستمرار على مفتاح Alt، وحدّد أيقونة سلة المهملات الأولى.

    يؤدي هذا إلى حذف الصف المحدّد من المجموعة. أثناء عمل هذه العملية، ربما تريد إعطاء رسالة تحذير بأنه سيتم حذف الصف.

    بتوظيف متغيّر سياقي، لنقم بإنشاء تحذير منبثق لإبلاغ المستخدم بتعليق الحذف ومنحه خيارًا للإلغاء.

  11. قم أولاً بتغيير OnSelect لأيقونة سلة المهملات إلى الآتي:

    UpdateContext({varPopup:true})

  12. لإنشاء القائمة المنبثقة، حدّد الشاشة (خارج عنصر تحكم المعرض) واستخدم إدراج لإضافة مستطيل (يمكنك إدخال "مستطيل" فِي مربع البحث فِي القائمة إدراج للعثور عليها سريعاً).

  13. اجعل خصائص المستطيل على النحو التالي:

    • Name: rectangle_backgrd

    • Size: 744 (العرض)؛ 720 (الارتفاع)

    • Fill: RGBA(166, 166, 166, .50)

    ضع المستطيل بحيث يغطي معرض الصور لديك.

  14. أضف مستطيلاً آخر وقم بتحديث خصائصه إلى:

    • الاسم: rectangle_foregrd

    • الحجم: 744 (العرض)؛ 348 (الارتفاع)

    • تعبئة:‏ RGBA‏(255, 255, 255, 1)

    • BorderThickness: 1

    ضع هذا المستطيل بحيث يتناسب مع الجزء العلوي من المستطيل الآخر.

  15. حدّد إدراج>تسمية النص.

  16. قم بإجراء التغييرات التالية على خصائص تسمية النص:

    • الاسم: lbl_popup

    • حجم الخط: 15

    • عرض الخط: غامق

    • محاذاة النص: توسيط

  17. قم بتعيين النص الخاص بـ lbl_popup إلى المعادلة الواردة أدناه:

    varUserDisplayName & "
    Please click Delete to confirm deletion of Invoice#" & " " & Gallery1.Selected.InvoiceNumber
    
  18. حدّد إدراج>الزر وقم بتسمية الزر الجديد الخاص بك: button_Delete؛ وتعيين خاصية Text الخاصة به إلى: Delete

  19. حدّد الخاصية Delete ButtonOnSelect إلى ما يلي:

    Remove(colCustomer,LookUp(colCustomer,CustomerNumber=Gallery1.Selected.CustomerNumber));
    UpdateContext({varPopup:false})
    
  20. حدّد إدراج>الزر وقم بتسمية الزر الجديد: button_Cancel؛ وتعيين خاصية Text الخاصة به إلى: إلغاء

  21. قم بتعيين خاصية Cancel Button OnSelect إلى:

    UpdateContext({varPopup:false})

  22. قم بترتيب عناصر التحكم الجديدة التي قمت بإنشائها أعلى Gallery1 كما يلي:

    لقطة شاشة لأزرار الحذف والإلغاء.

  23. الآن لنقم بتحديد كافة عناصر التحكم هذه معًا حتى يمكننا تجميعها. أثناء الضغط باستمرار على مفتاح Ctrl، حدّد عناصر التحكم التالية:

    • rectangle_backgrd

    • rectangle_foregrd

    • lbl_popup

    • button_Delete

    • button_Cancel

  24. مع تحديدها بالكامل، انقر بزر الماوس الأيمن وحدّد مجموعة. قم بتعيين الخاصية Visible الخاصة بـ Group1 إلى:

    varPopup

    وهذا يجب أن يجعل عناصر التحكم كلها تختفي من الشاشة، ولكن إذا لم يتم ذلك، فاضغط باستمرار على المفتاح Alt وحدّد الزر Cancel.

    لقد أنشأت مربعاً منبثقاً يحذف العميل المحدّد من المعرض.

    دعونا نختبر دالة Delete.

  25. اضغط مع الاستمرار على مفتاح Alt، وحدّد أيقونة سلة المهملات للفاتورة invoice# INV29595.

  26. حدّد الزر حذف، تتم إزالة INV29595 من المعرض وتختفي قائمتك المنبثقة.

  27. الآن اضغط مع الاستمرار على مفتاح Alt مرة أخرى، وحدّد أيقونة سلة المهملات للفاتورة invoice# INV74302.

  28. في هذه المرة، حدّد زر Cancel. سيتم إغلاق النافذة المنبثقة ويظهر INV74302 فِي المعرض.

قمنا بإنشاء مجموعة ديناميكية، وإنشاء متغير عمومي وإنشاء نافذة منبثقة تستخدم متغيرًا سياقيًا.