الفصل الثالث: بناء نموذج أولي منخفض التعليمات البرمجية

ملاحظة

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

تشك "كيانا" في الحلول منخفضة التعليمات البرمجية و Power Apps. ومع ذلك، قررت "كيانا" و"ماريا" إنشاء تطبيق معًا لمساعدة الفنيين الميدانيين على فحص المخزون (وأجزاء الأمر، إذا لزم الأمر)، والاستعلام عن قاعدة المعرفة، والتحقق من موعدهم التالي أثناء تواجدهم خارج المكتب في مكالمات الخدمة. تخطط كل من "كيانا" و"ماريا" لاستخدام هذه التجربة لاستكشاف كيفية إضافة عناصر التحكم واستخدام الصيغ في Power Apps.

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

العنصر 1: إدارة المخزون الميداني

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

لدى "ماريا" إلمام كامل بنظام إدارة المخزون الحالي وتفهم المعلومات التي يتضمنها. تبدأ "ماريا" بإنشاء مصنف Excel يحتوي على جداول تتضمن بيانات مزيفة مع تفاصيل لبعض عينات القطع. الحقول في الجدول هي المعرف والاسم وCategoryID والسعر ونظرة عامة وNumberInStock والصورة (عنوان URL يشير إلى صورة القطعة). يمكن استخدام هذا المصنف لإنشاء تطبيق اللوحة واختباره، للتأكد من أنه يعرض البيانات المطلوبة بشكل صحيح. تخزن "ماريا" هذا المصنف في حساب OneDrive بالاسم BoilerParts.xlsx.

ملاحظة

يمكنك العثور على نسخة من هذا المصنف في مجلد الأصول في مستودع Git لهذا الدليل.

إذا كنت مصمم قاعدة بيانات علائقية، فستلاحظ أن مصنف Excel يقدم طريقة عرض غير موحدة للبيانات. على سبيل المثال، في قاعدة بيانات علائقية، قد يكون CategoryID على الأرجح معرفًا رقميًا يشير إلى جدول منفصل يحتوي على تفاصيل الفئة، بما في ذلك الاسم.

ملاحظة

عناوين URL في عمود الصورة هي في الوقت الحالي مجرد عناصر نائبة. في التطبيق المكتمل، سيتم استبدال عناوين URL هذه بعناوين ملفات الصور الحقيقية.

اتبع هذه الخطوات لإنشاء التطبيق باستخدام Power Apps.

1. قم بتسجيل الدخول إلى Power Apps.

2. في الصفحة الرئيسية، ضمن بدء من البيانات، حدد Excel Online.

   

3. في صفحة الاتصالات، حدد OneDrive for Business، ثم حدد إنشاء.

   

4. في صفحة OneDrive for Business، حدد الملف BoilerParts.xlsx.

   

5. حدد الجدول في ملف Excel (أنشأت "ماريا" الجدول باستخدام الاسم الافتراضي، Table1)، ثم حدد اتصال.

   

6. انتظر ريثما ينشئ Power Apps التطبيق.

   

7. عند إنشاء التطبيق، سترى شاشة الاستعراض وهي تعرض الحقول CategoryID والمعرف والصورة من كل صف من صفوف جدول القطع في المصنف.

   

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

   ملاحظة

   في الصورة التالية، تغيّرت التسمية مبادل حراري المعروضة في الأصل على النموذج إلى اسم المنتج، سخان 3.5 W/S.

   

9. كرر الخطوة السابقة لتسميات المعرف والصورة. غيّر خاصية النص لحقل المعرف إلى CategoryID، وخاصية النص‏‎ لحقل الصورة إلى نظرة عامة. ينبغي أن تبدو الآن شاشة الاستعراض مماثلة للصورة التالية، والتي من المرجح أن يجدها المهندس الميداني مفيدة أكثر لتحديد القطع.

   

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

    **SortByColumns(Search([\@Table1], TextSearchBox1.Text, "CategoryID","ID","Image"), "CategoryID", If(SortDescending1, Descending, Ascending))
    

    

11. غيّر التعبير بحث للإشارة إلى الحقول الاسم وCategoryID ونظرة عامة باستخدام الصيغة التالية:

    SortByColumns(Search([\@Table1], TextSearchBox1.Text, "Name", "CategoryID", "Overview"), "Name", If(SortDescending1, Descending, Ascending))
    

12. العنوان في رأس النموذج غير مفيد، ولا يتطابق النسق الافتراضي مع شكل وأسلوب عرض شركة VanArsdel. في شاشة الاستعراض، حدد التسمية Table1 وعلى شريط الصيغة، غيّر خاصية النص للتسمية إلى "استعراض القطع" (يجب تضمين علامات الاقتباس المزودة في القيمة).

13. في شريط الأدوات، حدد النسق (قد تحتاج إلى توسيع شريط الأدوات لعرض المزيد من العناصر)، ثم حدد نسق الغابة. ستتغير ألوان وأنماط شاشة الاستعراض بحيث تتطابق مع النسق.

    

جعل شاشة التفاصيل أكثر فائدة

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

