تمرين - ‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫استخدَام النص البرمجي للكمبيوتر العميل لإخفاء قسم النموذج

  • 9 دقائق

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

مهم

استخدم بيئة اختبار مع توفِير Microsoft Dataverse وعينَات التَطبِيقَات الممكنة. وإذَا لم يتوفر لديك، فيمكنك الاشترَاك فِي خطة المجتمع.

المهمة 1 - إعدَاد الحل مع النموذج

فِي هذه المهمة، ستقوم بإنشَاء حل و‏إضَافَة جدول موجود إلى الحل و‏إضَافَة أعمدة جديدة وإعدَاد النموذج الرئيسي للجدول الذي أضفته إلى الحل.

  1. انتَقِل إلى Power Apps maker portal وتأكد مِن أنك فِي البيئة الصَحِيحة التي تم فِيهَا تمكين عينة التَطبِيقَات.

  2. حدد الحلول ثم حدد + حل جَديد.

  3. أدخل Innovation Challenge Enhancementsللاسم المعروض، وحدد CDS default publisherللنَاشر، وحدد إنشَاء.

    لَقطَة شَاشة لخصَائص الحل الجديد.

  4. يجب أن يتم فتح تحسينَات تحدي الابتكار التي قمت بإنشَائهَا.

  5. حدد + ‏إضَافَة موجود ثم حدد جدول.

  6. أدخل الفريق فِي مربع نص البحث، وحدد مشروع الفريق، ثم حدد التَالي.

    ملاحظة

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

  7. حدد زر تحرير الكائنَات.

    لَقطَة شَاشة لزر تحديد المكونَات.

  8. حدد علامة التبويب نمَاذج، وحدد نموذج المَعلومَات لنوع النموذج الرئيسي، ثم حدد ‏إضَافَة.

    لَقطَة شَاشة لنَافذة ‏إضَافَة مكون.

  9. حدد ‏إضَافَة مرة أخرى.

  10. افتح جدول مشروع الفريق الذي أضفته للتو إلى الحل.

  11. حدد النمَاذج فِي بطَاقة تجَارب البيَانَات.

  12. افتح نموذج المَعلومَات مِن نوع النموذج الرئيسي.

    لَقطَة شَاشة لنموذج المَعلومَات.

  13. حدد قسم الحَالة.

    لَقطَة شَاشة لقسم

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

    لَقطَة شَاشة لخَانة اختيَار

  15. انتَقِل إلى طريقة عرض الشجرة وحدد علامة تبويب عَام.

    لَقطَة شَاشة لعلامة التبويب

  16. فِي جزء "الخصَائص"، قم بتغيير Name إلى ‎tab_general.

  17. حدد عمود بدء المشروع.

    لَقطَة شَاشة لعمود بدَاية المشروع.

  18. انتَقِل إلى جزء الخصَائص وحدد الزر (i) بجوار اسم عمود الجدول.

  19. انسخ الاسم المنطقي (sample_projectstart) والصقه فِي المفكرة. ستستخدم هَذا الاسم فِي البرنَامج النصي للإشَارة إلى هَذا العمود.

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

  20. حدد حفظ ونشر لحفظ التغييرَات. انتظر حتى يكتمل النشر.

  21. حدد زر الرجوع.

    لَقطَة شَاشة لزر الرجوع.

  22. اختر الكل.

  23. حدد تَوزيع كل التخصيصَات، وانتظر حتى يكتمل التَوزيع.

المهمة 2 - بنَاء البرنَامج النصي للعميل

فِي هذه المهمة، ستقوم بإنشَاء برنَامج نصي يظهر/يخفِي قسم الحَالة بنَاءً عَلى تَاريخ بدء المشروع.

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

  1. ابدأ تشغيل Visual Studio Code مثيل جديد أو استخدم محرر التعليمَات البرمجية المفضل لديك. يمكنك تنزيل Visual Studio Code وتثبيته.

  2. حدد فتح المجلد.

    لَقطَة شَاشة لزر فتح المجلد.

  3. قم بإنشَاء مجلد فِي مجلد المستندَات الخَاص بك وقم بتسميته ClientScriptLab.

  4. حدد المجلد ClientScriptLab الذي قمت بإنشَائه ثم حدد المجلد.

    لَقطَة شَاشة لشَاشة وزر تحديد المجلد.

  5. قم بالتمرير فوق المجلد CLIENTSCRIPTLAB وحدد ملف جديد.

    لَقطَة شَاشة لزر الملف الجديد.

  6. قم بتسمية الملف FormTeamProject.js.

  7. أضف الدَالات الموجودة أدنَاه إلى FormTeamProject.js. يجب أن تحتوي وظَائفك إمَا عَلى أسمَاء فريدة أو تستخدم مسَاحة اسم لضمَان التفرد.

    function LearnLab_handleTeamProjectOnLoad(executionContext) {

}
function LearnLab_handleProjectStatusOnChange(executionContext) {

}
function LearnLab_hideOrShowStatusSection(formContext) {

}

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

    var formContext = executionContext.getFormContext();
formContext.getAttribute('sample_projectstart').addOnChange(LearnLab_handleProjectStatusOnChange);
LearnLab_hideOrShowStatusSection(formContext);

    لَقطَة شَاشة لوظيفة onload.

  9. قم بإضَافَة هَذا البرنَامج النصي إلى الدَالة OnChange. يحصل هَذا الرمز ببسَاطة عَلى formContext ثم يستدعي الوظيفة العَامة للإخفاء/الإظهَار.

    var formContext = executionContext.getFormContext();
