تصميم واجهات إدخال البيانات باستخدام مايكروسوفت إكسل VBA

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

تصميم واجهة تفاعلية مع المستخدم User Form

يمكننا تصميم واجهة تفاعلية عن طريق محرر الفيجوال بيسك في الإكسل، حيث يمكننا تصميم واجهة إدخال واستعراض بياناتنا من خلاله، وذلك بأن نفتح محرر الشيفرات، ومن القائمة Insert نختار الأمر UserForm، فتظهر لنا النافذة التالية:

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

بعض الأدوات في صندوق ToolBox

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

• CheckBox: يتيح هذا العنصر للمستخدم تحديد خيار أو أكثر.

• ComboBox: يتيح هذا العنصر للمستخدم تحديد عنصر من القائمة المنسدلة.

• CommandButton: يسمح عنصر التحكم هذا للمستخدم بتنفيذ إجراء معين، حيث يُشغِّل إجراءً فرعيًا منفصلًا.

• Label: يتيح هذا العنصر عرض النص للمستخدم، ويُستخدم عادةً لعرض نص وصفي بجانب العناصر.

• ListBox: يسمح عنصر التحكم هذا للمستخدم بالاختيار من قائمة الخيارات الممكنة.

+OptionButton: يسمح عنصر التحكم هذا للمستخدم بالاختيار من قائمة الخيارات الممكنة اختيارًا واحدًا فقط.

• Ref Edi: يسمح عنصر التحكم هذا للمستخدم بتحديد نطاق من الخلايا.

• TextBox: يتيح هذا العنصر إمكانية عرض النص والسماح للمستخدم بإدخال المعلومات.

• Frame: يتيح هذا العنصر تجميع العناصر الأخرى معًا.

• Calendar: يتيح هذا العنصر تضمين تقويم دائم في ورقة عمل.

• Image: يتيح هذا العنصر إمكانية إضافة رسم أو صورة إلى واجهة المستخدم.

• SpinButton: يتيح هذا العنصر للمستخدم تحديد قيمة بالنقر فوق زرين، إما لزيادة القيمة أو تقليلها.

مثال

نريد تصميم واجهة إدخال تحتوي على البيانات الخاصة بموظفي إحدى المنشآت، ونريد مثلًا البيانات التالية:

• الاسم.
• الجنس.
• الوضع الوظيفي.
• رقم الهاتف.
• تقييم العمل.
• الراتب.

نرسم عناصر الإدخال ضمن مساحة العمل المخصصة، ويلزمنا في البداية عنصر من النوع TextBox لإدخال الاسم، وعنصر من النوع Label، ونحدد أبعاد كل منهما، حيث يمكننا التحكم بأبعادهما من طول وعرض حسب ما نراه مناسبًا.

يمكن تحرير النص الخاص بـ Label عن طريق النقر عليه مرةً واحدةً لتحريره، ثم نحدد النص ونستبدله بما نريد، أو عن طريق القائمة Properties عن طريق الخاصية Caption التي تُعبر عن الاسم الظاهر للمستخدم، ونُغيّر الاسم الذي تحتويه.

الآن نرسم العنصر الخاص بالجنس، وبما أن الإجابة تكون أحد اختيارين، فنختار الأداة OptionButton، ونضع لها العنوان بجانبها.

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

العنصران رقم الهاتف والراتب عبارة عن TextBox، والعنصر تقييم العمل عبارة عن ComboBox، لذا ننسخ العناصر السابقة مع تغيير عناوينها Label.

نُعدل من ترتيب العناصر قليلًا، ونضع كل 3 عناصر في عمود، ونلاحظ أن الأبعاد بالنسبة للعناصر غير متساوية بالكامل، لذا يجب تعديلها لتظهر بنفس الأبعاد وبمظهر أفضل، ولإجراء ذلك نحدد العناصر ذات الشكل المتقارب TextBox وComboBox، ومن القائمة Format الخاصة بتنسيق العناصر نختار الأمر Make Same Size، ومن هنا نجد الخيارات التالية:

• Width: لجعل العناصر بنفس العرض.
• Height: لجعل العناصر بنفس الطول.
• Both: لجعل العناصر بنفس العرض والطول.

نختار منها الأمر Both.