1. في جزء طريقة عرض الشجرة، قم بالتمرير لأسفل وحدد DetailScreen1. تعرض هذه الشاشة تفاصيل حول القطعة التي يحددها المستخدم على شاشة الاستعراض.

   

2. في رأس شاشة التفاصيل في الجزء الأوسط، حدد التسمية Table1. في الجزء الأيمن، على علامة التبويب خصائص، غيّر خاصية النص إلى تفاصيل القطع.

   ملاحظة

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

   

3. في جزء طريقة عرض الشجرة، أسفل DetailScreen1، حدد DetailForm1. في الجزء الأيمن، من علامة التبويب خصائص، حدد تحرير الحقول بجوار الحقول. في الجزء الأوسط، حدد الحقول واسحبها حتى تظهر بالترتيب التالي، من الأعلى إلى الأسفل:

   • الاسم
   • CategoryID
   • نظرة عامة‬
   • السعر
   • NumberInStock
   • الصورة
   • البطاقة/رقم البطاقة

   

4. حدد حقل المعرف، وحدد علامة القطع التي تظهر على الجانب الأيمن من الحقل، ثم حدد إزالة من القائمة المنسدلة التي تظهر. هذا الإجراء يزيل حقل المعرف من النموذج.

   

5. في جزء طريقة عرض الشجرة، أسفل DetailForm1، حدد CategoryID_DataCard1. هذا العنصر هو عنصر تحكم DataCard يعرض اسم حقل (يسمى المفتاح) وقيمته.

   

   في الجزء الأيمن، من علامة التبويب متقدم، حدد إلغاء التأمين لتغيير الخصائص. في قسم البيانات، قم بتغيير الحقل DisplayName‎ إلى "الفئة" (مع تضمين علامات الاقتباس).

   ملاحظة

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

   

6. كرر الخطوة السابقة لتغيير مفتاح NumberInStock_DataCard1 إلى "الرقم في المخزون" (مع تضمين علامات الاقتباس).

7. يلزمك ضبط تنسيق حقل السعر لعرض البيانات كقيمة عملة. في جزء طريقة عرض الشجرة، أسفل DetailForm1، اسفل Price_DataCard1، حدد DataCardValue7. هذا هو الحقل الذي يعرض قيمة حقل السعر. في الجزء DataCardValue7 إلى اليمين، على علامة التبويب خيارات متقدمة، غيّر خاصية النص إلى Text(Value(Parent.Default), "[$-en-US]$ ###,##0.00")

   

   يشير التعبير Parent.Default إلى عنصر البيانات الذي يرتبط به عنصر التحكم الأصلي (DataCard)—في هذه الحالة، عمود السعر. تعمل دالة النص على إعادة تنسيق هذه القيمة باستخدام التنسيق المحدد على أنه الوسيطة الثانية؛ وفي هذا المثال، هذه هي العملة المحلية التي تتضمن منزلتين عشريتين.

8. يجب أن تعرض بطاقة بيانات الصورة صورة من القطعة بدلاً من عنوان URL لملف الصورة. في جزء طريقة عرض الشجرة، أسفل DetailForm1، أسفل الصورة_DataCard1، حدد DataCardValue3، ثم حدد إزالة لإزالة عنصر التحكم هذا.

9. حدد الصورة_DataCard1. في الجزء الأيسر، حدد + إدراج. في الجزء إدراج، قم بتوسيع الوسائط، ثم حدد صورة.

   

10. عد إلى جزء طريقة عرض الشجرة، وتأكد من إضافة عنصر تحكم النص Image1 إلى عنصر التحكم الصورة_DataCard1.

    

11. في جزء طريقة عرض الشجرة، حدد الصورة_DataCard1. في الجزء الأيمن، من علامة التبويب خيارات متقدمة، غير الارتفاع إلى 500، للسماح بعرض مساحة كافية للصورة.

    

12. في جزء طريقة عرض الشجرة، حدد Image1‎. قم بتعيين الخصائص التالية:

    • الصورة: Parent.Default
    • ImagePosition: ImagePosition.Fit
    • العرض: 550
    • الارتفاع: 550

    ملاحظة

    الصورة المعروضة فارغة حاليًا لأن عنوان URL في مصنف Excel هو مجرد عنصر نائب. سوف تعالج هذه المشكلة وتحضر عنوان URL حقيقيًا، عندما تربط التطبيق بواجهة API الويب في فصل لاحق.

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

1. في جزء طريقة عرض الشجرة، حدد EditScreen1‎. حدد زر علامة القطع، ثم حدد حذف لإزالة هذه الشاشة.

   

2. في جزء طريقة عرض الشجرة، حدد DetailsScreen1‎. لاحظ أن Power Apps Studio يعرض رسالة خطأ لهذه الشاشة. يحدث هذا الخطأ بسبب احتواء DetailsScreen1 على تعابير تشير إلى الشاشة EditScreen1، التي لم تعد موجودة.

