نظرة عامة حول مكون اللوحة

  • مقالة

ملاحظة

  • يوضح هذا القسم مكونات اللوحة التي تشمل إمكانيات قابلية توسيع واجهة المستخدم منخفضة التعليمات البرمجية. كما يمكن للمطورين المحترفين استخدام Power Apps component framework لبناء مكونات التعليمات البرمجية.
  • يمكن أيضًا استخدام مكونات اللوحة في التطبيقات المستندة إلى نموذج باستخدام الصفحات المخصصة ومكتبة المكونات. مزيد من المعلومات: إضافة مكونات اللوحة إلى صفحة مخصصة في تطبيق يستند إلى نموذج

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

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

شاهد هذا الفيديو للتعرف على كيفية استخدام المكونات في تطبيقات اللوحة:

المكونات في تطبيقات اللوحة

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

لإنشاء مكون داخل تطبيق، انتقل إلى طريقة عرض الشجرة، وحدد علامة التبويبالمكونات، ثم حدد مكون جديد:

إنشاء مكون مخصص جديد باستخدام طريقة عرض الشجرة.

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

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

يتم إدراج المكونات المتوفرة داخل التطبيق ضمن الفئة مخصص في قائمة مكونات داخل طريقة عرض الشجرة. يتم إدراج المكونات المستوردة من مكتبات المكونات ضمن فئة مكونات المكتبة:

إدراج مكونات في التطبيق.

ملاحظة

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

الخصائص المخصصة

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

ملاحظة

توفر الميزة التجريبية لخصائص المكون المحسن مزيدا من الخيارات للخصائص، بما في ذلك الوظائف ووظائف السلوك. لمزيد من المعلومات، راجع خصائص مكون Canvas (تجريبية)

خاصية Input هي كيفية تلقي مكون للبيانات التي سيتم استخدامها في المكون. تظهر خصائص Input في علامة تبويب الخصائص في الجزء الأيسر عند تحديد مثيل للمكون. يمكنك تكوين خصائص الإدخال بتعبيرات أو صيغ، تمامًا كما تقوم بتكوين الخصائص القياسية في عناصر التحكم الأخرى. ويكون لعناصر التحكم الأخرى خصائص الإدخال، مثل الخاصية Default لعنصر التحكم إدخال النص.

يتم استخدام خاصية الإخراج لإرسال البيانات أو حالة المكون. على سبيل المثال، تكون الخاصية Selected في عنصر تحكم المعرض خاصية إخراج. عند إنشاء خاصية إخراج، يمكنك تحديد عناصر التحكم الأخرى التي يمكنها الإشارة إلى حالة المكون.

ستوضح لك ما يلي المزيد حول هذه المفاهيم.

إنشاء مكون مثال

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

المعرض النهائي.

ملاحظة

ويوصى باستخدام مكتبه مكونات عند إنشاء مكونات لإعادة استخدامها. لا يؤدي تحديث المكونات داخل تطبيق إلا لإتاحة تحديثات المكونات داخل هذا التطبيق. عند استخدام مكتبة مكونات، سيطلب منك تحديث المكونات إذا كانت المكونات داخل مكتبة يتم تحديثها ونشرها.

