استكشف عناصر التحكم والشاشات فِي تطبيقات اللوحة
في هذه الوحدة، سنقوم بفحص عناصر التحكم التي أضفناها بالفعل إلى تطبيقنا، سواء فِي المعرض أو النموذج، وسنضيف أيضًا بعض الشاشات إلى تطبيقنا للاستعداد لوحدتنا التالية.
عناصر التحكم فِي Power Apps
عنصر التحكم هو عنصر واجهة المستخدم الذي ينتج إجراء أو يوضح معلومات. تتشابه العديد من عناصر التحكم فِي Power Apps مع عناصر التحكم التي استخدمتها فِي التطبيقات الأخرى: التسميات ومربعات text-input والقوائم المنسدلة وعناصر التنقل وما إلى ذلك.
بالإضافة إلى عناصر التحكم النموذجية هذه، يحتوي Power Apps على عناصر تحكم أكثر تخصصاً، والتي يمكنك العثور عليها فِي علامة التبويب + إدراج، والتي تتضمن حقل بحث لمساعدتك فِي العثور على ما تبحث عنه.
بعض عناصر التحكم التي يمكنها إضافة فائدة والتأثير فِي تطبيقاتك تتضمن الآتي:
المعارض - عناصر تحكم عبارة عن حاويات تخطيط تحتفظ بمجموعة من عناصر التحكم التي تقوم بإظهار سجلات من مصدر بيانات.
النماذج - عناصر التحكم التي تعرض تفاصيل حول بياناتك وتتيح لك إنشاء سجلات وتحريرها.
الوسائط - تتيح لك عناصر التحكم إضافة صور خلفية وإدراج زر كاميرا (فيمكن للمستخدمين التقاط صور من التطبيق) وقارئ الرمز الشريطي لالتقاط معلومات الهوية بسرعة، والمزيد.
مخططات - عناصر تحكم تسمح لك بإضافة مخططات، بما فِي ذلك بيانات Power BI، بحيث يتمكن المستخدمون من تنفيذ التحليل الفوري لبياناتهم.
للاطلاع على عناصر التحكم المتوفرة، حدّد علامة تبويب إدراج، ثم قم بتوسيع الحقول المختلفة. أثناء قيامك بذلك، سترى فائدة حقل البحث لمساعدتك فِي العثور بسرعة على ما تبحث عنه. حاول إدخال بعض القيم فِي حقل البحث لمعرفة السلوك.
ضوابط المعرض والخصائص
يجب أن ترى عناصر تحكم مختلفة داخل المعرض على الشاشة. يحتوي نوع عنصر التحكم على رمز على يسار الاسم يشير إلى نوع عنصر التحكم. لاحظ كيف أن لديك عنصري تحكم فِي التصميم بما فِي ذلك المستطيل والفاصل. تابع وحدّد عنصر تحكم المستطيل فِي طريقة عرض الشجرة لديك. ستلاحظ أن الإعداد الافتراضي هو الخاصية OnSelect، التي تقول "Select(Parent)". ما لم تقم بتعيين خاصية OnSelect مختلفة لأي من عناصر التحكم فِي المعرض هذه، فسيتم تعيينها افتراضيًا على تحديد (الأصل)، مما يعني أن تحديد عنصر التحكم هذا يؤدي إلى تحديد المعرض نفسه.
الآن حدّد عنصر التحكم المعرض (ليس تسمية أو شكلًا فيه، قد تحتاج إلى العثور عليه فِي طريقة العرض الشجرة) وراجع الخاصية OnSelect. تم تعيينه حاليًا على أنه خطأ، وهذا يعني أن تحديد أي عنصر تحكم فِي معرض الصور لديك لن يفعل شيئًا، حتى تقوم بتحديد الإجراء.
أعد تحديد عنصر التحكم المستطيل من معرض الصور الخاص بك فِي طريقة العرض الشجرة. انتقل الآن إلى الخاصية Visible عن طريق تحديد القيمة المنسدلة الموجودة على يسار حقل إدخال الصيغة (fx). لاحظ أن جميع الخصائص المتوفرة لعنصر التحكم موجودة فِي قائمة قابلة للتمرير، بحيث يمكنك العثور على/تحديد الخاصية Visible. الخاصية Visible هي خاصية يمتلكها كل عنصر تحكم. لاحظ أن عنصر التحكم هذا يحتوي على ThisItem.IsSelected فِي حقل الصيغة.
IsSelected هي قيمة منطقية، يتم تقييمها إلى "true" أو "false"، لتحديد ما إذا كان هذا العنصر فِي المعرض محددًا أم لا. يمكن تحديد عنصر واحد فقط فِي معرضنا فِي أي وقت، لذلك يمكن أن تكون هذه القيمة "true" لعنصر واحد فقط. إذا قمت بوضع التطبيق الخاص بك فِي الوضع إصدار أولي. حاول تحديد بعض ماكينات صنع القهوة المختلفة ولاحظ كيف يظهر عنصر تحكم المستطيل فقط للماكينة التي حددتها. يتوافق المستطيل المرئي أيضًا مع العنصر المعروض فِي النموذج بجوار المعرض.
عناصر التحكم البارزة الأخرى هي الفاصل، وهو أيضًا مستطيل، ولكنه مرئي دائمًا (يتم تلوينه حاليًا باللون الأبيض، لذلك لا يظهر على شاشتنا البيضاء)، وأيقونة بعنوان "NextArrow1"، والتي لا تفعل شيئًا حاليًا سوى التحديد الأصل من المعرض، والتحكم فِي الصورة. لنفترض أننا أردنا تغيير NextArrow1 إلى قلم تحرير، لمنح المستخدم إشارة إلى أنه يجب عليه الضغط على عنصر التحكم هذا لتحرير ماكينة القهوة هذه. هل تتذكر أن شريط الرأس يعكس بعض الخصائص القابلة للتغيير لعنصر التحكم المحدد؟ حدّد زر القائمة المنسدلة "الأيقونة" فِي رأسك وسترى رمز "تحرير القلم الرصاص" معروضًا ضمن "الإجراءات". تابع وحدده لتغيير السهم الأيمن إلى الأيقونة "تحرير".
لنناقش عنصر التحكم الصورة لفترة وجيزة. نظرًا لأننا قمنا بتحديد حقل صورة فِي بياناتك، فقد تمكنت Power Apps من تمييز ما يدخل فِي هذا الحقل من البيانات. يمكنك وضعها فِي الخاصية Image لعنصر التحكم هذا إذا كانت لديك صورة أخرى لعرضها هنا. على سبيل المثال، إذا كان لديك عنصر يفتقد صورة فِي حقل الصورة، فيمكنك استخدام صيغة للتحقق مما إذا كان حقل الصورة فارغًا أم لا، وإذا كان الأمر كذلك، لعرض صورة مختلفة. يريد حقل الصورة ببساطة صورة.
لننتقل إلى عناصر التحكم النموذج الخاص بك نظرًا لأننا تناولنا التصنيفات بالفعل.
عناصر التحكم والخصائص النموذج
لنغطي بسرعة أهم خاصيتين للنموذج. DataSource هو جدول البيانات المتصلة بالنموذج. يعد هذا أمرًا هامًا حتى أنه عندما يتم تحديث النموذج الخاص بك، فإنه يعرف مكان كتابة البيانات. الخاصية المهمة الثانية هي Item. العنصر الخاص بتطبيقنا هو العنصر المحدّد من معرضنا.
داخل النموذج، عندما تحدّد حقلاً، يتم تصوير هذا الحقل على أنه DataCard فِي طريقة عرض الشجرة. لاحظ كيف تحتوي كل DataCard على أربعة عناصر تحكم مختلفة. أهم عنصري تحكم فِي DataCard الخاص بك هما عنصر التحكم فِي التسمية، والذي سيتضمن فِي البداية الاسم DataCardKey، وعنصر التحكم فِي إدخال النص، والذي سيتضمن فِي البداية الاسم DataCardValue. عنصرا التحكم الآخران اختياريان ويعتمدان على ما إذا كانت البيانات مطلوبة أم لا. StarVisible عبارة عن تسمية نصية تحتوي على علامة النجمة تظهر إذا قمت بتعيين هذا الحقل على النحو المطلوب (إما فِي النموذج الخاص بك أو فِي البيانات). ErrorMessage عبارة عن تسمية نصية أخرى تظهر إذا حاولت إرسال نموذج وكان هذا الإدخال مفقودًا. يمكنك إلقاء نظرة على الخصائص Visible لعناصر التحكم هذه. يتم تقييم Visible إلى: "true" أو "false". الدالة And() التي ستراها فِي عنصر التحكم StarVisible تعني أن كلا الشرطين، مفصولين بفاصلة، يجب أن يكونا صحيحين حتى يتم تقييم الدالة على أنها "true".
العديد من الخصائص الموجودة داخل عناصر التحكم فِي النموذج غير قابلة للتغيير إلا إذا قمت "بإلغاء قفل" البطاقة، وهذا لسبب وجيه. على الرغم من أن عنصر التحكم فِي النموذج يهدف إلى تسهيل إدخال البيانات، إلا أنه أقل مرونة لأغراض التصميم. سيتم تغيير حجم عناصر التحكم لدينا تلقائيًا، وسنفقد التعديلات التي أجريناها (تذكر إدخال نص Product Summary) إذا أردنا إضافة حقول أو إزالتها من النموذج الحالي لدينا. في الدروس المستقبلية، سنتعلم المزيد حول تخصيص إدخال البيانات، ولكن دعونا نتجنب تخصيص بطاقات النماذج فِي الوقت الحالي.
بالنسبة لبيانات نموذج ماكينات القهوة الخاصة بنا، فإن عنصر التحكم الوحيد فِي الإدخال غير النصي موجود فِي ImageDataCard. لاحظ كيف تحتوي هذه البطاقة على عنصر تحكم إضافي بالإضافة إلى العناصر الأربعة التي رأيناها سابقًا، وهو عنصر التحكم إضافة صورة. عنصر التحكم إضافة صورة هو عنصر تحكم فِي الوسائط يسمح لك بتحديد صورة من جهازك (أو موقع عبر الإنترنت) لاستبدال الصورة الموجودة. عند "النقر أو التحديد لإضافة صورة"، سترى نافذة منبثقة مفتوحة تسمح لك بتحديد ملف صورة ثم فتح تلك الصورة فِي النموذج.
هناك خاصيتان هامتان من الهام معرفتهما لكل بطاقة بيانات هما الخاصية Default والخاصية Update. تخبر الخاصية Default أي عمود من بياناتنا يوفر القيمة الافتراضية لتلك البطاقة. تخبر الخاصية Update من أي عنصر تحكم الإدخال تأتي البيانات التي تستخدمها Power Apps لتحديث بيانات هذا السجل.
حدّد بطاقة Product Summary، فقط البطاقة وليس حقل إدخال النص داخل البطاقة. لاحظ أن القيمة Default للبطاقة هي ThisItem.'Product Summary'، وهي القيمة التي تراها فِي حقل إدخال النص DataCardValue. قم بالتبديل إلى الخاصية Update للبطاقة ولاحظ أن هذه البطاقة تتلقى معلومات التحديث من DataCardValue.Text الخاص بالبطاقة. لذلك، عندما نرسل النموذج، نأخذ Power Apps كل ما هو مكتوب فِي حقل إدخال النص هذا ونقوم بتحديث 'Product Summary' لهذا العنصر.
طالما أن عنصر التحكم الذي تضيفه يوفر نوع البيانات التي يتوقعها مصدر بياناتك، من الممكن إلغاء قفل عناصر التحكم الأخرى وإضافتها فِي البطاقة، وتغيير خاصية التحديث الخاصة بالبطاقة!
أخيرًا، يجب علينا تزويد Power Apps بالأمر SubmitForm حتى يتمكن من حفظ أي تغييرات ندخلها فِي النموذج الخاص بنا. في حالتنا، لدينا الزر "حفظ التغييرات" أسفل النموذج، والذي يناسب هذا الغرض. إذا قمت بتحديد الزر (أثناء وجودك فِي وضع التحرير)، لاحظ أن الخاصية OnSelect هي SubmitForm(Form1)، والتي تأخذ كل بطاقة نموذج محدثة وتكتب ذلك مرة أخرى إلى مصدر البيانات لدينا.
إضافة شاشات
حتى الآن، كان تطبيقنا يحتوي على شاشة واحدة فقط. في الوحدتين التاليتين، سنضيف بعض الوظائف الإضافية بينما نواصل تخصيص تطبيقنا. اتبع هذا الإجراء لإضافة شاشات إلى تطبيقك:
حدّد Screen1 لديك فِي لوحة طريقة عرض الشجرة، ثم حدّد الزر الشاشة الجديدة من شريط الأوامر أو من أعلى لوحة طريقة عرض الشجرة، ثم حدّد قالب الشاشة الفارغ.
كرر لإضافة شاشة ثالثة.
دعونا نعيد تسمية شاشاتنا الثلاث. للقيام بذلك، انقر نقرًا مزدوجًا فوق Screen1 فِي لوحة طريقة عرض الشجرة وأعد تسميتها "Catalog Screen".
كرر العملية لإعادة تسمية Screen2 باسم "Home Screen" وScreen3 باسم "Admin Screen".
أخيرًا، لنعد وضع الشاشات فِي طريقة عرض الشجرة. يمكنك القيام بذلك عن طريق تحديد زر علامة الحذف، ثم الأمر تحريك لأعلى.
الآن لنواصل تعديل تطبيقنا لتحسين تجربة المستخدم بعد أن أصبح لدينا فهم أفضل لعناصر التحكم فِي المعرض والنماذج ونعرف كيفية إضافة شاشات إلى تطبيقنا.