3. في رأس DetailsScreen1، حدد أيقونة القلم (IconEdit1). تحتوي الخاصية OnSelect لعنصر التحكم هذا على التعبير EditForm(EditForm1);Navigate(EditScreen1, ScreenTransition.None). عند تحديد الأيقونة تحرير، يتم تشغيل هذا التعبير ويحاول الانتقال إلى شاشة EditScreen1.

   

4. في جزء طريقة عرض الشجرة، حدد IconEdit1، ثم حدد حذف‏‎. لم تعد هذه الأيقونة مطلوبة.

5. حدد IconDelete1، ثم حدد حذف‏‎. تُستخدم هذه الأيقونة لحذف القطعة الحالية، وهي غير مطلوبة أيضًا.

   

6. لاحظ اختفاء النص تفاصيل القطع من رأس الشاشة، ويعرض Power Apps Studio رسالة خطأ بدلاً من ذلك. حدث ذلك بسبب حساب عرض عنصر تحكم التسمية الذي يعرض النص. في جزء طريقة عرض الشجرة، حدد LblAppName2‎. افحص خاصية العرض. قيمة هذه الخاصية هي نتيجة التعبير Parent.Width - Self.X - IconDelete1.Width - IconEdit1.Width.

   

7. غيّر تعبير خاصية العرض إلى Parent.Width - Self.X. ينبغي أن يختفي الخطأ، ويجب أن يظهر نص تفاصيل القطع في رأس الشاشة.

8. في جزء طريقة عرض الشجرة، حدد BrowseScreen1‎. ستعرض هذه الشاشة أيضًا رسالة خطأ. تسمح الأيقونة + على شريط الأدوات (IconNewItem1) للمستخدم بإضافة قطعة جديدة. تشير الخاصية OnSelect لهذه الأيقونة إلى الشاشة EditScreen1.

   

9. حدد IconNewItem1، ثم حدد حذف‏‎. كما في السابق، يختفي النص الذي يظهر في رأس الشاشة وتظهر رسالة خطأ، وللسبب نفسه.

10. في جزء طريقة عرض الشجرة، أسفل BrowseScreen1، حدد LblAppName1. قم بتعديل تعبير خاصية العرض عن طريق إزالة المرجع إلى IconNewItem1.Width. يجب أن يكون التعبير الجديد Parent.Width - Self.X - IconSortUpDown1.Width - IconRefresh1.Width.

    

11. لا تزال هناك مشكلة في الرأس. على الرغم من معاودة ظهور النص استعراض القطع، تظهر رسالة خطأ وتوجد أيقونة التحديث وأيقونة الفرز في مكان غير صحيح. في جزء طريقة عرض الشجرة، حدد IconSortUpDown1‎. ابحث عن الخاصية X عنصر التحكم هذا. تحدد هذه الخاصية الموضع الأفقي للأيقونة في الرأس. يتم حسابه في الوقت الحالي بالاستناد إلى عرض عنصر التحكم IconNewItem1.

    

12. غيّر تعبير الخاصية X إلى Parent.Width - Self.Width.

13. في جزء طريقة عرض الشجرة، حدد IconRefresh1‎. غيّر تعبير الخاصية X إلى Parent.Width - IconSortUpDown1.Width - Self.Width. يجب أن تختفي جميع الأخطاء.

حفظ التطبيق واختباره

يمكنك الآن حفظ التطبيق واختباره.

1. حدد ملف > حفظ باسم.

2. ضمن حفظ باسم، حدد السحابة، وأدخل الاسم VanArsdelApp، ثم حدد حفظ.

   

3. حدد السهم للخلف للعودة إلى الشاشة الرئيسية.

   

4. حدد F5 لمعاينة التطبيق. في صفحة استعراض القطع، حدد قوس الزاوية الأيمن (>) إلى يمين أي قطعة. تظهر شاشة التفاصيل الخاصة بالقطعة.

   

5. حدد قوس الزاوية الأيسر (<) في شاشة التفاصيل للعودة إلى شاشة الاستعراض.

6. في شاشة استعراض القطع، أدخل نصًا في مربع البحث. بينما تكتب، ستتم تصفية العناصر فقط لإظهار تلك التي لديها نص مطابق في الحقول الاسم أو CategoryID أو نظرة عامة.

   

7. أغلق نافذة المعاينة ثم عد إلى Power Apps Studio.

العنصر 2: قاعدة المعارف الميدانية

للوصول إلى قاعدة المعارف، تتصور "ماريا" و"كاليب" (الفني) واجهة بسيطة حيث يقوم المستخدم بإدخال مصطلح البحث ويعرض التطبيق جميع مقالات قاعدة المعارف التي تشير إلى المصطلح. تعلم "ماريا" أن هذه العملية سوف تشتمل على Azure Cognitive Search، ولكنها لا تحتاج إلى—أو حتى تريد—معرفة كيف يعمل. لذلك، قررت "ماريا" توفير واجهة المستخدم الأساسية والعمل مع "كيانا" لاحقًا لإضافة الوظيفة الفعلية.

تقرر "ماريا" إنشاء شاشة جديدة استنادًا إلى قالب القائمة المتوفر في Power Apps Studio.