ثم نُنسق العناصر من خلال محاذاة العناصر في العمود الواحد والسطر الواحد، وذلك من القائمة نفسها Format، حيث نختار الأمر Align، فنحدد العناصر في العمود الواحد ونجعل المحاذاة في المنتصف من الأمر Center، ونحدد عناصر كل صف ونجعل المحاذاة سفليةً من الأمر Bottom، ثم نساوي بين تباعد العناصر، وذلك بتحديد عناصر العمود الواحد، ومن نفس القائمة نختار الأمر vertical Spacing الذي يأخذ القيم التالية:

• Make Equal: لجعل كل المسافات الأفقية والعمودية بين العناصر بنفس الحجم.
• Increase: لزيادة المسافة بين العناصر درجةً واحدةً من كل الجوانب.
• Decrease: لتقليل المسافة بين العناصر درجةً واحدةً من كل الجوانب.
• Remove: لإزالة المسافة بين العناصر.

نختار منها الأمر Make Equal.

نُسمي الآن العناصر بأسماء برمجية لاستدعائها عند كتابة الإجراءات واستخدامها فيها، ولإجراء ذلك نحدد العنصر، ومن القائمة Properties عند الخاصية المسماة Name نضع اسمًا مُعبرًا عن العنصر (الاسم اختياري، ولكن يجب ألا يحتوي على فراغات).

نسمي العناصر بالأسماء التالية:

• الاسم = txtName.
• ذكر = OptMale.
• أنثى = OptFemale .
• الوضع الوظيفي = JopStatus.
• رقم الهاتف = PhoneNumber.
• تقييم العمل = Rate.
• الراتب = Salary.

إلى الآن لا تحتوي قوائمنا المنسدلة على أية قيم، لذا نحتاج إلى تخصيص قيم مناسبة لها، وذلك باستيراد مجال من الخلايا من صفحة إكسل في ملف العمل، حيث ننشئ ورقة عمل جديدةً، ونضع فيها القيم المحتملة لجميع القوائم التي نعمل عليها ونستوردها لواجهة الإدخال عن طريق الخاصية RowSource في القائمة Properties، ونضع فيها المجال بذكر اسم الصفحة بعده إشارة تعجب (!) بعدها المجال الخاص بهذه القائمة المنسدلة.

الآن أصبحت قوائمنا جاهزة، ولكن عند تشغيل الواجهة هنا نلاحظ أنه يمكننا تعبئة عنصر القائمة المنسدلة يدويًا، وذلك الأمر خاطئ، لذا يجب أن نقيد واجهة الإدخال بالمجال الذي استوردناه فقط، وذلك عن طريق الخاصية MatchRequired من القائمة Properties، حيث إن القيمة الافتراضية لها False التي تُمكن المستخدم من إدخال بيانات غير موجودة في القائمة، لذا نضع القيمة True بدلًا منها، وذلك لتقييد إدخالات المستخدم بمحتويات القائمة فقط.

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

لنُصمم الآن عنصر زر يعمل على ترحيل البيانات الموجودة في الوجهة إلى صفحة إكسل والإضافة تراكميًا، أي كلما أضفنا بيانات جديدة وضغطنا زر الإدخال تُرحل البيانات إلى السطر الفارغ أسفل البيانات، ونضع اسمًا برمجيًا له BtnExport.

الآن نغير من الاسم البرمجي للواجهة تغييرًا كاملًا، ونضع لها الاسم UserForm، ونغير من الظاهر للمستخدم عن طريق الخاصية Caption.

أصبحت واجهة الإدخال جاهزةً للبرمجة وربطها مع خلايا الصفحة التي سنُرحل إليها البيانات، وهو ما سنتعلمه لاحقًا.

الخصائص العامة للعناصر في القائمة Properties

تحتوي القائمة Properties على خصائص معينة لكل عنصر، حيث تُستخدم لتعيين الميزات أو تحريرها وفقًا لاحتياجات ومتطلبات المستخدم، وللتعديل نضغط على الخاصية ونُعدلها في العمود الأيمن، ومن أهم هذه الخصائص:

