تمرين - إضافة مصدر بيانات إلى تطبيق اللوحة وتصميم صفحات وظيفية

مكتمل

في Power Apps، يمكنك توصيل بياناتك بتطبيق موجود بالفعل أو بتطبيق تقوم بإنشاءه من البداية. يمكن لتطبيقك الاتصال ب SharePoint أو Microsoft Dataverse أو Salesforce أو OneDrive أو أي مصدر بيانات آخر.

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

إنشاء موقع SharePoint

1. سجل الدخول إلى مدخل SharePoint باستخدام بيانات اعتماد مؤسسة Microsoft.

2. حدد + إنشاء موقع في صفحة بدء SharePoint لإنشاء موقع SharePoint .

   

3. في صفحة بدء SharePoint، ستجد المعلومات التالية:

   • اختر نوع الموقع؛ الخيار هو موقع الاتصال أو موقع الفريق. حدد موقع الاتصال.

   • أدخل اسما مناسبا للموقع؛ على سبيل المثال، Easy Sales.

   • أضف وصف الموقع إذا لزم الأمر (اختياري).

   • حدد اللغة التي تختارها من القائمة المنسدلة.

4. حدد إنهاء لإنشاء موقع SharePoint لتحميل بياناتك.

   

يتم إنشاء موقع SharePoint حديث وجاهز للاستخدام في ثوان. يمكنك الآن إنشاء قائمة ومكتبة مستندات وصفحة وما إلى ذلك في موقعك الذي تم إنشاؤه حديثا.

ملاحظه

إذا حددت موقع الفريق، يتم أيضا إنشاء مجموعة Microsoft 365.

إنشاء قائمة SharePoint

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

بالنسبة لتطبيق Easy Sales ، سنقوم بإنشاء قائمة تحتوي على تفاصيل جميع فئات المنتجات: الأرائكوالكراسيوالجداولوالسجاد.

1. في موقع SharePoint الذي تم إنشاؤه حديثا تحت اسم Easy Sales، حدد القائمة المنسدلة + New ثم حدد List لإنشاء قائمة SharePoint.

   

2. في نافذة إنشاء قائمة ، حدد قائمة فارغة لإنشاء قائمة SharePoint من البداية.

   

3. قم بتكوين جزء Create كما يلي:

   • أدخل اسما مناسبا للقائمة؛ على سبيل المثال، Easy Sales.

   • املأ الوصف، إذا لزم الأمر (اختياري).

   • اترك خانة الاختيار إظهار في التنقل في الموقع محددة.

   • حدد إنشاء.

     

إضافة بيانات إلى قائمة SharePoint

بمجرد إنشاء القائمة، حان الوقت لإضافة البيانات. هنا، تعني "البيانات" تفاصيل أي منتج معين. تتضمن تفاصيل المنتج المعلومات التالية: الاسم والصورة والسعر والأبعاد والوزن واللون و PrimaryMaterial والمنطقة والارتفاع والنموذج/الصورة ثلاثية الأبعاد للمنتج الذي سيتم عرضه في الحقيقة المختلطة.

1. في قائمة Easy sales التي تم إنشاؤها، حدد + Add column لإضافة عمود من نوع معين. تعرض القائمة أدناه الأعمدة التي يجب إنشاؤها، مع أسماءها وأنواعها بهذا التنسيق: اسم العمود - نوع العمود.

   • الاسم: سطر واحد من النص
   • ImageLink: سطر واحد من النص
   • السعر: سطر نص واحد
   • الأبعاد: سطر نص واحد
   • الوزن: سطر واحد من النص
   • اللون: سطر واحد من النص
   • PrimaryMaterial: سطر نص واحد
   • الارتفاع: رقم
   • العمق: رقم
   • العرض: رقم
   • السعر / سم 2: الرقم
   • ProductCategory: سطر نص واحد
   • FileType: سطر نص واحد

   حدد نوع العمود من القائمة المنسدلة؛ على سبيل المثال، حدد سطر نص مفرد.

   

   أدخل تفاصيل العمود في علامة التبويب إنشاء العمود وحدد حفظ.

   

   كرر نفس الإجراء لبقية الأعمدة في القائمة السابقة.

   ملاحظه

   بعد إنشاء قائمة SharePoint ، يتم إنشاء عمود عنوان افتراضي يمكنك إعادة تسميته بالاسم.

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

   مجلد Power Apps المخصص