1. في شريط أدوات الشاشة الرئيسية في Power Apps Studio، حدد شاشة جديدة، ثم حدد القائمة.

   

2. في رأس الشاشة، حدد التسمية التي تعرض النص [Title]. غيّر خاصية النص إلى "استعلام" (مع تضمين علامات الاقتباس).

   

3. في رأس الشاشة، حدد علامة الجمع (+)، ثم حدد حذف. تهدف الأيقونة + إلى تمكين المستخدم من إضافة مزيد من العناصر إلى القائمة. قاعدة المعارف هي للاستعلام فقط، لذلك لا حاجة إلى هذه الميزة.

   

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

4. في جزء طريقة عرض الشجرة، قم بالتمرير لأسفل إلى القسم ‎Screen1، وحدد LblAppName3. غيّر خاصية العرض Width إلى الصيغة Parent.Width - LblAppName3.X - IconSortUpDown2.Width - IconRefresh2.Width.

   

5. في جزء طريقة عرض الشجرة، حدد IconSortUpDown2‎. قم بتعديل الخاصية X للصيغة Parent.Width - IconSortUpDown2.Width.

6. في جزء طريقة عرض الشجرة، حدد IconRefresh2‎. قم بتعديل الخاصية X إلى Parent.Width - IconSortUpDown2.Width - IconRefresh2.Width. من المفترض أن يؤدي ذلك إل حل كافة الأخطاء التي تحدث في الشاشة.

7. حدد ملف > حفظ.

8. في مربع ملاحظة الإصدار، أدخل النص واجهة مستخدم قاعدة المعارف المضافة، ثم حدد حفظ .

9. عد إلى الشاشة الرئيسية وحدد F5 لمعاينة الشاشة الجديدة. من المفترض أن تبدو مثل الصورة التالية.

   

   إذا حددت الأيقونة > إلى جانب أي من الإدخالات الصورية، فإن دالة التفاصيل لا تعمل حاليًا. سوف تعالج ذلك لاحقًا عند دمج Azure Cognitive Search في التطبيق.

10. أغلق نافذة المعاينة ثم عد إلى Power Apps Studio.

العنصر 3: الجدولة الميدانية والملاحظات

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

• المعرف (معرف الموعد)
• معرف العميل (معرف فريد للعميل)
• اسم العميل
• عنوان العميل
• تفاصيل المشكلة (وصف نصي للمشكلة التي يواجهها العميل)
• رقم الاتصال
• ‏الحالة
• تاريخ الموعد
• وقت الموعد
• ملاحظات (وصف نصي يتضمن الملاحظات التي أضافها مهندس)
• صورة (صورة للجهاز، إما في حالة عمل بعد الإصلاح أو كصورة تكميلية لملاحظات المهندس)

ملاحظة

كما هو مع بيانات إدارة المخزون الميداني، يقدم هذا المصنف طريقة عرض غير موحدة للبيانات. في نظام المواعيد الحالي، يتم تخزين هذه البيانات في جداول منفصلة تحتوي على بيانات المواعيد وبيانات العميل.

تخزن "ماريا" هذا الملف في حساب OneDrive بالاسم Appointments.xlsx. تذكر أنه تم استخدام الاسم الافتراضي للجدول سابقًا في المصنف وكان لابد من تغيير العنوان في الشاشات المختلفة التي تم إنشاؤها، أعادت "ماريا" تسمية الجدول في المصنف إلى المواعيد.

ملاحظة

يتوفر هذا المصنف في مجلد الأصول في مستودع Git لهذا الدليل.

تريد "ماريا" بناء قسم المواعيد في التطبيق مباشرة من ملف Excel. قررت "ماريا" اتباع نهج مماثل لتلك الخاصة بوظيفة إدارة المخزون الميداني، باستثناء أنه سيتم السماح للمهندس هذه المرة بإنشاء المواعيد وتحريرها.

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

ملاحظة

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

لإنشاء تطبيق المواعيد

1. في شريط قوائم Power Apps Studio، حدد ملف.

   

2. في الجزء الأيمن، حدد جديد. في الجزء الرئيسي، حدد المربع OneDrive for Business - تخطيط الهاتف.

   

3. في جزء الاتصالات، حدد Appointments.xlsx.

   

4. في ملف Excel، حدد جدول المواعيد، ثم حدد اتصال.

   

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

   

6. في جزء طريقة عرض الشجرة، في القسم BrowseScreen1 أسفل BrowseGallery1، حدد Image1، ثم حدد حذف. يجب أن تذكر شاشة الاستعراض المواعيد فقط، وليس أية صور مقترنة بها.

   

   لاحظ أن إزالة عنصر تحكم Image1 تتسبب في حدوث العديد من الأخطاء على الشاشة لأن عرض عنصر التحكم Title1 وموقعه يشيران إلى عنصر تحكم الصورة. ستقوم بإصلاح هذه المشكلات في الخطوة التالية.

7. في جزء طريقة عرض الشجرة، أسفل BrowseGallery1، حدد Title1. غير قيمة الخاصية X إلى 16. غيّر الصيغة في خاصية العرض إلى Parent.TemplateWidth - 104. من المفترض أن يؤدي ذلك إل حل أخطاء الشاشة.