إنشاء مكون جديد

  1. أنشئ تطبيق لوحة فارغ.

  2. في طريقة عرض الشجرة حدد المكونات ثم حدد مكون جديد لإنشاء مكون جديد.

    إنشاء مكون مخصص جديد باستخدام طريقة عرض الشجرة.

  3. حدد المكون الجديد في الجزء الأيسر، وحدد علامة القطع (...)، ثم حدد إعادة تسمية. اكتب الاسم أو الصقه على أنه MenuComponent.

  4. في الجزء الأيسر، قم بتعيين عرض المكون بقيمة 150 وارتفاعه بقيمة 250، ثم حدد خاصية مخصصة جديدة. يمكنك أيضًا تعيين الارتفاع والعرض إلى أي قيمه أخرى حسب الحاجة.

    خاصية جديدة.

  5. في مربعات اسم العرض وواسم الخاصية ووالوصف، اكتب نصًا أو الصقه كعناصر.

    مربعات اسم العرض واسم الخاصية والوصف.

    لا تضع مسافات في اسم الخاصية لأنه سيتم الإشارة إلى المكون بهذا الاسم عند كتابة صيغة. على سبيل المثال، ComponentName.PropertyName.

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

  6. في القائمة نوع البيانات، حدد جدول، ثم حدد إنشاء.

    نوع بيانات الخاصية.

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

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

    ![خاصية Custom input في علامة التبويب "الخصائص".](./media/create-component/properties-tab.png "خاصية Custom input في علامة التبويب "الخصائص"")

    كما يوضح الرسم التالي، يمكنك أيضًا تحرير قيمة الخاصية في علامة التبويب خيارات متقدمة من الجزء الأيسر.

  7. عيِّن خاصية Items المكون وفقًا لهذه الصيغة:

    Table({Item:"SampleText"})

    الصيغة.

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

  9. تأكد من إظهار قائمة الخصائص لخاصية Items (كما هو الحال افتراضيًا). ثم عيِّن قيمة هذه الخاصية على هذا التعبير:

    MenuComponent.Items

    وبهذه الطريقة، تتم قراءة خاصية Items لعنصر تحكم المعرض وتعتمد على خاصية إدخال Items‎ للمكون.

  10. اختياري - عيِّن خاصية BorderThickness الخاصة بعنصر التحكم المعرض على القيمة 1 وخاصية TemplateSize على 50. يمكنك أيضًا تحديث قيم سمك الحد وحجم القالب إلى اي قيمة أخرى ملائمة.

إضافة مكون إلى شاشة

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

  1. في الجزء الأيسر، حدد قائمة الشاشات، ثم حدد الشاشة الافتراضية.

    الشاشة الافتراضية.

  2. من علامة التبويب إدراج، افتح قائمة المكونات، ثم حدد MenuComponent.

    إدراج مكون.

    تتم تسمية المكون الجديد MenuComponent_1 افتراضيًا.

  3. عيِّن خاصية Items MenuComponent_1 وفقًا لهذه الصيغة:

    Table({Item:"Home"}, {Item:"Admin"}, {Item:"About"}, {Item:"Help"})

    يمثل هذا المثيل الرسم الموضح، ولكن يمكنك تخصيص النص والخصائص الأخرى لكل مثيل.

    المعرض النهائي.

إنشاء خاصية إخراج واستخدامها

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

  1. افتح قائمة المكونات، ثم حدد MenuComponent.

  2. في الجزء الأيسر، حدد علامة التبويب الخصائص، ثم حدد خاصية مخصصة جديدة.

  3. في المربعات اسم العرض وواسم الخاصية ووالوصف، اكتب تم التحديد أو الصقها.

  4. ضمن نوع الخاصية، حدد إخراج، ثم حدد إنشاء.

    نوع الخاصية كإخراج.

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

    Gallery1.Selected.Item

    جزء خيارات متقدمة.

  6. في الشاشة الافتراضية للتطبيق، أضف تسمية، وعيِّن خاصية Text لهذا التعبير، واضبط الأرقام في اسم المكون إذا لزم الأمر:

    MenuComponent_1.Selected

    MenuComponent_1 هو الاسم الافتراضي لمثيل، وليس اسم تعريف المكون. يمكنك إعادة تسمية أي مثيل.

  7. أثناء الضغط على مفتاح Alt، حدد كل عنصر في القائمة.

    يعرض عنصر التحكم التسمية عنصر القائمة الذي قمت بتحديده مؤخرًا.

Scope

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

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

الوصول إلى مفتاح تبديل نطاق التطبيق في جزء خاصية المكون

