كتابة مكون Power Apps منبثق

15 دقائق

في بعض الأحيان، قد يُطلب منك عرض نافذة منبثقة لمستخدم التطبيق الخاص بك. يكتشف Power Apps Component Framework عن واجهة API منبثقة تتيح لك تحقيق هذا المطلب. يوضح المثال التالي كيفية إنشاء نافذة منبثقة تعرض رسم أداة التحميل. يمكن أن تساعدك هذه الطريقة فِي تحقيق تجربة مستخدم مُرضية فِي العمليات طويلة الأمد حيث يتم حظر واجهة المستخدم الأساسية من تنفيذ العمليات.

ملاحظة

خدمة النوافذ المنبثقة من Power Apps Component Framework مدعومة فقط فِي تطبيقات Power Apps التي تستند إلى النموذج.

تهيئة مشروع المكون الخاص بك

لتهيئة مشروع المكون الخاص بك، اتبع الخطوات التالية:

ابدأ تشغيل Visual Studio Code.
حدّد وحدة طرفية ثم حدّد وحدة طرفية جديدة.
قم بتغيير الدليل إلى المجلد المصدر.
```
cd source
```
من الدليل المصدر، أنشئ دليلاً باسم Popup-Component.
```
md Popup-Component
```
شغّل الأمر التالي للتبديل إلى الدليل الجديد.
```
cd Popup-Component
```

تهيئة المشروع عن طريق تشغيل الأمر التالي.

pac pcf init --namespace SampleNamespace --name PopupComponent --template field

قم بتشغيل npm install لتحميل مكتبات مستقلة فِي المشروع.
```
npm install
```
افتح المشروع فِي Visual Studio Code عن طريق تشغيل الأمر التالي.
```
code -a .
```

تنفيذ منطق مكون التعليمات البرمجية

لتنفيذ منطق مكون التعليمات البرمجية، اتبع الخطوات التالية:

وسّع المجلد PopupComponent وافتح الملف ControlManifest.Input.xml.

استبدل البيان بأكمله بـ XML التالي.

<?xml version="1.0" encoding="utf-8" ?>
<manifest>
  <control namespace="SampleNamespace" constructor="PopupComponent" version="0.0.1" display-name-key="PopupComponent_Display_Key" description-key="PopupComponent_Desc_Key" control-type="standard">
    <!-- property node identifies a specific, configurable piece of data that the control expects from CDS -->
    <property name="sampleProperty" display-name-key="Property_Display_Key" description-key="Property_Desc_Key" of-type="SingleLine.Text" usage="bound" required="true" /> 
    <resources>
      <code path="index.ts" order="1"/>
      <css path="css/loader.css" order="1" />
    </resources>
  </control>
</manifest>

تقوم بإضافة ملفات الدعم الموجودة فِي هذا البيان لاحقاً.

افتح الملف Index.ts.
فوق الأسلوب export class، أدخل طريقة الواجهة التالية بحيث يمكنك كشف بعض الأساليب الأخرى التي توفرها واجهة برمجة التطبيقات (API) المنبثقة (popupStyle وshadowStyle).
```
    interface Popup extends ComponentFramework.FactoryApi.Popup.Popup {
    popupStyle: object;
    shadowStyle: object;
}
```

أضف المتغير التالي فوق الأسلوب constructor.

private _container: HTMLDivElement;
private _popUpService: ComponentFramework.FactoryApi.Popup.PopupService;

أضف المنطق التالي إلى الأسلوب init التابع للمكون الخاص بك.

this._container = document.createElement('div');
//============ content of our popup =============
let popUpContent = document.createElement('div');
popUpContent.setAttribute("class", "loader");

//============ our Popup object =============
let popUpOptions: Popup = {
    closeOnOutsideClick: true,
    content: popUpContent,
    name: 'loaderPopup', // unique popup name
    type: 1, // Root popup
    popupStyle: {
        "width": "100%",
        "height": "100%",
        "overflow": "hidden",
        "backgroundColor": "transparent",
        "display": "flex",
        "flexDirection": "column",
        "position": "absolute",
        "margin-top": 28 + "px"
    },
    shadowStyle:{
        position: "absolute",
        width: "100%",
        height: "100%"
    }
};

this._popUpService = context.factory.getPopupService();

this._popUpService.createPopup(popUpOptions);

container.appendChild(this._container);
this._popUpService.openPopup('loaderPopup');

إضافة تصميم إلى مكون التعليمات البرمجية‬

لإضافة تصميم إلى مكون التعليمات البرمجية‬، اتبع الخطوات الآتية:

أنشئ مجلد css فرعياً جديداً تحت المجلد PopupComponent.
أنشئ ملف loader.css جديداً داخل مجلد CSS الفرعي.

أضِف محتوى النمط التالي إلى ملف loader.css.

.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    position: fixed;
    width: 120px;
    height: 120px;
    top:40%;
    left:50%;
    animation: spin 2s linear infinite;
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

حدّد ملف وحفظ كل تغييراتك.

إنشاء المكون وتشغيله

لإنشاء المكون وتشغيله، اتبع الخطوات التالية:

أنشئ حلك عن طريق تشغيل الأمر التالي.
```
npm run build
```
وبناء على الإنشاء الناجح، يمكنك اختبار المكون المنبثق للتنسيق الجديد عن طريق تشغيل npm start.
```
npm start
```
أغلق نافذة متصفح مفعّل الاختبار.
عد إلى الوحدة الطرفية وأوقف المراقب عن طريق الضغط على [CONTROL] + C.
اكتب Y ثم اضغط على [ENTER].

ملاحظة

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

لاختبار وظيفة المنبثق، تحتاج إلى نشر واستضافة المكون فِي بيئة Microsoft Power Platform. لمزيد من المعلومات حول كيفية نشر مكونات التعليمات البرمجية، راجع "إنشاء حزمة حل مكون التعليمات البرمجية" فِي الوحدة النمطية إنشاء مكون Power Apps.

الملاحظات

هل كانت هذه الصفحة مفيدة؟