8. في جزء طريقة عرض الشجرة، أسفل BrowseGallery1، حدد Body1. يعرض عنصر التحكم هذا في الوقت الحالي تفاصيل هاتف الاتصال للعميل. قم بتغيير القيمة في خاصية النص إلى ThisItem.'Customer Name' (مع تضمين علامات الاقتباس الفردية).

   

   تعرض الآن التفاصيل في اسم شاشة الاستعراض اسم العميل.

9. في جزء طريقة عرض الشجرة، حدد BrowseGallery1‎. باستخدام شريط الصيغة، افحص التعبير في خاصية العناصر. يبحث عنصر التحكم عن المواعيد باستخدام تاريخ الموعد والوقت رقم الاتصال. غيّر هذه الصيغة للبحث عن اسم العميل بدلاً من رقم الاتصال:

   SortByColumns(Search([@Appointments], TextSearchBox1.Text, "Appointment_x0020_Date","Appointment_x0020_Time","Customer_x0020_Name"), "Appointment_x0020_Date", If(SortDescending1, Descending, Ascending)).
   

   لاحظ أن المواعيد مرتبة حسب التاريخ ثم حسب الوقت (يتم عرض أول حقلين).

10. في جزء طريقة عرض الشجرة، احذف IconNewItem1‎. بإمكان الموظفين في الموقع المحلي فقط حجز مواعيد جديدة للمهندسين والفنيين. لاحظ أن هذا الإجراء يؤدي إلى حدوث أخطاء في النموذج بسبب عرض وموضع عناصر التحكم الأخرى في مرجع الرأس للأيقونة التي قمت بإزالتها للتو.

11. في جزء طريقة عرض الشجرة، حدد LblAppName1‎. غيّر الصيغة لخاصية العرض. إلى Parent.Width - Self.X - IconSortUpDown1.Width - IconRefresh1.Width.

12. في جزء طريقة عرض الشجرة، حدد IconRefresh1‎. غيّر قيمة الخاصية X إلى Parent.Width - IconSortUpDown1.Width - Self.Width.

13. في جزء طريقة عرض الشجرة، حدد iconSortUpDown1‎. غيّر قيمة الخاصية X إلى Parent.Width - Self.Width.

14. في جزء طريقة عرض الشجرة، حدد BrowseScreen1، ثم حدد زر علامة القطع (...). على القائمة المنسدلة التي تظهر، حدد إعادة تسمية وغيّر اسم الشاشة إلى BrowseAppointments.

    

15. باستخدام نفس الأسلوب، غيّر اسم عنصر التحكم BrowseGallery1 إلى BrowseAppointmentsGallery‎.

يؤدي ذلك إلى إكمال شاشة الاستعراض.

لإنشاء شاشة التفاصيل

يمكنك الآن تحويل انتباهك إلى شاشة التفاصيل.

1. في جزء طريقة عرض الشجرة، قم بالتمرير لأسفل إلى قسم DetailsScreen1. يمكنك أن ترى أن التفاصيل تظهر بترتيب أبجدي حسب أسماء الحقول، وبعض المعلومات المفيدة—مثل حقل الملاحظات— لا تظهر إطلاقًا.

   

2. في جزء طريقة عرض الشجرة، حدد DetailForm1‎. في الجزء الأيمن على علامة التبويب خصائص، حدد تحرير الحقول بجوار الحقول. في الجزء الأوسط، حدد كل حقل من الحقول التالية، ثم حدد حذف:

   • تاريخ الموعد
   • وقت الموعد
   • معرّف العميل
   • البطاقة/رقم البطاقة

3. حدد + إضافة حقل، وأضف الحقول التالية:

   • ملاحظات
   • تفاصيل المشكلة
   • ‏الحالة

   

4. اسحب كل حقل حتى يتم عرضه بالترتيب التالي، من الأعلى إلى الأسفل:

   • اسم العميل
   • عنوان العميل
   • رقم الاتصال
   • تفاصيل المشكلة
   • ‏الحالة
   • ملاحظات
   • الصورة

5. في جزء طريقة عرض الشجرة، حدد DataCard1_Notes‎. غيّر خاصية الارتفاع إلى 320.

   

6. في جزء طريقة عرض الشجرة، احذف IconDelete1‎. من المفترض ألا يتمكن المهندسون من إزالة مواعيد من النظام.

7. حدد LblAppName2، وغيّر خاصية العرض إلى Parent.Width - Self.X - IconEdit1.Width.

8. باستخدام الأسلوب الموضح سابقًا، غيّر اسم DetailsScreen1 إلى AppointmentDetails.

لتحرير شاشة التحرير

في الوقت الحالي، شاشة التحرير هي الشاشة الأخيرة التي يجب تفحصها.

1. في جزء طريقة عرض الشجرة، حدد EditScreen1‎.

2. في جزء طريقة عرض الشجرة، في القسم EditScreen1، حدد EditForm1. في الجزء الأيمن، من علامة التبويب خصائص، حدد تحرير الحقول بجوار الحقول.

