استخدام نماذج React مع Tasklist Camunda

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

دعنا نلقي نظرة على عمليتنا أولاً: تم استلام فاتورة وتحتاج إلى مراجعتها. سنركز على نموذج الفاتورة الأولي والمهمة المخصصة - تنفيذ المهام الآلية باستخدام Camunda Workflow Engine هو أمر سهل للغاية.

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

class DisplayGroup extends React.Component {
  render() {
    return e('div', {className: 'form-group'}, [
      e('label', {className: 'control-label col-md-4', key: 'label'}, this.props.label),
      e('div', {className: 'col-md-6', key: 'container'},
        e('input', {
          className: 'form-control',
          value: this.props.value,
          readOnly: true
        }))
      ]);
  }
}

يستخدم هذا المكون عديم الحالة فئات Bootstrap للتصميم. إذا احتجنا إلى عرض قيم متعددة ، مثل المبلغ ومورد الفاتورة ، فيمكننا إنشاؤها عدة مرات. على سبيل المثال ، يمكنك إنشاء نموذج بالشكل المناسب:

e(DisplayGroup, {
  label: 'Amount: ',
  value: this.props.amount.value,
  key: 'Amount'
}),
e(DisplayGroup, {
  label: 'Creditor: ',
  value: this.props.creditor.value,
  key: 'Creditor'
}),
e(DisplayGroup, {
  label: 'Invoice Category: ',
  value: this.props.category.value,
  key: 'Category'
}),
e(DisplayGroup, {
  label: 'Invoice Number: ',
  value: this.props.invoiceID.value,
  key: 'InvoiceID'
}),
e('label', {className: 'control-label col-md-4', key: 'ApprovalLabel'}, 'I approve this Invoice'),
e('div', {className: 'col-md-6', key: 'ApprovalContainer'},
  e('input', {
    className: 'form-control',
    name: 'approved',
    type: 'checkbox',
    checked: this.state.value,
    className: 'form-control',
    onChange: this.handleInputChange
  })
)

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

كما ترى ، فإن استخدام إطار عمل مثل React في Tasklist ليس ممكنًا فحسب ، بل بسيطًا أيضًا. إذا كنت تريد معرفة المزيد ، يمكنك رؤية الكود المصدري المتاح على جيثب.