بنية Power Apps Component Framework

مكتمل

يمكنك تنفيذ مكونَات التعليمَات البرمجية با‏‫‏‫‏‫‫‏‫‏ستخدَام CSSHTML وTypeScript. على الرغم مِن أنه ليس مطلوبًا منك ‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫استخدَام أي إطَار عمل محدد لواجهة ‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫المُستَخدِم، فإن React وFluent UI همَا خيَارَان شَائعَان.

تكوين المكون

توضح الصورة التَالية المجَالات الرئيسية الثلاثة Power Apps للمكون: ملف إدخَال البيَان وتنفيذه وأي ملفات موارد أخرى قد يحتَاجهَا المكون.

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

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

export class FirstControl implements ComponentFramework.StandardControl<IInputs, IOutputs> {}

Power Apps دورة حيَاة المكون

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

الطريقة	‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫الوَصف‏‎‏‎‏‎‏‎‏‎‏‎‏‎‏‎
init	مطلوب. استخدم هذه الطريقة لتهيئة مثيل المكون. يمكن للمكونَات بدء تشغيل مكالمَات الخَادم البعيد وإجرَاءَات التهيئة الأخرى. لا يمكنك تهيئة قيم مجموعة البيَانَات بهذه الطريقة؛ يجب عليك ‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫استخدَام طريقة updateView.
updateView	مطلوب. يتم استدعَاء هذه الطريقة عندمَا تتغير أي قيمة فِي حقيبة خصَائص المكون. إذَا بدأت أي طلبات تحميل للبيَانَات فِي طريقة init والتي ربمَا لم تكتمل، فيجب أن يتعَامل الكود الخَاص بك مع هذه الحَالة ويوفر مؤشر تحميل مرئي.
getOutputs	خيَاري. يتم استدعَاؤه بواسطة الإطَار قبل استلام البيَانَات الجديدة. استخدم هَذا الأسلوب عِندَ إدَارة الخصَائص المرتبطة بشكل حيوي فِي عنصر تحكم.
destroy	مطلوب. يتم استدعَاؤه عندمَا يتم إزَالة المكون مِن شجرة نموذج عنصر المستند (DOM). استخدِم طريقة التدمير للتنظيف وتحرير أي ذَاكرة يستخدمهَا المكون. على سبيل المثَال، إذَا كنت تستخدم React، فاستخدم ReactDOM.unmountComponentAtNode دَاخل التَابع Destroy. ويمنع هَذا أي مشكلات فِي الأدَاء تنتج عن تحميل مكونَات التعليمَات البرمجية وإلغَاء تحميلهَا خلال جلسة متصفح معينة.

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

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

يقوم وقت تشغيل الإطَار بَعد ذلك باستدعَاء طريقة getOutputs للحصول عَلى قيم لجَمِيع خصَائص المكونَات المرتبطة بك.

يقوم وقت التشغيل بَعد ذلك بإعلام المضيف، الذي يتحقق مِن صحة الإخرَاج. إذَا كان الإخرَاج صَالحًا، فإنه يستدعي طريقة updateView عَلى المكون الخَاص بك. إذَا لم تكن صَالحة لأي سبب مِن الأسباب (على سبيل المثَال، وجدت قَاعدة عمل أن المخرجَات الجديدة غير صَالحة)، فستستدعي طريقة updateView الخَاصة بك وتمرير القيمة القديمة مع رسَالة خطأ. فِي أي مِن السينَاريوهين، يمكن للمكون الخَاص بك تحديث واجهة ‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫المُستَخدِم وعرض رسَالة خطأ إذَا كان هَذا منَاسبًا.