تَمرين - إنشَاء تَطبِيق مخزون باستِخدَام SharePoint

مكتمل

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

فِي هَذَا التَمرِين، تَقومُ بإعدَادِ قَائمَتين مِن قَوَائِم SharePoint لتَخزِينِ بيَانَات مَاكِينة القَهوةِ وبيَانَات الطَلب. بَعدَ ذلك، تُنشِئُ تَطبِيقَ لوحة Power Apps للتَفَاعُل معَ هَذه البيَانَات وتَقدِيم الطلبات.

إنشَاء قَائمة المَاكينَات

تتمثل وظيفتك الأولى فِي إنشَاء قَائمة المَاكينَات:

  1. قم بتنزيل مِلَف Excel الخَاص بـ Machine Order Data.

  2. انتقِل إلى موقع SharePoint Online، حيث تريد تخزين بيَانَات تَطبِيقك.

  3. فِي الزَاوية العلوية اليسرى، حدد جَدِيد‎ > قَائمة.

  4. حدد الخيَار مِن Excel.

    لَقطَة شَاشة لصفحة إنشَاء قَائمة فِي SharePoint تُظهر الخيَار مِن Excel.

  5. حدد تحميل مِلَف، ثم حدد مِلَف Machine-Order-Data.xlsx الذي قم بتنزيله مِن قبل.

  6. فِي صفحة تخصيص، تأكد مِن تحديد جدول المَاكينَات مِن القَائمة المِنسدلة تحديد جدول مِن هذَا المِلَف، ثمَّ حدد التَالِي فِي الزَاوية السفلية اليمِنى.

    لَقطَة شَاشة للصفحة تخصيص تُظهر المَاكينَات المحددة للجدول.

  7. يمكنُك ضَبطُ اسمِ قَائمتِك وإضَافَة وَصفٍ (اختِيَاري). حدد الزرَّ إنشَاء للمُتَابَعة. ثمَّ انتظِر بضعَ لحظَاتٍ لقَائمَتِك الجَدِيدة.

فورَ الانتِهَاء مِن قَائمتِك الجَدِيدَة، يجب أن ينتقلَ متصفحُك تلقَائيًا إلى القَائمَةِ الجَدِيدَة. يجبُ تحميل جَمِيع البيَانَات مِن ورقة Excel الخَاصة بك ويجب أن تكون جَاهزةً لك لاستخدَامهَا.

إنشَاء Orders-List

بَعد ذلك، تنشئ Orders-List باتباع الخطوَات التَالِية:

  1. حدد الخيَار الصفحة الرئيسية‬ فِي الزَاوية العلوية اليمِنى، ضمِن اسم موقع SharePoint الخَاص بك.

  2. فِي الزَاوية العلوية اليسرى، حدد جَدِيد‎ > قَائمة.

  3. حدد قَائمة فَارغة.

  4. قم بتسمية قَائمتك باسم Orders-List، ثم حدد إنشَاء.

    لَقطَة شَاشة لتعيين الاسم لـ Orders-List.

  5. فِي صَفحةِ Orders-List، مباشرةً تَحتَ اسمِ القَائمةِ، تَرى عمودًا يُسمَّى "العُنوَان". عَلى يَمِين ذَلك يُوجدُ خَيَار إضَافَة عَمُودٍ. حدد إضَافَة عمود.

  6. فِي مُربعِ حُوار إنشَاء عَمُودٍ، حدد التَاريخ والوقت، ثمَّ حدد التَالِي.

  7. قم بتسمية هذَا العمود باسم OrderDate، ثم حدد حفظ.

    لَقطَة شَاشة لمربع حوار إنشَاء عمود معَ إدخَال الاسم وزر الحفظ مميزين.

  8. حدد ‏‫إضَافَة عمود‬ مرة أخرى.

  9. قم بالتمرير لأسفل وحدد العملة، ثمَّ حدد التَالِي.

  10. قم بتسمية هذَا العمود باسم OrderTotal، ثم حدد حفظ.

الآن، لديك قَائمة SharePoint يمكنك استخدَامهَا لتخزين بيَانَات الأوامر لمَاكينَات القهوة.

إنشَاء تَطبِيق اللوحة