3. حدد + جديد لإضافة عنصر ثم قم بتعبئة التفاصيل المطلوبة كما هو متوفر في ملف Excel الذي تم تنزيله. حدد حفظ لحفظ التفاصيل التي تم إدخالها.

   

   ملاحظه

   تتيح لك طريقة عرض الشبكة إضافة المعلومات بحرية إلى صفوف أو أعمدة مختلفة.

4. ابدأ بإضافة بياناتك في الأعمدة الخاصة بها، كما هو موضح في الشكل:

   

   ملاحظه

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

   ملاحظه

   لن تحتاج إلى قيم الارتفاع والعمق والعرض لقائمة فئات Carpet . سوف تأخذ فئة المنتج هذه قيمة المنطقة التي تم قياسها أثناء جلسة عمل Measure in MR وتعطي سعر السجادة بعد المنطقة المحسوبة. ومع ذلك، قمنا بإضافة العمود Price/cm2 للمساعدة في عملية الحساب.

إنشاء اتصال

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

1. لبدء إنشاء اتصال، سجل الدخول إلى Power Apps وحدد Connections في شريط التنقل الأيمن. ثم حدد + New connection بالقرب من الزاوية العلوية اليمنى.

2. حدد SharePoint. نحن نحدد SharePoint لأننا قمنا بتخزين البيانات المطلوبة في قوائم SharePoint .

   

3. للاتصال ب SharePoint Online، حدد الاتصال مباشرة (الخدمات السحابية)، ثم حدد إنشاء، ثم، إذا طلب منك ذلك، قم بتوفير بيانات الاعتماد.

   

4. يتم إنشاء الاتصال، ويمكنك إنشاء تطبيق من البداية.

   ملاحظه

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

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

فتح تطبيق فارغ

1. انتقل إلى صفحة Power Apps الرئيسية، ثم حدد إنشاء في القائمة اليسرى. حدد Blank app، ثم حدد Create ضمن Blank canvas app.

   

2. حدد اسما لتطبيقك؛ على سبيل المثال، Easy-Sales. حدد الهاتف، ثم حدد إنشاء.

   

   ينشئ Power Apps Studio تطبيقا فارغا للهواتف.

   ملاحظه

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

3. إذا تم فتح مربع الحوار مرحبا بك في Power Apps Studio ، فحدد تخطي.

   

الاتصال بالبيانات

لتضمين البيانات في Power App، يجب عليك الاتصال بالبيانات عبر الموصلات في التطبيق الخاص بك. نظرا لأننا قمنا بتخزين كل البيانات في قائمة SharePoint ، فسنحدد SharePoint كأحد الموصلات.

1. إلى يسار Power Apps Studio، حدد الخيار Data .

2. بعد فتح جزء البيانات ، حدد الزر إضافة بيانات للاتصال بالبيانات.

3. في نافذة تحديد مصدر بيانات ، قم بتوسيع قسم الموصلات وحدد خيار SharePoint .

   

4. في التمرين السابق، أنشأنا بالفعل اتصالا. حدد الاتصال الذي تم إنشاؤه لإضافة البيانات إلى التطبيق الخاص بك. حدد موقع SharePoint الذي تم إنشاؤه تحت اسم Easy Sales.

   

5. بعد تحديد موقع Easy Sales SharePoint، يتم عرض جميع القوائم التي تم إنشاؤها على هذا الموقع. بعد ذلك، حدد قائمة SharePoint التي تم إنشاؤها فيما يتعلق بالتطبيق وانقر فوق اتصال.

   