LearnLab_hideOrShowStatusSection(formContext);

  10. قم بإضَافَة هَذا البرنَامج النصي إلى وظيفة HideOrShowStatusSection. لاحظ اسم علامة التبويب tab_general واسم القسم section_status واسم العمود Sample_projectstart.

    var tabGeneral = formContext.ui.tabs.get('tab_general');
var sectionStatus = tabGeneral.sections.get('section_status');
var startDate = formContext.getAttribute('sample_projectstart').getValue();
var CurrentDate = new Date();
if (startDate == null || startDate > CurrentDate) {
  sectionStatus.setVisible(false);
} else {
  sectionStatus.setVisible(true);
}

  11. يجب أن يبدو البرنَامج النصي الخَاص بك الآن مثل هذه الصورة.

    لَقطَة شَاشة لمثَال البرنَامج النصي.

  12. حدد ملف وحفظ.

المهمة 3 - تحميل البرنَامج النصي

فِي هذه المهمة، يمكنك تحميل البرنَامج النصي الذي قمت بإنشَائه فِي بيئتك.

  1. انتَقِل إلى Power Apps Maker Portal وتأكد مِن وجودك فِي البيئة الصحيحة.

  2. حدد الحلول وافتح حل تحسينَات تحدي الابتكار.

  3. حدد + جديد ثم حدد المزيد | مورد الويب.

    لَقطَة شَاشة لزر ‏إضَافَة مورد ويب جديد.

  4. أدخل FormTeamProject.jsللاسم، وأدخل FormTeamProject.js للاسم المعروض، وحدد Java script (JS)للنوع، وحدد اختيَار ملف.

    لَقطَة شَاشة لزر اختيَار ملف مورد الويب.

  5. حدد ملف FormTeamProject.js الذي قمت بإنشَائه مسبقًا، ثم حدد فتح.

  6. حدد حفظ.

  7. يجب أن يشتمل الحل الخَاص بك الآن عَلى جدول مشروع الفريق ومورد الويب FormTeamsProject.js.

  8. لا تغَادر هذه الصَفحَة.

المهمة 4 - تعديل النموذج

فِي هذه المهمة، ستقوم بإضَافَة مكتبة JavaScript إلى النموذج الرئيسي Team Project و‏إضَافَة معَالج حدث لحدث On Load.

  1. تأكد مِن أنك لا تزَال فِي حل تحسينَات تحدي الابتكار.

  2. قم بتوسيع الجدَاول ثم قم بتوسيع جدول مشروع الفريق.

  3. حدد النمَاذج وافتح نموذج المَعلومَات.

  4. انتَقل إلى جًزءِ الخصَائِص، وحَدد عَلامة التَبويب الأحدَاث. وقُم بتَوسِيع OnLoad إذَا كان مَطويًّا، وحَدد + مُعَالج الأحدَاث. فِي تَكوين الحَدث، حَدد + إضَافَة مَكتبةٍ.

    لَقطَة شَاشة لزر ‏إضَافَة مكتبة جديدة إلى النموذج.

  5. أدخل الفريق فِي مربع نص البحث واضغط عَلى Enter. حدد FormTeamProject.js، ثم حدد ‏إضَافَة.

    لَقطَة شَاشة لنَافذة مكتبة javascript.

  6. أدخل LearnLab_handleTeamProjectOnLoad ضمن الدَالة، وحدد خَانة الاختيَار تمرير سيَاق التنفيذ كمَعلمة أولى، وحدد تم.

    لَقطَة شَاشة تعرض مربع حوار تكوين الحدث.

  7. حدد حفظ ونشر وانتظر حتى يتم حفظ التغييرَات.

  8. فور حفظ التَغييرَات ونَشرهَا، حدد الزر رُجُوع.

  9. اختر الكل.

  10. حدد تَوزيع كل التخصيصَات وانتظر حتى يكتمل التَوزيع.

المهمة 5 - الاختبار

فِي هذه المهمة، ستختبر البرنَامج النصي الخَاص بك.

  1. انتَقِل إلى Power Apps Maker Portal وتأكد مِن وجودك فِي البيئة الصحيحة.

  2. حدد التطبيقَات، وافتح تطبيق Innovation Challenge.

  3. حدد مشَاريع الفريق، وافتح مشروع فريق الحوسبة السحَابية.

  4. يجب أن يكون قسم الحَالة مخفيًا لأن عمود Project start فارغ.

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

  5. اضغط عَلى أيقونة التقويم بجوار بدء المشروع وحدد تَاريخ اليوم.

  6. ومن المفترض أن يكون قسم الحَالة مرئيًا.

    لَقطَة شَاشة لقيمة بدء المشروع التي تم تعيينهَا إلى اليوم مع ظهور قسم الحَالة.

  7. قم بتغيير بدء المشروع إلى تَاريخ مستقبلي.

  8. من المفترض أن يكون قسم الحَالة مخفيًا الآن.

  9. قم بتغيير بدء المشروع إلى تَاريخ فِي المَاضي.

  10. ومن المفترض أن يصبح قسم الحَالة مرئيًا مرة أخرى.

لقد استخدمت الآن JavaScript وClient API لتنفيذ متطلبات العمل التي لا يمكن تنفيذهَا با‏‫‏‫‏‫‫‏‫‏ستخدَام الخيَارَات التعريفية مثل قواعد العمل.