اتبع هذه الخطوات لإنشَاء تَطبِيق اللوحة فِي Power Apps:

  1. انتقِل إلى make.powerapps.com.

  2. حدد الخيَار إنشَاء عَلى الجَانب الأيسر.

  3. حدد تَطبِيق فَارغ.

    لَقطَة شَاشة للصفحة إنشَاء تَطبِيقك فِي Power Apps معَ تحديد تَطبِيق فَارغ.

  4. حدد الخيَار إنشَاء ضمِن تَطبِيق لوحة فَارغ.

  5. قم بتسمية تَطبِيقك باسم Contoso Coffee Machine Ordering، ثمَّ حدد الزر إنشَاء.

  6. بَعد انتظَارٍ قصيرٍ، تفتح شَاشتك محرر تَطبِيق اللوحة حيث يمكنك تصميم وتحرير تَطبِيق Power Apps الذي يتفَاعل معَ بيَانَات SharePoint الخَاصة بك.

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

  7. حدد الزر حفظ فِي الزَاوية العلوية اليمِنى. (بشكل افترَاضي، تحفظ Power Apps تَطبِيقك تلقَائيَا كل دقيقتين، ولكن فَقَط بَعد المرة الأولى التي تقوم فِيهَا بالحفظ يدويَا؛ لذَا مِن الأفضل دَائمَا حفظ التَطبِيق بَعد إنشَائه).

  8. حدد القَائمة المِنسدلة إضَافَة البيَانَات.

  9. ابحث عَن وحدد SharePoint (الخيَار SharePoint القيَاسي، ليس مواقع SharePoint). قد تحتَاج إلى التمرير لأسفل فِي النتَائج للعثور عليهَا. إذَا لم يَكُن لدَيكَ اتصَالٌ بَعدَ، فحدد إضَافَة اتصَالٍ. إذَا كان لديكَ اتصَالٌ بالفِعلِ، فِيمكنُك تَحدِيدُ اتصَالِك الحَالِي وتخطِّي خُطوةِ التَالِيةِ للمُتَابعةِ.

    تم توسيع لَقطَة شَاشة القَائمة المِنسدلة

  10. لإنشَاء اتصَالٍ جَدِيد‎ٍ، يتمُّ فتحُ لوحةٍ عَلى الجَانبِ الأيمِنِ مِن الشَاشة. تأكد مِن تحديد خيَار الاتصَال المباشر (الخدمَات السَحَابِية)، ثم حدد اتصَال فِي الجزء السفلي مِن الشَاشة.

  11. عَلى يَمين الشَاشة، يجبُ أن تشَاهدَ الآن خَيَار الاتصَال بمَوقعِ SharePoint والذي يُطَالبُك بإدخَالِ عُنوانِ URL لمَوقعِ قَائمتِك، أو يمكنُك البَحث أسفَل المَوَاقِع الأخِيرة للعُثُور عَلى مَوقِع SharePoint.

    يجب أن يظهر موقع SharePoint، حيث أنشأت قوائم المَاكينَات الخَاصة بك مِن قَائمة المواقع الحديثة. يمكنُك ببَسَاطَةٍ تحديدُ المَوقِع للمُتَابَعَة.

    إذَا لم يظهَر موقعك فِي القَائمةِ، فعُد إلى المَوقِع الذي أنشأتَ فِيه القَائمةَ وانسَخ عُنوَان URL (الشَاشة الرَئِيسية للمَوقع، وليسَ صَفحة القَائِمة)، ثمَّ الصَق عُنوَان URL فِي السَطرِ العُلوِي مِن اللوحة. فور أن يحددَ Power Apps المَوقعَ، يمكنُك تَحدِيدُ الاتصَال للمُتُابَعَة.

  12. فِي لوحَةِ اختِيَار قَائِمَةٍ. حدد خَانتي الاختيَار Machine-Order-Data وOrders-List.

  13. حدد اتصَال.

    لَقطَة شَاشة لمربع الحوار اختيَار قَائمة معَ تحديد القَائمتين وإظهَار الزر اتصَال.

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

تصميم تَطبِيق اللوحة