6. جميع البيانات المطلوبة متصلة وجاهزة للاستخدام في التطبيق. يمكنك الآن البدء في إنشاء التطبيق.

إنشاء شاشة البداية

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

   

2. أعد تسمية الشاشة إلى شاشة البداية عن طريق تحديد أيقونة النقاط الثلاث (...) الموجودة بجانب اسم الشاشة وتحديد الخيار إعادة تسمية .

   

3. حدد الشاشة التي تم إنشاؤها حديثا لتغيير خصائصها في علامة التبويب خصائص في الجانب الأيسر من الشاشة.

4. حدد القائمة المنسدلة بجانب خاصية صورة الخلفية لإضافة صورة إلى الشاشة. حدد + إضافة ملف صورة لتحديد ملف الشعار الذي تم تنزيله.

   

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

   

6. في علامة التبويب إدراج ، قم بتوسيع القائمة المنسدلة Input وحدد Timer. بعد ذلك، اسحب الزر على الشاشة وضعه في أي مكان تريده.

   

7. لتحرير بعض خصائص المؤقت، يمكنك إما استخدام القائمة المنسدلة Property في الزاوية العلوية اليمنى أو استخدام جزء Properties . تعيين الخصائص التالية:

   • التشغيل التلقائي: صحيح

   • المدة: 2000

   • مرئي: خطأ

     

     ملاحظه

     بشكل افتراضي، يتم قياس المدة بالمللي ثانية. منذ ثانية واحدة = 1000 مللي ثانية، أدخلنا 2000 كقيمة للمدة.

8. نريد أن تكون شاشة البداية مرئية لمدة ثانيتين فقط ثم الانتقال إلى الصفحة الرئيسية. إنشاء شاشة فارغة كما فعلنا في الخطوة السابقة وإعادة تسميتها كصفحة الصفحة الرئيسية. لاحقا، حدد زر المؤقت المضاف إلى شاشة البداية وقم بتكوين الخاصية OnTimerEnd . استبدل false بالمحتوى التالي:

   Navigate('Home Page',ScreenTransition.Fade)
   

   

9. احفظ تطبيقك بالانتقال إلى حفظ الملف>. بعد ذلك، حدد الخيار The cloud وحدد Save.

إنشاء الصفحة الرئيسية

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

   

2. قم بتغيير نص العرض للأزرار للإشارة إلى فئات المنتجات مثل الأرائك والكراسي والجداول والسجاد.

   

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

   

4. حدد زر Sofas_button الذي تم إنشاؤه حديثا وقم بتكوين الخاصية OnSelect . بعد تحديد الزر، يجب أن يأخذنا إلى صفحة قائمة المنتجات التي تم إنشاؤها في الخطوة السابقة. استبدل false بالتعليمات البرمجية التالية:

   Navigate(Products,ScreenTransition.Cover, {ID:1});
   

   

   ملاحظه

   المعرف هو متغير سياق مع بعض القيمة المعينة. يتم تمرير هذه القيمة إلى صفحة الوجهة المذكورة في الدالة Navigate . تقوم القيمة المعينة للمتغير بتصفية المنتجات استنادا إلى فئة المنتج.

