تطوير أودو

كيفية إضافة الألوان إلى صفوف وخلايا عرض القائمة في أودو

Q: هل يمكنني استخدام decoration-* على الأزرار أو عناصر أخرى داخل عرض القائمة؟

يُدعم `decoration-*` على عنصر ` ` نفسه (مستوى الصف) وعلى عناصر ` ` داخل القائمة (مستوى الخلية). غير مدعوم على عناصر ` ` داخل القائمة — استخدم سمة `invisible` على الأزرار لإظهارها أو إخفائها بناءً على حالة السجل بدلًا من ذلك.

Q: هل يمكنني تطبيق لون خلفية بدلًا من لون النص فقط؟

تُطبّق سمات `decoration-*` المضمّنة فقط فئات لون نص Bootstrap (`text-success` و`text-danger` وما إلى ذلك) — وليس ألوان الخلفية. لألوان الخلفية، تحتاج إلى فئة CSS مخصصة. أضف فئة إلى الصف عبر نمط `decoration-*` مخصص (هذا غير مدعوم أصلًا) أو أضف ملف SCSS مخصصًا في وحدتك يستهدف فئة Bootstrap للصف. الحل البديل الشائع هو قبول التنسيق بلون النص فقط، وهو ما يتسق مع واجهة أودو القياسية.

Q: هل decoration-* متاح في عروض Kanban أو النموذج؟

لا. سمات `decoration-*` خاصة بعروض القائمة (الشجرة). لعروض Kanban آلية ألوان خاصة بها عبر حقل `color` على بطاقة Kanban وسمة ` `. لا تمتلك عروض النماذج زخرفة على مستوى الصف — استخدم `invisible` و`readonly` للتنسيق المشروط للحقول، أو طبّق فئة CSS مخصصة عبر ودجة.

Q: هل يمكنني دمج decoration-bf (عريض) مع لون مثل decoration-danger؟

نعم. زخارف الألوان (`decoration-success` و`decoration-danger` وما إلى ذلك) وزخارف الخطوط (`decoration-bf` و`decoration-it`) مستقلة — تُطبّق خصائص CSS مختلفة ولا تتعارض. يمكن أن يكون الصف عريضًا وأحمرًا في آنٍ واحد. يمكنك حتى استخدام تعبيرات مختلفة: عريض للسجلات عالية الأولوية، وأحمر للسجلات المتأخرة، بحيث يحصل السجل المتأخر عالي الأولوية على كليهما.

Q: عرض القائمة لديه شروط زخرفة كثيرة وبات من الصعب قراءته. هل هناك نهج أنظف؟

انقل منطق الزخرفة إلى حقل محسوب مخزَّن في النموذج — مثلًا حقل `Char` باسم `row_color` يُعيد `'danger'` أو `'warning'` أو `'success'` أو `''` بناءً على حالة السجل وتواريخه. ثم استخدم `decoration-danger="row_color == 'danger'"` وما إلى ذلك على عنصر ` `. هذا يُبقي XML العرض نظيفًا ويضع المنطق في مكانه الصحيح — نموذج Python — حيث يكون اختباره وإعادة استخدامه أسهل.

استخدم سمات decoration-* لترميز الصفوف والخلايا بالألوان في عروض قائمة أودو بناءً على قيم الحقول — مع صيغة التعبيرات وجميع أنواع الزخرفة وملاحظة الترحيل لإعادة التسمية من tree إلى list. موثق لأودو 18 و19.

iWesabe Editorial Team١ سبتمبر ٢٠٢١7 دقائق للقراءة

تدعم عروض قائمة أودو التنسيق المرئي على مستوى الصف والخلية عبر سمات `decoration-*`. تقبل هذه السمات نفس صيغة تعبيرات Python التي تستخدمها `invisible` و`readonly` — تُقيَّم وفق قيم حقول الصف الحالي وتُطبّق فئة نص Bootstrap عندما يكون التعبير صحيحًا. هذا يجعل من السهل تمييز السجلات المتأخرة باللون الأحمر أو الطلبات المؤكدة باللون الأخضر أو الإدخالات المسودة بخط مائل دون كتابة أي JavaScript مخصص.

كيف يعمل تلوين صفوف عرض القائمة