هيَّا نُصمِّمُ تَطبِيق اللَوحَة الخَاص بنَا عَن طَريقِ إدرَاجِ بَعضِ عَنَاصِر التَحكُّم وتَوصِيلهَا.

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

    لَقطَة شَاشة لتوسيع قَائمة الإدرَاج لإظهَار العنَاصر الشَائعة بمَا فِيهَا تسمية النص.

  2. انقل التسمية التي تظهر إلى الزَاوية العلوية اليسرى مِن اللوحة، ثم قم بتغيير حجمهَا لتمتد عبر اللوحة بأكملهَا.

  3. عَلى الجَانب الأيمِن مِن الشَاشة، يمكنك تحرير خصَائص التحكم فِي تَطبِيقَات اللوحة الخَاصة بك باستِخدَام واجهة سهلة الاستخدَام ودون الحَاجة إلى تحرير التعليمَات البرمجية. معَ استمرَار تحديد التسمية، قم بتغيير النص إلى Contoso Coffee Machine Ordering.

  4. قم بتغيير حجم الخط إلى 18.

  5. بالنسبة إلى محَاذَاة النص، حدد توسيط.

  6. بجَانب اللون، يشير رمز الحرف A إلى لون النص، ويشير رمز دلو الطلاء إلى لون خلفِية تلك التسمية. حدد رمز لون النص A، ثم حدد أبيض.

  7. حدد رمز دلو الطلاء، ثم اختر اللون الأزرق الدَاكن (أو أي لون آخر تريده).

    لَقطَة شَاشة لتحديد رمز دلو الطلاء لإظهَار مِنتقي الألوان.

    ملاحظة

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

  8. فِي الشريط العلوي، حدد إدرَاج > المعرض العمودي.

  9. تظهر نَافذة مِنبثقة تطَالبك بتوصيل المعرض بمصدر بيَانَات. حدد Machine-Order-Data.

  10. لضَبطِ الحُقُولِ، هيَا نُحَاوِلُ استِخدَام وَاجهةِ شَريطِ الأوامر. حدد تحرير الحقول مِن شَريطِ الأوامِر.

  11. تأكَّد مِن أنَّ القَائِمة المُنسَدِلة Subtitle1 تَعرِضُ Price وأنَّ خيَار Title1 يَعرِض Machine Name. حدد خَارج مُربَّع الحُوار تَحرِير الحُقُول للمُتَابَعة.

  12. يجبُ أن يعكسَ النصُّ الذي يتمُّ عرضُه فِي معرضِ الصورِ الخَاصِ بك اسم الجِهَاز والسعرِ جنبًا إلى جنبٍ معَ "صورةٍ نَمُوذَجيةٍ"، والتي سنَقُوم بإصلاحِهَا للحظَاتٍ. الآن، قُم بتغييرِ حجمِ المَعرضِ ليلائمَ تسميةَ العُنوان بحيثِ يشغلُ النصفُ الأيسرِ مِن اللوحة أسفل التسمية الخَاصة بك.

  13. دَعُونَا نستبدِل هذه الصُورة النَمُوذجية حتَّى نتمكنَ مِن إظهَار صُورةِ المُنتجِ الفِعلِية. حدد رمز الصورة الأولى فِي المعرض. يوجد حقل إدخَال معادلة ‎‎fx‎ أسفل شريط الأوامر مباشرةً حيث يمكنك كتَابة التعليمَات البرمجية لتغيير خصَائص عنصر التحكم فِي Power Apps، احذف نص SampleImage، ثم أدخل ThisItem.Photo.

    لَقطَة شَاشة لتحديد الصورة فِي شريط المعادلة معَ تعيين المعادلة إلى ThisItem.Photo.

  14. بعدَ ذلك، هيَا نقوم بتعدِيلِ تَنسِيق النَصِّ لحقلِ التَرجمةِ لإظهَار العُملةِ. حدد تَسميةَ Subtitle1 فِي العُنصرِ الأوَّل مِن مَعرَض الصُورِ الخَاص بكَ الذي يَعرضُ سعرَ العُنصرِ. لاحِظ أنَّ لديكَ تمييزًا رمَاديًا فِي طَريقَة عَرضِ الشَجَرة لعُنصُر التَحكُّم هَذَا، ويظهرُ حَقلُ المعَادَلة ThisItem.Price.

    لَقطَة شَاشة لطريقة عرض الشجرة تُظهر توسيع الشَاشة الأولى لإظهَار المعرض الأول، والتي يتم توسيعهَا لإظهَار العنوان الفرعي الأول.

  15. فِي حقل المعادلة، قم بتعديل خاصية Text إلى: Text(ThisItem.Price,"$##,###.00"). تَرَى عَلى الفَورِ السِعرَ الخَاص بك يُظهرُ عَلامَات الدولار وآلاف الفَواصِل والسِنتَات.

  16. بعدَ ذَلك، دَعنَا نضيفُ نَمُوذَجًا لتمكينِنَا مِن تَعدِيل بيَانَاتنَا. حدِّد النِصفَ الفَارغِ مِن لوحةِ التَحرِير (للخُرُوجِ مِن المَعرضِ)، ثمَّ حدد إدرَاج > نَمُوذج تَحرِير.

  17. حدد Orders-List كمَصدرٍ للبيَانَات، وسيقوم Power Apps بملء النَمُوذَج بالحقول، وفقًا لأعمدةِ قَائمة SharePoint الخَاصة بنَا.

  18. قم بتغيير موضع النَمُوذَج وحجمه ليلائم النصف الأيمِن مِن لوحتك.

    لَقطَة شَاشة للوحةٍ تعرضُ النَمُوذَج المُحدَّد و'Orders-List' كـ DataSource فِي شَريطِ المعَادلةِ.

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

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

  20. افتَح بطَاقَات OrderDate وOrderTotal فِي النَمُوذَج باستِخدَام نفس الأسلوب.

  21. حدد مربع إدخَال النص ضمِن العنوان فِي نَمُوذَجك (افتحه إذَا لزم الأمر).

  22. قم بتغيير نَمُوذَج معادلة Default مِن Parent.Default إلى Gallery1.Selected.'Machine Name'. يجبُ أن تشَاهدَ الآن عنوانَ العُنصرِ المُحدَّدِ مِن المَعرَض عَلى الجَانبِ الأيسَر مِن الشَاشَة.

    ‏‫نَصِيحة

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

  23. حدد عنصر تحكم مِنتقي التَاريخ ضمِن OrderDate، ثم قم بتغيير معادلة DefaultDate إلى Today().

  24. حدد مربع إدخَال النص ضمِن OrderTotal، ثم قم بتغيير المعادلة إلى Gallery1.Selected.Price.

  25. حدد النَمُوذَج بالكامل. فِي الزَاويةِ العُلويةِ اليُسرَى، تظهرُ خَاصِية DataSource فِي قَائمةٍ مُنسدلةٍ معَ حَقلِ إدخَالِ المعادلة الذي يعرض 'Orders-List'. مِن خلال تحديد القَائمة المِنسدلة الخصَائص، يمكنك اختيَار أي خَاصية متَاحة لعنصر تحكم وتغيير المعادلة لخَاصية عنصر التحكم هذه. فِي هذه الحَالة، ستُغيِّر خَاصية Item‎ بالنَمُوذج، لذَا حدد هذه القَائمة المِنسدلة، ثمَّ حدد Item.

    لَقطَة شَاشة للقَائمة المِنسدلة معَ تحديد DataSource الافترَاضي وإظهَار Item.

  26. فِي معادلة Item، أدخل Defaults('Orders-List'). تخبر دَالة Defaults() Power Apps بأنَّنَا نقومُ بإنشَاءِ عنصرٍ جَدِيد‎ٍ لقَائمة Orders-List SharePoint، فِي كلِّ مرةٍ نرسلُ فِيهَا هذَا النَمُوذج.

  27. انتقِل إلى شَريطِ الأوامِر وحدد زر > إدرَاج.

  28. اسحب الزر إلى الجَانب الأيمِن مِن الشَاشة أسفل مدخلات النَمُوذَج.

  29. قم بتغيير خَاصية Text الخَاصة بالزر الخَاص بك إلى إرسَال الأمر.

  30. قم بتغيير خَاصية OnSelect الخَاصة بالزر الخَاص بك إلى SubmitForm(Form1).