عند تشغيل الوصول إلى نطاق التطبيق، يمكن الوصول إلى ما يلي من داخل المكون:

  • المتغيرات العمومية
  • المجموعات
  • عناصر التحكم والمكونات على الشاشات، مثل عنصر التحكم TextInput
  • مصادر بيانات الجدولية، مثل جداول Dataverse

‏‫عند إيقاف تشغيل هذا الإعداد، لا يكون أيًا مما سبق متاحًا للمكون.‬ لا تزال دالات Set وCollect متوفرة ولكن المتغيرات والمجموعات الناتجة يتم تحديدها لمثيل المكون ولا تتم مشاركتها مع التطبيق.

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

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

ملاحظة

  • يمكنك إدراج مثيلات مكونات في شاشة في مكتبة مكونات، ومعاينة الشاشة لأغراض الاختبار.
  • لا يتم عرض مكتبة المكونات عند استخدام Power Apps Mobile.

تصدير المكونات واستيرادها (تم إيقاف العمل بها)

ملاحظة

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

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

تمكين تصدير المكونات واستيرادها.

بعد تمكين هذه الميزة، يمكنك استخدام الإمكانيات التالية لاستيراد المكونات وتصديرها.

استيراد مكونات من تطبيق آخر

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

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

مربع الحوار استيراد مكونات.

يمكنك حفظ تطبيق بمكونات موجودة في ملف محليًا ثم إعادة استخدام الملف عن طريق استيراده. يمكنك استخدام الملف لاستيراد مكونات إلى تطبيق آخر.

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

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

ملاحظة

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

تصدير المكونات من التطبيق الخاص بك

يمكنك تصدير مكونات إلى ملف وتنزيلها للاستيراد إلى تطبيق آخر.

حدد الخيار تصدير المكونات من قسم المكونات في طريقة عرض الشجرة في الجزء الأيسر:

تصدير مكونات بطريقة عرض الشجرة.

يمكنك أيضًا استخدام قائمة إدراج ثم تحديد القائمة المنسدلة المخصصة بدلاً من ذلك.

قائمة إدراج بتصدير المكونات.

يؤدي تحديد تصدير مكونات إلى تنزيل مكونات إلى ملف:

مكون التنزيل.

ويستخدم ملف المكون الذي تم تنزيله امتداد اسم الملف .msapp.

استيراد مكونات من ملف مكونات مُصدرة

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

استيراد ملف المكون.

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

استيراد مكونات من تطبيق تم تصديره

يمكنك حفظ تطبيق محليًا باستخدام الخيار الملف > حفظ باسم:

حفظ التطبيق.

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

القيود المعروفة

  • لا يمكن تكوين خاصية الإدخال المخصصة إلى قيمة خاصية إخراج مخصصة عبر مثيلات مماثلة أو مختلفة عندما يكون لديك مثيلين أو أكثر من نفس المكون في أحد التطبيقات. سينتج عن هذا الإجراء رسالة تحذير مرجعية دائرية. للتغلب على هذا القيد، يمكنك إنشاء نسخة من المكون داخل تطبيقك.
  • إضافة تدفقات Power Automate وتشغيلها في مكتبات المكونات غير مدعوم.
  • لا يمكنك حفظ مصادر البيانات أو عناصر التحكم التي تتضمن بيانات من مصادر البيانات هذه (مثل النماذج أو الشبكات غير الهامة أو جداول البيانات) التي تشتمل على مكونات.
  • لا يمكنك إدراج مكون في معرض أو نموذج (بما في ذلك نموذج SharePoint ).
  • لا تدعم المكونات دالة UpdateContext، ولكن يمكنك إنشاء متغيرات وتحديثها في أحد المكونات باستخدام الدالة Set. ويقتصر نطاق هذه المتغيرات على المكون، ولكن يمكنك الوصول إليها من خارج المكون من خلال خصائص الإخراج المخصصة.

الخطوات التالية

تعرف على كيفية استخدام مكتبة مكونات لإنشاء مستودع بالمكونات القابلة لإعادة الاستخدام.

(راجع أيضًا)