• Name: الاسم البرمجي للعنصر الذي تتعرف عليه الإجراءات عند كتابة الشيفرات البرمجية، ويتكون من 40 حرفًا بحد أقصى.
• Caption: تُستخدم هذه الخاصية لتحديد الاسم الظاهري للعنصر الذي يظهر في تصميم الواجهة.
• Height, Width: تُستخدم هذه الخاصية لتعيين ارتفاع وعرض نموذج المستخدم والعناصر الخاصة به، ويمكنك تخصيص الحجم عن طريق إدخاله يدويًا في خاصية الارتفاع والعرض في نافذة الخصائص، وتعيين القيم بالنقاط، ولا يمكن أن تُقبَل القيم السالبة.
• Value: يكثر استخدام هذه الخاصية مع العنصرين CheckBox وOptionButton، حيث تجعل العنصر مُفعلًا تلقائيًا، أي أنه يكون قيمةً افتراضيةً ويأخذ القيمة 1 أو القيمة True، بمعنى أن العنصر مُفعل افتراضيًا، والقيمة 0 أو القيمة False التي تعني أنه غير مفعل؛ أما في العنصرين TextBox وComboBox، فيمكننا وضع قيمة نصية أو رقمية افتراضية، ولكن يجب الانتباه أن تكون القيمة ضمن خيارات القائمة المنسدلة ومطابقةً للقيمة في صفحة الإكسل تمامًا.

• AutoSize: تستخدم هذه الخاصية لتحديد ما إذا كان حجم العنصر الذي يعرض المحتوى بالكامل تلقائيًا أم لا، وإذا عُيِّنت هذه الخاصية على القيمة TRUE فسيعمل تلقائيًا على تغيير حجم عنصر التحكم المحدد وفقًا لحجم المحتوى؛ أما بالنسبة للقيمة FALSE (الخيار الافتراضي)، فسيحتفظ بحجم عنصر التحكم كما هو أثناء التصميم.

• BackColor: تُستخدم هذه الخاصية لتعيين لون الخلفية للعناصر، ولتنفيذ خاصية BackColor يجب التأكد من ضبط نمط الخلفية لخاصية BackStyle على خلفية معتمة.
• BorderColor: تُستخدم هذه الخاصية لتعيين لون الحدود لـ UserForm والعناصر الخاصة به، ولتطبيق خاصية لون الحدود يجب تعيين الخاصية BorderStyle إلى قيمة غير صفرية.

• ControlTipText: تُستخدم هذه الخاصية لعرض النص عندما يشير المستخدم ويمرر الماوس فوق العنصر، وهذه الخاصية مفيدة في تثقيف المستخدمين من خلال تقديم نصائح أو تفسيرات حول استخدام العنصر.

• Font: تحدد هذه الخاصية نوع الخط المستخدم في نموذج المستخدم أو في العناصر، ويمكنك التلاعب بالخط بسهولة عن طريق تحديد اسم الخط الخاص به ونمطه وحجمه.
• MousePointer: تُستخدم لتحديد الطريقة التي يُعرَض مؤشر الماوس فيها عندما يتحرك فوق العنصر، حيث توجد العديد من الأشكال التي يمكن اختيارها.

• Visible: تحدد هذه الخاصية إمكانية الرؤية للتحكم في النموذج، فإذا عُيِّن على القيمة المنطقية TRUE (القيمة الافتراضية)، فسيكون العنصر مرئيًا آخر، وإلا بالنسبة للقيمة False فسيختفي العنصر، ويمكن استخدام هذه الخاصية لعرض عنصر مخفي فقط في حالة استيفاء أي شرط، وإلا سيظل العنصر مخفيًا.

خاتمة

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

اقرأ أيضًا

• المقال السابق: صناعة الدوال الخاصة والتعامل مع الأحداث في مايكروسوفت إكسل VBA
• استخدام الشيفرات لتنفيذ العمليات الأساسية في مايكروسوفت إكسل VBA
• استخدام أدوات مايكروسوفت إكسل لتنسيق الخلايا عن طريق الشيفرات VBA
• الحلقات التكرارية في مايكروسوفت إكسل باستخدام VBA
• العمليات الشرطية في مايكروسوفت إكسل باستخدام VBA
• مدخل إلى البرمجة باستخدام VBA في مايكروسوفت إكسل