التَمرين - إضَافَة Compare Screen

مكتمل

الشَاشة الثَانية حيث يقَارن المستخدمون الأجهزة المحددة ثم يختَارون الجهَاز الذي يريدون إرسَاله للمُوَافقة. تتضمن هذه الشَاشة:

• زر الرجوع للعودة إلى الشَاشة الرئيسية.

• قَائمة بالأجهزة المختَارة للمقَارنة (تم ترحيلهَا مِن الشَاشة الرئيسية).

• تفَاصيل أخرى لكل جهَاز.

• تسليط الضوء عَلى الجهَاز المحدد.

في تدريب عملي لاحق، تقوم بإنشَاء جدَاول قَاعدة البيَانَات لتخزين طلبات الجهَاز، وإضَافَة نموذج تحرير إلى هذه الشَاشة لإدخَال معلومَات إضَافية، ثم إرسَال الطلب.

‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫ملاحظة‬

لإكمَال التمَارين، ستحتَاج إلى استخدَام بعض الملفَات. قم بتنزيل ملفَات App in a Day لاستخدَامهَا فِي هَذه الوحدَة. تتضمن مجلدَات الملفَات الموجودة فِي هَذَا التنزيل:

• الوحدَات النمطية المكتملة مَع التعليمَات - حزم الملفَات لاستيرَاد خطوَات التَمرين المكتملة.
• Machine-Order-Data.xlsx - الملف المستخدم فِي التمَارين.

القسم 1: إضَافَة شَاشة

مهمتك الأولى هي إضَافَة شَاشة جَديدة باتباع الخطوَات التَالِية:

1. من جزء طريقة عرض الشجرة، حدد + شَاشة جَديدة، ثم اختر فَارغ.

   

2. إعَادة تسمية الشَاشة إلى Compare Screen.

   

3. من جزء طريقة عرض الشجرة، حدد Main Screen، وبَعد ذلك، حدد القَائمة المنسدلة + إدرَاج. قم بتوسيع المجموعة الشَائعة، ثم اختر الزر.

   

4. أعد تسمية زر ضمن جزء طريقة عرض الشجرة إلى btnCompare.

5. حدد btnCompare فِي جزء طريقة عرض الشجرة.

6. قم بتعيين خَاصية Text للزر إلى مَا يلي:

   "Compare " & CountRows(CompareList) & " item(s)"

   

7. قم بتعيين قيمة Fill لـ Compare Button إلى Color.Black.

8. قم بتعيين قيمة X لـ Compare Button إلى 1130.

9. قم بتعيين قيمة Y لـ Compare Button إلى 720.

10. قم بتعيين قيمة Width لـ Compare Button إلى 220.

11. قم بتعيين قيمة Height لـ Compare Button إلى 40.

12. قم بتعيين الخَاصية DisplayMode لـ Compare Button إلى المعادلة التَالِية. تعمل معادلة Power Fx هذه عَلى تعطيل زر إذَا لم يتم تَحديد أي عنَاصر وستقوم بتمكينه إذَا تم تَحديد عنصر وَاحد عَلى الأقل.

    If(CountRows(CompareList) > 0, DisplayMode.Edit, DisplayMode.Disabled)

13. حدد btnCompare، ودَاخل جزء Properties، قم بتعيين نصف قطر الحدود إلى 0.

    

14. حدد btnCompare ثم انسخه بالضغط عَلى اختصَار لوحة المفَاتيح Ctrl+C.

15. الصق الزر الموجود عَلى نفس الشَاشة باستخدًام اختصَار لوحة المفَاتيح Ctrl+V.

16. ‏‫أعد تسمية الزر الجَديد باسم btnClear.

17. قم بتعيين قيمة X الخَاص بـ btnClear إلى 210. تأكد مِن تعيين قيمة Y الخَاصة بـ btnClear إلى 720.

    

18. قم بتغيير قيمة Text الخَاصة بالزر btnClear إلى "Clear Selection".

19. قم بتعيين قيمة OnSelect لـ Clear Button إلى المعادلة التَالِية. تزيل معادلة Power Fx هذه جميع العنَاصر فِي مجموعة CompareList.

    Clear(CompareList)

    

20. حدد btnCompare، ثم قم بتغيير قيمة OnSelect إلى المعادلة التَالِية:

    Navigate('Compare Screen')

    

21. حدد معَاينة التطبيق.

22. حدد جهَازين، وحدد زر مقَارنة، ثم تحقق مِن أنه ينقلك إلى الشَاشة الثَانية.

    

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

    

24. حدد Main Screen فِي طريقة عرض الشجرة.