5. كرر نفس الإجراء للأزرار الثلاثة الأخرى. مرة أخرى، تأكد من توفير أسماء شاشة مناسبة في الدالة Navigate ؛ على سبيل المثال، لتكوين الخاصية OnSelect للأزرار الكراسيوالجداولوالسجاد ، استخدم الدالة Navigate كما يلي:

   Navigate(Products,ScreenTransition.Cover, {ID:2});
   

   Navigate(Products,ScreenTransition.Cover, {ID:3});
   

   Navigate(Carpets,ScreenTransition.Cover)
   

   بقشيش

   لحفظ تقدمك، حدد علامة التبويب File في الأعلى وحدد الخيار Save. يمكنك أيضا استخدام Ctrl+S لحفظ تقدمك.

   ملاحظه

   بناء الجملة الافتراضي للدالة Navigate هو: Navigate(Screen [, Transition [, UpdateContextRecord]])

   • الشاشة: مطلوب. الشاشة المراد عرضها.
   • الانتقال: اختياري. الانتقال المرئي لاستخدامه بين الشاشة الحالية والشاشة التالية. القيمة الافتراضية هي بلا.
   • UpdateContextRecord: اختياري. سجل يحتوي على اسم عمود واحد على الأقل وقيمة لكل عمود. يحدث هذا السجل متغيرات السياق للشاشة الجديدة كما لو تم تمريرها إلى الدالة UpdateContext.

   بقشيش

   يمكنك اختبار التطبيق الخاص بك عن طريق الضغط على المفتاح F5 على لوحة المفاتيح أو النقر فوق الزر تشغيل في الزاوية العلوية اليسرى من Power Apps Studio.

استخدام عنصر تحكم المعرض

الآن بعد أن أضفنا فئات المنتجات، سنعرض قائمة المنتجات ضمن كل فئة. في Power Apps، نستخدم عنصر تحكم المعرض لمشاهدة سجل البيانات.

1. في شاشة المنتجات ، في علامة التبويب إدراج ، حدد المعرض>عمودي لإضافة عنصر تحكم المعرض إلى الشاشة.

   

2. أعد تسميته إلى Gallery_products. في علامة التبويب Properties في الجزء الأيسر، قم بتكوين الخاصية Items كما يلي:

   If(
   ID = 1,
   Filter('Easy Sales',(ProductCategory = "Sofa")),
   ID = 2,
   Filter('Easy Sales',(ProductCategory = "Chair")),
   ID = 3,
   Filter('Easy Sales',(ProductCategory = "Table")),
   ID = 4,
   Filter('Easy Sales',(ProductCategory = "Carpet")))
   

   

   نقوم بتصفية المنتجات المخزنة في قائمة SharePoint استنادا إلى فئة المنتج. يتم استخدام متغيرات السياق لعملية التصفية.

3. قم بتكوين الخاصية Gallery>Fields في جزء Properties عن طريق تحديد Edit:

   • تعيين السعر إلى العنوان Subtitle1 .

   • تعيين العنوان إلى العنوان Title1 .

     

   عند تعيين الحقول السابقة، ستلاحظ أن البيانات تنعكس في المعرض.

4. اضبط حجم Gallery_products كما هو مطلوب. لإضافة ImageLink إلى عنوان Image1 ، حدد Image في المعرض وقم بتكوين الخاصية Image في علامة التبويب Property عن طريق إضافة هذا السطر من التعليمات البرمجية:

   ThisItem.ImageLink
   

   

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

   

6. أضف أيقونة Back فوق Label التي تمت إضافتها مسبقا لمساعدة المستخدم على الانتقال إلى الصفحة الرئيسية عند الحاجة. لإضافة الأيقونة رجوع ، قم بتوسيع القائمة المنسدلة الأيقونات وحدد الأيقونةرجوع .

   

7. ضع الأيقونة Back بشكل صحيح وغير لون العرض الخاص بها، إذا لزم الأمر. قم بتكوين الخاصية OnSelect الخاصة به عن طريق إضافة ما يلي:

   Navigate('Home Page',ScreenTransition.Cover)
   

   

8. اتبع نفس الإجراء لصفحة Carpets . قم بتكوين الخاصية Items للمعرض المضافة إلى صفحة Carpets بالطريقة التالية:

   Filter('Easy Sales',ProductCategory = "Carpet")
   

   

   بقشيش

   لحفظ تقدمك، حدد علامة التبويب File في الأعلى وحدد الخيار Save. يمكنك أيضا استخدام Ctrl+S لحفظ تقدمك.

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