الآن، لديك تَطبِيق حيث يمكن للمستخدمين تحديد مَاكينة قهوة، ومعاينة أمرهم، وإرسَال الأمر. يجب أن يشبه تَطبِيقك النهَائي الصورة التَالِية.

لَقطَة شَاشة لمعاينة الأمر تُظهر الزر إرسَال الأمر.

ضع تَطبِيقك فِي وضع إصدَار أولي عَن طريق تحديد زر تشغيل (مثلث) مِن الزَاويةِ العلوية اليمِنى مِن شريط الأوامر (أو حدد مفتَاح الوظيفة F5 عَلى لوحة المفَاتيح). حدد مَاكينة قهوة، ثم حدد زر إرسَال الأمر. عُد إلى Orders-List عَلى قَائمة SharePoint الخَاصة بك، ويجب أن ترى الترتيب الذي قمت بإنشَائه.

لَقطَة شَاشة للأمر الذي تم إنشَاؤه حديثًا فِي القَائمة.

نأملُ أن يثيرَ هَذَا شهيتَك لإمكَانَات استِخدَام Power Apps للتفَاعل معَ بيَانَات SharePoint. بالرغم مِن أنَّ هَذَا تَطبِيقٌ أسَاسِي، إلا أنَّه يمكنُك إضَافَة تخصيصَاتٍ لتغييرِ واجهةِ المستخدمِ/تجربةِ المستخدمِ لدعم احتيَاجَات عملك.