25. حدد بشكل متعدد imgLogo وlblUser وlblHeader مِن جزء طريقة عرض الشجرة. انقر بزر المَاوس الأيمن وحدد مجموعة.

    

26. أعد تسمية المجموعة باسم Header.

27. حدد زر علامة الحذف (...) لـ Header وبَعد ذلك، حدد نسخ.

    

28. انقر بزر المَاوس الأيمن فوق الخيَار Compare Screen وبَعد ذلك، حدد لصق.

    

    يجب أن يكون Header الموجود فِي Compare Screen مشَابهًا للصورة التَالِية.

    

29. أعد تسمية عنصر التحكم لـ Header المنسوخ وعنَاصر التحكم الفرعية لـ Header المنسوخة لمطَابقة لقطة الشَاشة أدنَاه.

    

30. انسخ galMachine مِن Main Screen ثم الصقه فِي Compare Screen.

31. أعد تسميه المعرض فِي Compare Screen باسم galCompareList.

32. قم بتعيين قيمة X لـ Compare List Gallery إلى 0.

33. قم بتعيين قيمة Width لـ Compare List Gallery إلى 840.

34. قم بتعيين قيمة Height لـ Compare List Gallery إلى 708.

    يجب أن تشبه Compare Screen الآن الصورة التَالِية.

    

    ‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫ملاحظة‬

    إذَا عُرِض جهَاز وَاحد فقط عَلى Compare Screen، فَانتقل إلى Main Screen ثم ارجع إلى Compare Screen مِن أجل تحديث النتَائج.

القسم 2: إعدَاد المعرض

في هذه المهمة، تقوم بإعدَاد المعرض لإظهَار الأجهزة التي تم تَحديدهَا مِن معرض المقَارنة عَلى Main Screen.

1. حدد galCompareList الجَديد مِن جزء طريقة عرض الشجرة.

2. دَاخل جزء Properties، قم بتغيير عدد الرزم إلى 1.

   

3. حدد Items مِن القَائمة المنسدلة لقيمة الخَاصية، ثم قم بتغيير القيمة دَاخل شريط المعادلة إلى CompareList.

سيعرض المعرض الآن العنَاصر المحددة مِن Main Screen.

القسم 3: إزَالة عنَاصر تحكم وإضَافتهَا إلى المعرض

في Compare Screen، أنت تحدد عنصرًا معينًا للحصول عَلى المُوَافقة، لذَا لا تحتَاج إلى خَانة اختيَار Compare.

1. من دَاخل galCompareList فِي جزء طريقة عرض الشجرة، حدد خَانة الاختيَار Compare، ثم اضغط عَلى المفتَاح Delete لحذف خَانة الاختيَار.

2. أضف تسمية جَديدة لعرض سمَات أخرى حول الجهَاز. الطريقة هي النسخ وَاللصق. حدد التسمية الأولى فِي المعرض التي تعرض اسم الجهَاز. انسخ التسمية (Ctrl+C)، ثم الصق هذه التسمية (Ctrl+V). أعد تسمية هذه التسمية إلى lblItemFeature حتى تتمكن مِن التعرف عليهَا بسهولة لاحقًا.

3. انقل الملصق الجَديد بحيث يكون أقل مِن السعر.

عَادةً مَا نقوم بتحرير قيمة Text لكل تسمية فردية يدويًا فِي جزء الخصَائص، ولكن مَع ميزة الإجرَاءَات المضمنة فِي galCompareList، يمكننَا إجرَاء هذه التغييرَات مباشرةً فِي اللوحة.

1. مَع تحديد galCompareList فِي طريقة عرض الشجرة، حدد خيَار الحقول الموجود أعَلى المعرض

   

2. حدد القَائمة المنسدلة lblItemFeature وَاختر الميزة. يؤدي هَذَا إلى تغيير القيمة النصية لـ lblItemFeature إلى ThisItem.Feature.

   

3. استخدم شريط أدوَات الشريط فِي أعَلى الصَفحَة لتغيير عرض الخط لـ lblItemFeature مِن Semibold إلى Normal. بَعد ذلك، قم بتغيير الخَاصية Size إلى 14.

   

4. انسخ هذه التسمية وَالصقهَا ثم انقل التسمية الرَابعة الجَديدة أسفل التسمية الثالثة وأعد تسميتهَا إلى lblAvgCups/Week.

5. باستِخدَام ميزة الإجرَاءَات المضمنة، قم بتَحديد galCompareList فِي طريقة عرض الشجرة، ثم حدد خيَار الحقول فِي الشريط أعَلى المعرض، وقم بتغيير قيمة النص lblAvgCups/Week إلى Avg. Cups/Week

   