تُوضع سمات الزخرفة على عنصر `` (المعروف سابقًا بـ ``) لتلوين الصفوف بالكامل، أو على عناصر `` الفردية داخل القائمة لتلوين تلك الخلية فقط. تأخذ كل سمة سلسلة تعبير Python. عندما يُقيَّم التعبير بـ `True` لسجل معين، يضيف أودو فئة CSS لـ Bootstrap المقابلة إلى عنصر الصف أو الخلية.

مرجع سمات الزخرفة

جميع سمات decoration-* — أودو 16–19
السمة	فئة CSS المطبّقة	التأثير المرئي	حالة الاستخدام الشائعة
decoration-success	text-success	نص أخضر	سجلات مؤكدة أو منتهية أو مدفوعة
decoration-warning	text-warning	نص برتقالي / كهرماني	سجلات معلقة أو قيد التنفيذ أو تحتاج انتباهًا
decoration-danger	text-danger	نص أحمر	سجلات متأخرة أو ملغاة أو محظورة أو بها أخطاء
decoration-info	text-info	نص أزرق / سماوي	سجلات إعلامية أو مسودة أو جديدة
decoration-muted	text-muted	نص رمادي / خافت	سجلات مؤرشفة أو غير نشطة أو ملغاة
decoration-primary	text-primary	لون العلامة التجارية الأساسي	سجلات مميزة أو محددة
decoration-bf	fw-bold (وزن خط عريض)	نص عريض	الصفوف المهمة والإجماليات والأولوية العالية
decoration-it	fst-italic (أسلوب خط مائل)	نص مائل	السجلات المسودة أو التقديرية أو المؤقتة

الزخرفة على مستوى الصف (الصف بأكمله)

xml

<!-- Row-level decoration on the <list> element -->
<!-- Each decoration-* attribute colours ALL cells of a matching row -->
<list decoration-success="state == 'sale'"
      decoration-warning="state == 'draft'"
      decoration-danger="date_deadline and date_deadline &lt; current_date"
      decoration-muted="state == 'cancel'"
      decoration-bf="priority == '2'"
      decoration-it="state == 'draft'">

    <field name="name"/>
    <field name="partner_id"/>
    <field name="date_deadline"/>
    <field name="amount_total"/>
    <field name="state"/>
    <field name="priority" column_invisible="True"/>
    <!-- ↑ Include fields used in expressions even if not shown as columns -->
</list>

الزخرفة على مستوى الخلية (حقل فردي)

يمكنك أيضًا تطبيق `decoration-*` على عنصر `` فردي داخل القائمة. تُطبَّق الزخرفة عندئذٍ فقط على خلية ذلك العمود، تاركةً بقية الصف بدون تنسيق. هذا مفيد عندما تريد تمييز قيمة محددة — مثل جعل التواريخ المتأخرة حمراء مع إبقاء الصف نفسه محايدًا.

xml

<!-- Cell-level decoration — only that field's cell is styled -->
<list>
    <field name="name"/>
    <field name="partner_id"/>

    <!-- Colour the deadline cell based on urgency -->
    <field name="date_deadline"
           decoration-danger="date_deadline and date_deadline &lt; current_date"
           decoration-warning="date_deadline and date_deadline == current_date"/>

    <!-- Highlight the amount when it exceeds a threshold -->
    <field name="amount_total"
           decoration-success="amount_total &gt;= 10000"
           decoration-warning="amount_total &gt; 0 and amount_total &lt; 10000"
           decoration-muted="amount_total == 0"/>

    <field name="state"
           decoration-success="state == 'sale'"
           decoration-danger="state == 'cancel'"
           decoration-it="state == 'draft'"/>
</list>

إعادة التسمية من tree إلى list (أودو 16)

عنصر tree مقابل list عبر إصدارات أودو
إصدار أودو	عنصر <tree>	عنصر <list>	دعم decoration-*	التوصية
أودو 15	✓ الاسم الرسمي	✗ غير معروف	✓ مدعوم على <tree>	استخدم <tree>
أودو 16	✓ اسم مستعار (يعمل)	✓ الاسم الرسمي الجديد	✓ مدعوم على كليهما	استخدم <list>، انقل <tree>
أودو 17	✓ الاسم المستعار محتفظ به	✓ رسمي	✓ مدعوم على كليهما	استخدم <list>
أودو 18 و19	✓ الاسم المستعار محتفظ به	✓ رسمي	✓ مدعوم على كليهما	استخدم <list>

دمج زخارف متعددة