3. أزل الحقول التالية:

   • عنوان العميل
   • البطاقة/رقم البطاقة
   • معرّف العميل
   • تاريخ الموعد
   • وقت الموعد

4. أضف الحقول التالية:

   • تفاصيل المشكلة
   • ‏الحالة
   • ملاحظات

5. اسحب كل حقل حتى يتم عرضه بالترتيب التالي، من الأعلى إلى الأسفل:

   • اسم جهة الاتصال
   • رقم العميل
   • تفاصيل المشكلة
   • ‏الحالة
   • ملاحظات
   • الصورة

6. حدد الحقل اسم العميل، ثم قم بتوسيعه لعرض خصائصه. غيّر نوع عنصر التحكم إلى عرض النص. يؤدي هذا التغيير إلى جعل عنصر التحكم للقراءة فقط؛ من المفيد رؤية اسم العميل على شاشة التحرير، ولكن من المفترض ألا يتمكن للمهندس من تغييره.

   

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

8. حدد حقل الملاحظات وقم بتوسيعه، ثم غيّر نوع عنصر التحكم إلى تحرير نص متعدد الأسطر. يسمح هذا الإعداد للمهندس بإضافة ملاحظات تفصيلية يمكن أن تمتد عبر عدة أسطر.

9. حدد حقل الحالة وقم بتوسيعه، ثم غيّر نوع عنصر التحكم إلى القيمة المسموح به.

10. في جزء طريقة عرض الشجرة، حدد Status_DataCard5. في الجزء الأيمن، من علامة التبويب خصائص، حدد إلغاء التأمين لتغيير الخصائص. قم بالتمرير لأسفل إلى الخاصية AllowedValues، وغيّر النص إلى ["تم إصلاحها"، "القطع المطلوبة"، "لم يتم حلها"] (مع تضمين الأقواس المربعة). بإمكان المهندس الميداني تعيين الحالة فقط إلى إحدى هذه القيم المعرّفة.

    

11. في جزء طريقة عرض الشجرة، أعد تسمية EditScreen1 بالاسم EditAppointment.

يمكنك الآن حفظ التطبيق واختباره.

1. حدد ملف > حفظ باسم.

2. ضمن حفظ باسم، حدد السحابة، وأدخل الاسم VanArsdelAppointments‎، ثم حدد حفظ.

3. حدد السهم للخلف على شريط أدوات Power Apps Studio للعودة إلى الشاشة الرئيسية.

4. حدد F5 لمعاينة التطبيق. في صفحة المواعيد، حدد الأيقونة > إلى جانب أي موعد. من المفترض أن تظهر شاشة التفاصيل الخاصة بالموعد. في الرأس، حدد تحرير لتحديث الموعد. تحقق مما يلي:

   • حقلا اسم العميل ورقم الاتصال هما للقراءة فقط.
   • يقتصر حقل الحالة على القيم في القائمة المنسدلة.
   • يمكنك إدخال ملاحظات تمتد لعدة أسطر.
   • يمكنك تحميل ملف صورة إلى حقل الصورة.

   ملاحظة

   سيسمح لك تحسين ستضيفه لاحقًا بالتقاط صورة بواسطة هاتفك من داخل التطبيق، وإضافتها إلى حقل الصورة.

   

دمج الشاشات في تطبيق واحد

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

1. افتح نافذة مستعرض جديدة وسجل الدخول إلى Power Apps Studio باستخدام تفاصيل حسابك.

2. في الجزء الأيسر، حدد التطبيقات، وحدد VanArdselApp، ثم حدد تحرير.

   

3. في شريط الأدوات، حدد شاشة جديدة، ثم حدد فارغ. سيضيف هذا الإجراء شاشة جديدة إلى التطبيق حيث ستنسخ بنسخ عناصر التحكم لشاشة الاستعراض لتطبيق VanArsdelAppointments‎.

   

4. ستسمى الشاشة الجديدة Screen2. في جزء طريقة عرض الشجرة، غيّر اسمها إلى BrowseAppointments‎.

5. كرر الخطوة السابقة مرتين، لإضافة شاشتين فارغتين (Screen3 وScreen4).

6. أعد تسمية Screen3 بالاسم AppointmentDetails، وأعد تسمية Screen4 بالاسم EditAppointment.

7. على شريط الأدوات الأيسر في Power Apps Studio، حدد أيقونة البيانات. في جزء البيانات، حدد إضافة بيانات. في القائمة المنسدلة تحديد مصدر بيانات، في الحقل بحث، أدخل OneDrive، ثم حدد OneDrive for Business.

   

8. حدد ملف Excel Appointments.xlsx، وحدد جدول المواعيد‏‎، ثم حدد اتصال‏‎.

9. انتقل إلى نافذة المستعرض التي تعرض التطبيق VanArsdelAppointments.

10. في شريط الأدوات، حدد النسق (قد تحتاج إلى توسيع شريط الأدوات لعرض المزيد من العناصر)، ثم حدد نسق الغابة. هذا هو نفس النسق الذي يستخدمه التطبيق VanArsdel.