6. كرر الخطوَات السَابقة لإضَافَة مربعَات نص لعرض خصَائص الجهَاز الأخرى، القيمة Avg. Espressos/Week، وDescription. يمكنك تخصيص التسميَات عن طريق تغيير الخصَائص Size وColor وFill وFont Weight.

7. حدد التسمية Description دَاخل المعرض.

8. قم بتغيير الحجم فِي Description إلى 12.

9. قم بتغيير قيمة AutoHeight، الموجود دَاخل جزء الخصَائص، مِن Description، إلى On.

10. قم بإجرَاء تَحديد متعدد لجميع التسميَات النصية دَاخل المعرض دَاخل جزء طريقة عرض الشجرة.

    

    ‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫ملاحظة‬

    دَاخل الصورة أعلاه، ستلاحظ أنه تمت إعَادة تسمية كل تسمية لتتوَافق مَع الغرض مِن التسمية دَاخل التطبيق.

11. انتقل إلى جزء الخصَائص وقم بتعيين محَاذَاة النص إلى محَاذَاة إلى اليسَار.

    

يجب أن يشبه المعرض الآن الصورة التَالِية.

‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫ملاحظة‬

لتوفير الوقت فِي هَذَا التدريب العملي، يمكنك إضَافَة خَاصية أو اثنتين مِن هذه الخصَائص الإضَافية ثم تخطي إضَافَة خصَائص الجهَاز الأخرى.

القسم 4: تمييز الجهَاز المحدد

لتمييز الجهَاز المحدد، اتبع الخطوَات التَالِية:

1. حدد galCompareList.

2. مَع تَحديد المعرض، قم بتعيين الخَاصية TemplateFill إلى:

   If(ThisItem.IsSelected,ColorFade(lblHeaderCS.Fill,75%))

   

   عِند إنشَاء معَادلة معقدة، قد يكون مِن المفيد استخدَام ميزة اطلب مِن Copilot شرح هذه المعَادلة لـ Power Apps. عَلى الجَانب الأيسر مِن شريط المعَادلة، حدد شعَار Copilot، ثم حدد شرح هذه المعَادلة ضمن اطلب مِن Copilot... وظيفة شرح هذه المعَادلة التي تستفيد مِن Copilot للمسَاعدة فِي شرح الغرض مِن المعَادلة ووظيفتهَا.

   

   توضح ميزة شرح هذه المعَادلة أن المعَادلة تغيّر لون تعبئة lblHeaderCS إلى 75% عِند تَحديد الصنف

   يمكنك تعيين لون معين أو قيمة RGB، لكننَا نوصي باستِخدَام دَالة ColorFade لتتطَابق مَع عنوَان الرأس مَع تلاشي 75 بالمَائة. إذَا قمت بتغيير لون تعبئة تسمية الرأس، فسيتم تغيير لون تعبئة القَالب هَذَا تلقَائيًا.

3. أثنَاء الضغط عَلى مفتَاح Alt، حدد عنصرًا مختلفًا فِي المعرض. لاحظ أنه تم تمييز العنصر المحدد بلون رمَادي فَاتح.

القسم 5: إضَافَة أيقونة للانتقَال إلى الشَاشة الأولى

في هذه المهمة، تضيف رمزًا للانتقَال إلى الشَاشة الأولى.

1. حدد Compare Screen.

2. حدد القَائمة المنسدلة + إدرَاج، وَابحث عن left، ثم اختر الرمز الأيسر.

   

3. قم بتعيين Color للرمز الذي أضفته إلى Color.Gray.

4. قم بتعيين X للرمز إلى 220.

5. قم بتعيين Y للرمز إلى 5.

6. قم بتعيين Width للرمز إلى 50.

7. قم بتعيين Height للرمز إلى 50.

8. قم بتعيين إجرَاء OnSelect للأيقونة عَلى Back()، وَالذي سيؤدي إلى إعَادة التنقل إلى الشَاشة السَابقة.

   

تحسين اختيَاري لوَاجهة المستخدم

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

القسم 6: اختبار التطبيق

حدد حفظ لحفظ التطبيق الخَاص بك. من الجيد حفظ تطبيقك بانتظَام. يمكنك أيضًا اختبار تطبيقك مباشرةً عَلى اللوحة القمَاشية عن طريق الضغط باستمرَار عَلى مفتَاح Alt لتنشيط الأزرَار وعنَاصر التحكم الأخرى ثم النقر نقرًا مزدوجًا للكتَابة فِي عنَاصر التحكم.

1. انتقل إلى Main Screen وقم بمعَاينة التطبيق عن طريق تَحديد زر التشغيل فِي الجزء العلوي الأيمن.

2. امسح أي أجهزة محددة، إذَا لزم الأمر.

3. حدد أحد أنوَاع الأجهزة.