يمكنك دمج زخارف الألوان مع زخارف الخط على نفس العنصر. عندما تكون تعبيرات زخرفة متعددة صحيحة في آنٍ واحد، تُطبَّق جميع فئات CSS المطابقة. النمط الشائع هو عريض + لون للسجلات ذات الأولوية.

xml

<!-- Bold + red for high-priority overdue records -->
<list decoration-danger="priority == '2' and date_deadline and date_deadline &lt; current_date"
      decoration-bf="priority == '2'"
      decoration-warning="state == 'draft'"
      decoration-it="state == 'draft'"
      decoration-muted="state == 'cancel'">

    <field name="name"/>
    <field name="date_deadline"/>
    <field name="state"/>
    <field name="priority" column_invisible="True"/>
</list>

استخدام current_date في تعبيرات الزخرفة

`current_date` هو متغير خاص متاح في تعبيرات زخرفة عرض القائمة (وفي سلاسل النطاق). يحمل تاريخ اليوم ككائن `datetime.date`، مما يتيح مقارنات التاريخ دون ترميز القيم. كما هو متاح كسلسلة نصية بتنسيق ISO (`'YYYY-MM-DD'`) عند استخدامه في سلاسل النطاق.

xml

<!-- Highlight overdue records (deadline passed) in red -->
<!-- Highlight due-today records in orange -->
<!-- Highlight upcoming (within 7 days) in info blue -->
<list
  decoration-danger="date_deadline and date_deadline &lt; current_date"
  decoration-warning="date_deadline and date_deadline == current_date"
  decoration-info="date_deadline and date_deadline &gt; current_date">
    <field name="name"/>
    <field name="date_deadline"/>
</list>

استكشاف الأخطاء

مشكلات الزخرفة الشائعة وحلولها
الأعراض	السبب المحتمل	الحل
الزخرفة لا تُطبَّق أبدًا — تظل الصفوف بدون تنسيق	الحقل المستخدم في التعبير غير محمّل (غير مضمّن كعنصر <field> في القائمة)	أضف الحقل مع column_invisible="True" لكي يحمّل أودو القيمة لتقييم التعبير.
خطأ تحليل XML عند استخدام < أو > في التعبير	< و> هي أحرف XML محجوزة ويجب تحويلها داخل قيم السمات	استبدل < بـ < و> بـ > داخل سلسلة سمة الزخرفة.
الزخرفة تُطبَّق على صفوف خاطئة (صحيحة دائمًا أو خاطئة دائمًا)	يستند التعبير إلى حقل قيمته دائمًا متشابهة (مثلًا معرّف علائقي بدلًا من قيمة الاختيار)	تحقق من نوع الحقل: تستخدم حقول الاختيار قيمًا نصية مثل 'done' وليس أعدادًا صحيحة. تقارن حقول Many2one المعرّفات (أعداد صحيحة) وليس أسماء العرض.
زخرفتا لون نشطتان معًا — يظهر لون غير متوقع	تعبيران للزخرفة صحيحان في آنٍ واحد؛ خصوصية CSS تحدد أيهما يفوز	اجعل التعبيرات متنافية حصريًا باستخدام 'and not' أو 'and state != ...' لضمان أن واحدًا فقط يكون صحيحًا في أي وقت.
decoration-bf أو decoration-it غير مرئيَّين	CSS لقالب مخصص يتجاوز فئات Bootstrap fw-bold أو fst-italic	افحص عنصر الصف في أدوات المطوّر بالمتصفح لتأكيد إضافة الفئة. إذا كانت متجاوَزة، أضف قاعدة CSS مخصصة في SCSS وحدتك مع !important أو خصوصية أعلى.

ملاحظات الإصدار

زخرفة عرض القائمة عبر إصدارات أودو
إصدار أودو	التغييرات الرئيسية المؤثرة على زخرفة عرض القائمة
أودو 15	سمات decoration-* مدعومة على <tree>. attrs تُستخدم لرؤية الصف (مهملة في أودو 16). current_date متاح.
أودو 16	تمت إعادة تسمية <tree> إلى <list> (الاسم المستعار محتفظ به). إهمال attrs — استخدم invisible على <field>. تم تقديم column_invisible لإخفاء الأعمدة.
أودو 17	حذف attrs. <list> رسمي؛ <tree> محتفظ به كاسم مستعار. واجهة API لـ decoration-* لم تتغير. فئات Bootstrap 5 (fw-bold وfst-italic) تحل محل أسماء Bootstrap 4 القديمة لـ decoration-bf/decoration-it.
أودو 18 و19	لا توجد تغييرات كاسرة لسمات decoration-*. <list> رسمي، الاسم المستعار <tree> لا يزال يعمل.