11. على شريط الأدوات الأيسر، حدد أيقونة طريقة عرض الشجرة، وحدد الشاشة BrowseAppointments، ثم حدد Ctrl+A. يحدد هذا الإجراء كافة عناصر التحكم في الشاشة.

12. حدد Ctrl+C لنسخ عناصر التحكم هذه إلى الحافظة.

13. عد إلى نافذة المستعرض التي تعرض التطبيق VanArsdelApp‎.

14. على شريط الأدوات الأيسر، حدد أيقونة طريقة عرض الشجرة، وحدد الشاشة BrowseAppointments.

15. حدد Ctrl + V للصق عناصر التحكم على الشاشة.

    ملاحظة

    يظهر رأس الشاشة في بعض الأحيان منخفضًا جدًا. لإصلاح هذه المشكلة، حدد عناصر التحكم IconSortUpDOwn1_1 وIconRefresh1_1 وLblAppName1_1 وRectQuickActionBar1_1 على جزء طريقة عرض الشجرة (اضغط باستمرار على Shift أثناء النقر لتحديد أكثر من عنصر تحكم واحد في كل مرة)، ثم استخدم الماوس أو مفاتيح الأسهم لنقلها لأعلى في جزء طريقة عرض التصميم.

16. عد إلى نافذة المستعرض التي تعرض التطبيق VanArsdelAppointments، ثم حدد عناصر التحكم في الشاشة AppointmentDetails وانسخها إلى الحافظة (Ctrl+A يليهCtrl+C).

17. عد إلى نافذة المستعرض التي تعرض التطبيق VanArsdelApp، وحدد شاشة AppointmentDetails، ثم الصق عناصر التحكم (Ctrl+V). اضبط موضع عناصر التحكم في رأس الشاشة إذا لزم الأمر.

    ملاحظة

    تظهر رسالة خطأ في رأس شاشة AppointmentDetails‎. يحدث هذا الخطأ لأن الشاشة تشير إلى عناصر تحكم في الشاشة EditAppointment، لم يتم نسخها بعد. من المفترض أن تؤدي الخطوات التالية إلى حل هذا الخطأ.

18. عد إلى نافذة المستعرض التي تعرض التطبيق VanArsdelAppointments، ثم حدد عنصر التحكم في الشاشة EditAppointment وانسخها إلى الحافظة.

19. عد إلى نافذة المستعرض التي تعرض التطبيق VanArsdelApp، وحدد شاشة EditAppointment، ثم الصق عناصر التحكم. مرة أخرى، حرّك عناصر التحكم في رأس الشاشة عند الضرورة.

20. في جزء طريقة عرض الشجرة، حدد شاشة AppointmentDetails وتأكد من اختفاء الخطأ المشار إليه سابقًا.

21. في جزء طريقة عرض الشجرة، حدد BrowseScreen1‎. أعد تسمية هذه الشاشة باسم BrowseParts.

22. أعد تسمية شاشة DetailsScreen1 باسم PartDetails.

23. أعد تسمية شاشة Screen1 باسم Knowledgebase.

    ملاحظة

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

إضافة شاشة رئيسية إلى التطبيق

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

1. في تطبيق VanArsdelApp على شريط الأدوات، حدد شاشة جديدة، ثم حدد فارغ.

2. في جزء طريقة عرض الشجرة، أعد تسمية Screen2 باسم الشاشة الرئيسية.

3. في شريط الأدوات، حدد إدراج. في قائمة عناصر التحكم، قم بتوسيع الوسائط، ثم حدد صورة. سيُضاف عنصر التحكم إلى الشاشة.

   

4. عيّن الموضع X لعنصر التحكم إلى 16، وموضع Y إلى 22. غيّر العرض إلى 605، والارتفاع إلى 127. غيّر موضع الصورة إلى تعبئة.

   

5. على علامة التبويب خصائص في القائمة المنسدلة الصورة، حدد + إضافة ملف صورة، ثم قم بتحميل صورة VanArsdelLogo.png إلى عنصر التحكم.

   ملاحظة

   يتوفر ملف الصورة في مجلد الأصول في مستودع Git لهذا الدليل.

   

6. من قائمة عناصر التحكم، أضف أربعة عناصر تحكم ‏‫تسمية النص إلى النموذج وضعها بحيث تكون مكدسة تحت شعار VanArsdel.

   

7. حدد عنصر التحكم ‏‫تسمية النص الأعلى. في الجزء الأيمن، على علامة التبويب خصائص، عيّن خاصية النص إلى الموعد التالي. قم بتعيين حجم الخط إلى 30، ثم استخدم منتقي الألوان لتعيين لون الخط إلى أخضر (ليطابق الشعار).

   

8. حدد عنصر تحكم ‏‫تسمية النص الثاني. قم بتغيير القيمة في خاصية النص إلى First(Appointments).'Customer Name' (مع تضمين علامات الاقتباس). تسترد هذه الصيغة اسم العميل من الصف الأول في جدول المواعيد.

   

   ملاحظة

   في الوقت الحالي، تعمل هذه الصيغة كعنصر نائب فقط. سوف تقوم بتعديل التسمية لاحقًا لاسترداد الموعد التالي للمهندس، بدلاً من عرض الموعد الأول دائمًا.