4. حدد خَانة الاختيَار مقَارنة فِي عدد قليل مِن الأجهزة عَلى الشَاشة الرئيسية.

5. حدد زر المقَارنة للذهَاب إلى شَاشة المقَارنة.

6. المس أو حدد جهَازًا مختلفًا فِي المعرض، ثم تحقق مِن عمل تمييز التَحديد.

7. حدد زر "رجوع" ثم قم بالتأكيد عَلى العودة إلى الشَاشة الرئيسية.

   

8. حدد Clear Selection.

   

   يجب مسح CompareList كمَا يجب تعطيل زر Compare.

   

9. أغلق الإصدَار الأولي.

القسم 7: اختبر التطبيق عَلى جهَاز محمول

تهَانينَا، لقد قمت بإنشَاء تطبيق اللوحة Power Apps الخَاص بك. الآن، يمكنك نشره وَاختباره عَلى جهَاز محمول.

1. حدد زر نشر فِي الزَاوية العلوية اليمنى مِن الشَاشة.

   

2. حدد نشر هَذَا الإصدَار فِي المطَالبة بالتأكيد.

   

   ينشر هَذَا الإجرَاء أحدث إصدَار محفوظ مِن التطبيق.

3. انتقل إلى تطبيق متجر التَطبِيقَات بجهَازك. ابحث عن Power Apps وقم بتثبيت تطبيق Power Apps. قم بتشغيل التطبيق.

4. عِند بدء تشغيل التطبيق، يطَالبك ببيَانَات اعتمَاد حسَاب عملك أو مدرستك. قم بتسجيل الدخول بنفس الحسَاب الذي استخدمته لإنشَاء تطبيق Power Apps. يجب أن يظهر التطبيق الذي قمت بإنشَائه فِي قَائمة التَطبِيقَات. حدد تشغيل التطبيق.

الميزة الجَديدة: الحضور المشترك فِي استوديو اللوحة

يسر Microsoft أن تعلن عن إطلاق التوفر العَام للحضور المشترك دَاخل Power Apps Studio وَالذي يسمح لك بالتعَاون مَع الآخرين فِي تَطبِيقَات اللوحة. يدعم الحضور المشترك محررًا وَاحدًا فقط فِي كل مرة، ولكن يمكن للمنشئين الآخرين الدخول إلى تطبيق اللوحة كقرَاء فِي وضع القرَاءة فقط. ويتيح هَذَا للقرَاء تصَحِيح أخطَاء الرموز ومرَاجعة الشَاشَات وَالتفَاعل مَع التعليقَات معًا فِي نفس جلسة العمل. لا يلزم تشغيل هذه الميزة لأنهَا ممكّنة بالفعل افترَاضيًا لسهولة الاستخدَام.

فيمَا يلي مزَايَا استخدَام الحضور المشترك دَاخل استوديو لوحة Power Apps:

• يُسمح بمحرر وَاحد فقط، ولكن يمكن للمنشئين الآخرين الآن الوصول إلى التطبيق دَاخل استوديو لوحة Power Apps فِي وضع القرَاءة فقط.
• يتم عرض رموز وأسمَاء الأشخَاص الذين لديهم التطبيق مفتوحًا مَع مؤشرَات لإظهَار مِن يقوم بتحرير التطبيق ومن يشَاهده.
• يتم عرض تسميَات القرَاءة فقط للإشَارة إلى المنشئين الذين هم فِي وضع القرَاءة فقط.
• أثنَاء الوجود فِي وضع القرَاءة فقط، يتلقى المنشئون إشعَارًا بالتغييرَاتٍ المحفوظة التي تم إجرَاؤهَا مِن المحرر الحَالي. بَعد ذلك، ستتم مطَالبتهم بتحديث التطبيق للبقَاء عَلى اطلاع دَائم بأحدث إصدَار حتى لا يفقدوَا العمل أو يستبدلوَا أعمَال الآخرين لاحقًا.

‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫ملاحظة‬

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

تُظهر الصورة أدنَاه الشكل الذي ستبدو عليه اللوحة إذَا كنت تشَاهد التطبيق فِي وضع القرَاءة فقط.

1. في الجزء العلوي مِن الشَاشة، يمكنك معرفة مَا إذَا كنت فِي وضع التحرير أو وضع القرَاءة فقط. يمكنك هنَا أيضًا مشَاهدة كل مِن يشَاهد لوحة التطبيق حَاليًا.

2. دَاخل جزء طريقة عرض الشجرة فِي اللوحة، يمكنك رؤية الشَاشة التي يشَاهدهَا الجميع دَاخل التطبيق.

   

‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫ملاحظة‬

لمزيد مِن المعلومَات، رَاجع الحضور المشترك.