تحتاج تنسيقًا مخصصًا لعرض القائمة أو ترقية كاملة لوحدة أودو؟

يتولى مطورونا المعتمدون من أودو تخصيص العروض وترقية الوحدات من أودو 15 إلى 18/19 والتحقق الكامل من الامتثال للشركات السعودية — ZATCA وGOSI وPDPL.

واتساب

الأسئلة الشائعة

هل يمكنني استخدام decoration-* على الأزرار أو عناصر أخرى داخل عرض القائمة؟

يُدعم `decoration-*` على عنصر `` نفسه (مستوى الصف) وعلى عناصر `` داخل القائمة (مستوى الخلية). غير مدعوم على عناصر `` داخل القائمة — استخدم سمة `invisible` على الأزرار لإظهارها أو إخفائها بناءً على حالة السجل بدلًا من ذلك.

لماذا لا يعمل decoration-danger على date_deadline عندما يكون الحقل فارغًا؟

يُقيَّم حقل التاريخ الفارغ إلى `False`. تعبير مثل `date_deadline < current_date` يُثير خطأ عندما يكون `date_deadline` هو `False` لأنه لا يمكنك مقارنة `False` بتاريخ. دائمًا احمِ مقارنات التاريخ بتحقق صحة: `date_deadline and date_deadline < current_date`. يُقصر `and` — إذا كان `date_deadline` هو `False`، يُقيَّم التعبير فورًا إلى `False` دون محاولة المقارنة.

هل يمكنني تطبيق لون خلفية بدلًا من لون النص فقط؟

تُطبّق سمات `decoration-*` المضمّنة فقط فئات لون نص Bootstrap (`text-success` و`text-danger` وما إلى ذلك) — وليس ألوان الخلفية. لألوان الخلفية، تحتاج إلى فئة CSS مخصصة. أضف فئة إلى الصف عبر نمط `decoration-*` مخصص (هذا غير مدعوم أصلًا) أو أضف ملف SCSS مخصصًا في وحدتك يستهدف فئة Bootstrap للصف. الحل البديل الشائع هو قبول التنسيق بلون النص فقط، وهو ما يتسق مع واجهة أودو القياسية.

هل decoration-* متاح في عروض Kanban أو النموذج؟

لا. سمات `decoration-*` خاصة بعروض القائمة (الشجرة). لعروض Kanban آلية ألوان خاصة بها عبر حقل `color` على بطاقة Kanban وسمة ``. لا تمتلك عروض النماذج زخرفة على مستوى الصف — استخدم `invisible` و`readonly` للتنسيق المشروط للحقول، أو طبّق فئة CSS مخصصة عبر ودجة.

هل يمكنني دمج decoration-bf (عريض) مع لون مثل decoration-danger؟

نعم. زخارف الألوان (`decoration-success` و`decoration-danger` وما إلى ذلك) وزخارف الخطوط (`decoration-bf` و`decoration-it`) مستقلة — تُطبّق خصائص CSS مختلفة ولا تتعارض. يمكن أن يكون الصف عريضًا وأحمرًا في آنٍ واحد. يمكنك حتى استخدام تعبيرات مختلفة: عريض للسجلات عالية الأولوية، وأحمر للسجلات المتأخرة، بحيث يحصل السجل المتأخر عالي الأولوية على كليهما.

عرض القائمة لديه شروط زخرفة كثيرة وبات من الصعب قراءته. هل هناك نهج أنظف؟

انقل منطق الزخرفة إلى حقل محسوب مخزَّن في النموذج — مثلًا حقل `Char` باسم `row_color` يُعيد `'danger'` أو `'warning'` أو `'success'` أو `''` بناءً على حالة السجل وتواريخه. ثم استخدم `decoration-danger="row_color == 'danger'"` وما إلى ذلك على عنصر ``. هذا يُبقي XML العرض نظيفًا ويضع المنطق في مكانه الصحيح — نموذج Python — حيث يكون اختباره وإعادة استخدامه أسهل.

iWesabe Editorial Team

رؤى عملية حول Odoo ERP وامتثال ZATCA والعمليات الرقمية للشركات السعودية — بقلم فرق الاستشارات والمالية والهندسة في iWesabe.

عن iWesabe