9. حدد عنصر تحكم ‏‫تسمية النص الثالث، وقم بتعيين خاصية Text إلى First(Appointments).'تاريخ الموعد'.

10. قم بتعيين خاصية Text لعنصر التحكم الرابع إلى First(Appointments).'وقت التعيين'. قم بتعيين خاصية حجم الخط إلى 30.

11. من قائمة عناصر التحكم، أضف عنصر تحكم Rectangle. عيّن الخصائص التالية لعنصر التحكم هذا:

    • وضع العرض: طريقة عرض
    • X: 0
    • Y: 632
    • العرض: 635
    • الارتفاع: 1

    يعمل عنصر التحكم هذا كفاصل مرئي عبر منتصف الشاشة.

12. أضف ثلاثة عناصر تحكم الزر إلى الشاشة، مرتبة عموديًا ومتباعدة بطريقة متساوية أسفل الفاصل. قم بتعيين خاصية النص للزر العلوي إلى المواعيد، وخاصية النص للزر الأوسط إلى القطع، و خاصية النص للزر السفلي إلى Knowledgebase.

    

13. حدد زر المواعيد. قم بتغيير التعبير في الإجراء OnSelect إلى الصيغة Navigate(BrowseAppointments, ScreenTransition.Fade). يقوم هذا الإجراء بتبديل العرض إلى شاشة المواعيد عندما يختار المستخدم الزر.

    

14. عيّن الإجراء OnSelect لزر القطع إلى Navigate(BrowseParts, ScreenTransition.Fade).

15. عيّن الإجراء OnSelect لزر Knowledgebase إلى Navigate(Knowledgebase, ScreenTransition.Fade).

بالإضافة إلى التنقل من الشاشة الرئيسية إلى الشاشات الأخرى في النظام، تحتاج شاشات المواعيد والقطع وKnowledgebase إلى طريقة لتمكين المستخدم من العودة إلى الشاشة الرئيسية‏‎. تقرر "ماريا" إعادة أزرار السابق إلى هذه الشاشات.

1. في جزء طريقة عرض الشجرة، حدد الشاشة ‎BrowseParts‎.

2. حدد عنصر التحكم RectQuickActionBar1 لمنحه التركيز.

3. حدد القائمة إدراج، وحدد إضافة أيقونة. حرك الأيقونة إلى يسار عنصر تحكم RectQuickActionBar1. ستخفي الأيقونة جزءًا من تسمية استعراض القطع.

   

4. من القائمة طريقة عرض الشجرة، غيّر اسم عنصر تحكم الأيقونة الجديدة إلى IconReturn1.

5. قم بتغيير الصيغة للإجراء OnSelect إلى التعبير Back(ScreenTransition.Fade). تقوم دالة السابق بنقل المستخدم إلى الشاشة السابقة التي قام بزيارتها.

6. على علامة التبويب خصائص، غيّر خاصية الأيقونة إلى < Left.

7. في رأس الشاشة، حدد التسمية استعراض القطع. غيّر الخاصية X إلى IconReturn1.Width + 20. من المفترض ألا تعود التسمية استعراض القطع مخفية بشكل جزئي.

   

8. باتباع العملية الموضحة في الخطوات من 16 إلى 22، أضف أيقونة باسم IconReturn2 إلى عنصر التحكم RectQuickActionBar3 في الشاشة Knowledgebase.

9. وبالمثل، أضف أيقونة باسم IconReturn3 إلى عنصر التحكم RectQuickActionBar1_1 في الشاشة BrowseAppointments.

10. في جزء طريقة عرض الشجرة، حدد كائن التطبيق. تغيير الخاصية StartScreen إلى الصفحة الرئيسية الخاصة بال تعبير. يضمن هذا عرض الشاشة الرئيسية عندما يبدأ تشغيل التطبيق:

    

    ملاحظة

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

في النهاية، يمكنك اختبار التطبيق.

1. حدد ملف > حفظ. في مربع ملاحظات الإصدار، أدخل إصدار كامل مع شاشة رئيسية، ثم حدد حفظ.

2. حدد سهم السابق للعودة إلى الشاشة الرئيسية، ثم حدد F5 لتشغيل التطبيق.

3. تحقق من ظهور الشاشة الرئيسية للتطبيق.

4. حدد المواعيد. يجب أن تظهر شاشة المواعيد.

5. حدد السهم للخلف للعودة إلى الشاشة الرئيسية.

6. حدد القطع. يجب أن يظهر مستعرض القطع.

7. حدد السهم للخلف للعودة إلى الشاشة الرئيسية.

8. حدد Knowledgebase. يجب أن تظهر شاشة استعلام قاعدة المعارف.

9. حدد السهم للخلف للعودة إلى الشاشة الرئيسية.

10. أغلق نافذة المعاينة ثم عد إلى Power Apps Studio.

لقد اكتمل الآن تطبيق النموذج الأولي.

السابق التالي