ساخت فرم های پویا (Dynaforms) در ProcessMaker

1401/1/3
ساخت فرم های پویا (Dynaforms) در ProcessMaker

گام بعدی در طراحی فرآیند، ایجاد Dynaforms آن است. هنگام اجرای یک فرآیند، کاربر نهایی عمدتاً با Dynaforms برای وارد کردن داده ها و دریافت اطلاعات تعامل دارد. در ProcessMaker این فرم ها DynaForms نامیده می شوند، زیرا به صورت پویا در یک رابط drag-and-drop ایجاد می شوند و هنگام اجرا به صورت پویا با هر دستگاهی تنظیم می شوند. بیایید با ایجاد Dynaform برای اولین کار شروع کنیم. برای انجام این کار، به جعبه ابزار اصلی در سمت راست نقشه فرآیند بروید و فلش را روی نماد مثبت در دکمه Dynaforms نگه دارید. روی گزینه Create که در سمت راست ظاهر می شود کلیک کنید.

https://wiki.processmaker.com/sites/default/files/ProcessMaker3_DynaForm_CreateOption.png

پنجره ای باز می شود که در آن عنوان و توضیحات Dynaform جدید تعریف می شود.

https://wiki.processmaker.com/sites/default/files/ProcessMaker3_FirstProcess_DynaFormWindowCreation.png

عنوان فرم را روی "فرم درخواست سفارش" تنظیم کنید و یک توضیح مختصر اضافه کنید (که فقط توسط طراحان فرآیند دیده می شود و نه کاربران نهایی). در نهایت روی Save و Open کلیک کنید تا Dynaform Designer  باز شود.

https://wiki.processmaker.com/sites/default/files/ProcessMaker3_FirstProcess_OrderRequestFormCreation.png

DynaForm Designer یک بوم منعطف است که در آن می توان فیلدهای کنترلی را کشیده و رها کرد تا یک فرم ساده برای کاربر نهایی ایجاد شود تا توسط او پر شود. متغیرها و ویژگی‌های هر کنترل را می‌توان پیکربندی کرد و کد جاوا اسکریپت را می‌توان برای ارائه عملکردهای اضافی که در کنترل‌های موجود نیست اضافه کرد. برای اطلاعات بیش تر در مورد طراحیDynaForms، به مستندات مربوط به طراح و کنترل‌های آن مراجعه کنید.

https://wiki.processmaker.com/sites/default/files/ProcessMaker3_FirstProcess_DynaFormDesigner.png

نام Dynaform در سمت چپ نوار بالا نشان داده شده است و در سمت راست گزینه هایی برای ذخیره، صادرات، وارد کردن، پیش نمایش، پاک کردن، مدیریت زبان ها و بستن طراح وجود دارد.

پنل سمت چپ نوار ابزاری است که کنترل‌های وب (و کنترل‌های موبایل برای نسخه Enterprise) را در خود نگه می‌دارد که عناصر رابط، مانند منوهای کشویی و فیلدهای جعبه متنی هستند که می‌توانند به فرم اضافه شوند. آخرین بخش، در پنل سمت چپ، Properties، لیستی از ویژگی‌های فرم را زمانی که طرح خاکستری فرم در Designer کلیک می‌شود، و برای هر کنترل زمانی که روی کنترل در داخل فرم کلیک می‌شود، نشان می‌دهد. بوم خالی داخل مستطیل خاکستری نمایانگر کنترل های فرم است.

هنگامی که Dynaform خالی برای اولین بار باز می شود، حاوی یک مستطیل خاکستری در ردیف اول است که اولین کنترل را می توان اضافه کرد. اولین کنترل در "فرم درخواست سفارش" عنوان آن است. برای اضافه کردن آن، به Web Controls در پنل سمت چپ بروید، نماد عنوان را بکشید و آن را در فضای خالی ردیف اول رها کنید.

https://wiki.processmaker.com/sites/default/files/ProcessMaker3_FirstProcess_DynaFormAddingTitle.png

توجه داشته باشید که ردیفی که کنترل در آن کشیده می شود به رنگ خاکستری برجسته می شود، به این معنی که کنترل را می توان در آنجا رها کرد. در نهایت، کنترل با برچسب "title_1" به طور پیش فرض اضافه می شود.

https://wiki.processmaker.com/sites/default/files/ProcessMaker3_FirstProcess_DynaFormTitle_1.png

برای تغییر برچسب عنوان، در فرم روی آن کلیک کنید و ویژگی های آن در پنل سمت چپ نمایش داده می شود.

https://wiki.processmaker.com/sites/default/files/ProcessMaker3_FirstProcess_Title1Properties.png

متن ویژگی برچسب را از “title_1” به “Order Request” تغییر دهید. توجه داشته باشید که عنوان کنترل با وارد کردن متن تغییر می کند.

https://wiki.processmaker.com/sites/default/files/ProcessMaker3_FirstProcess_TitleOrderRequest.png

اکنون، یک زیرنویس اضافه کنید که به جداسازی بخش ها در فرم کمک می کند. برای این کار به پنل سمت چپ رفته و روی Web Controls کلیک کنید تا دوباره کنترل ها نمایش داده شوند. نماد زیرنویس را از نوار ابزار بکشید و آن را روی ردیف خالی که زیر عنوان ظاهر می شود رها کنید.

https://wiki.processmaker.com/sites/default/files/ProcessMaker3_FirstProcess_AddSubtitle.png

برچسب زیرنویس را به "اطلاعات شخصی" تغییر دهید.

https://wiki.processmaker.com/sites/default/files/ProcessMaker3_FirstProcess_Subtitle.png

DynaForms دوازده ستون عرض دارد. به طور پیش فرض، هنگامی که یک کنترل به Dynaform اضافه می شود، 12 ستون کامل را اشغال می کند و یک سطر را پر می کند. با این حال، با تعریف تعداد ستون‌های موجود برای کنترل‌ها در ویژگی col-span می‌توان ردیف‌هایی را تعریف کرد که دارای چندین کنترل هستند.

به عنوان مثال، یک ردیف می تواند یک کنترل با 3 ستون عرض، یک کنترل دوم با 5 ستون و سومی با 4 ستون داشته باشد، به طوری که جمع آن ها به 12 ستون برسد. ردیف بعدی را به دو قسمت به عرض 6 ستون تقسیم کنید. برای این کار روی ردیف خالی زیر زیرنویس کلیک کنید تا به ویژگی های آن دسترسی پیدا کنید. عدد "12" را که به طور پیش فرض در ویژگی col-span تنظیم شده است پاک کنید و آن را روی "6 6" قرار دهید (مطمئن شوید بین دو عدد فاصله وجود دارد) و ENTER را فشار دهید. همان طور که در تصویر زیر مشاهده می کنید، ردیف به دو بخش هم اندازه تقسیم شده است که هر کدام می توانند یک کنترل جداگانه داشته باشند.

https://wiki.processmaker.com/sites/default/files/ProcessMaker3_FirstProcess_RowDivision.png

اکنون به بخش Web Controls بروید و یک کادر متنی را به بخش اول سطر بکشید و رها کنید. روی آن در فرم کلیک کنید تا ویژگی های آن را در پنل سمت چپ مشاهده کنید.

https://wiki.processmaker.com/sites/default/files/ProcessMaker3_FirstProcess_TextProperties.png

این جعبه متن باید با متغیر "employeeName" که در بخش قبلی ایجاد شده است مرتبط شود. هنگام ارسال فرم، داده های موجود در جعبه متن در این متغیر ذخیره می شود. به ویژگی متغیر بروید و روی بیضی "..." کلیک کنید تا پنجره جدیدی باز شود که در آن متغیرهای موجود لیست شده اند. "[string] staffName"  را انتخاب کنید.

https://wiki.processmaker.com/sites/default/files/ProcessMaker3_FirstProcess_TextVariableRelation.png

پس از مرتبط کردن متغیر با کنترل، فیلد نوع داده متغیر، نوع داده متغیر را نشان می دهد و شناسه کنترل نیز به همان نام متغیر تغییر می یابد. در نهایت، برچسب کنترل را به "Name:" تغییر دهید.

https://wiki.processmaker.com/sites/default/files/ProcessMaker3_FirstProcess_TextPropertiesName.png

حالا فیلد زیر را در فرم ایجاد کنید: • "Address" - یک ناحیه متنی با متغیر "employeeAddress" (در همان ردیف"Name") • "Email" - یک جعبه متن با متغیر "employeeEmail". • "Date" - یک تاریخ با متغیر "requestDate". توجه داشته باشید که فیلد «تاریخ» دارای بسیاری از ویژگی‌های قابل تنظیم است، مانند محدوده قالب‌بندی زمان تاریخ، اما فعلاً از مقادیر پیش‌فرض استفاده کنید زیرا تنظیم صحیح آن ها می‌تواند دشوار باشد.DynaForm اکنون باید به شکل زیر باشد:

https://wiki.processmaker.com/sites/default/files/ProcessMaker3_FirstProcess_DynaFormPhase1.png

اکنون، با افزودن زیرنویس «جزئیات خرید»، بخش دیگری را به DynaForm اضافه کنید، جایی که جزئیات اقلام خرید درخواستی توسط کارمند وارد می‌شود.

https://wiki.processmaker.com/sites/default/files/ProcessMaker3_FirstProcess_DynaFormSectionSubtitle.png

یک Grid برای وارد کردن جزئیات خرید استفاده خواهد شد. گریدها کنترل هایی هستند که داده ها را در ستون ها و ردیف ها نمایش می دهند. هر ستون در گرید شامل یک کنترل جداگانه است و هر ردیف یک رجیستری جداگانه است. برای ایجاد یک شبکه، نماد شبکه را بکشید و روی ردیف خالی پایین فرم رها کنید. برای افزودن ستون های آن، نماد جعبه متن را از پنل سمت چپ بکشید و آن را در داخل شبکه رها کنید.

https://wiki.processmaker.com/sites/default/files/ProcessMaker3_FirstProcess_GridAddText.png

سه کنترل "Textbox" را در داخل شبکه اضافه کنید:

https://wiki.processmaker.com/sites/default/files/ProcessMaker3_FirstProcess_GridThreeText.png

مقدار فضایی که کنترل‌ها در داخل یک شبکه اشغال می‌کنند با ویژگی عرض ستون آنها تعیین می‌شود. به طور پیش فرض، شماره خط هر ردیف 3٪ و نماد سطل زباله برای حذف هر ردیف 3٪ دیگر را اشغال می کند، بنابراین 94٪ از فضای ردیف برای نگه داشتن کنترل ها در دسترس است. این فضا را می توان بین سه جعبه متن تقسیم کرد، بنابراین ویژگی عرض ستون را در اولی روی "31"، دومی را "31" و سومی را روی "32" قرار دهید.

https://wiki.processmaker.com/sites/default/files/ProcessMaker3_FirstProcess_GridColumnWidth.png

عنوان Grid را به "جزئیات" و برچسب کنترل‌های جعبه متن را در ویژگی‌های آن ها به"Item"، "Quantity" و "Description" تغییر دهید. Grid باید به شکل زیر باشد:https://wiki.processmaker.com/sites/default/files/ProcessMaker3_FirstProcess_GridColumnsDefined.png

با کلیک بر روی بیضی "..." در ویژگی های آن، شبکه را با متغیر "itemGrid" مرتبط کنید. ویژگی های گرید باید مانند تصویر زیر باشد.

https://wiki.processmaker.com/sites/default/files/ProcessMaker3_FirstProcess_GridProperties.png

در پایان، یک دکمه ارسال را در انتهای فرم اضافه کنید و برچسب آن را به "ارسال" تغییر دهید. طراحی نهایی Dynaform باید مانند تصویر زیر باشد:

https://wiki.processmaker.com/sites/default/files/ProcessMaker3_FirstProcess_FormFinalDesign.png

در نهایت، Dynaform را با کلیک بر روی https://wiki.processmaker.com/sites/default/files/DynaFormSaveIconVersion3.png در نوار بالای طراح ذخیره کنید. برای این که ببینید Dynaform چگونه برای کاربران نهایی ظاهر می‌شود، روی https://wiki.processmaker.com/sites/default/files/DynaFormPreviewIconVersion3.png در نوار بالا کلیک کنید تا فرم پیش‌نمایش شود. در پنجره پیش نمایشی که باز می شود، با کلیک بر روی آیکون های مختلف دستگاه در نوار ابزار بالا، می توانید مشاهده کنید که Dynaform در گوشی های هوشمند، تبلت ها و رایانه های رومیزی چگونه ظاهر می شود.

https://wiki.processmaker.com/sites/default/files/ProcessMaker3_FirstProcess_FormPreview.png

توجه: پیش‌نمایش نشان‌داده‌شده برای تلفن‌های هوشمند و تبلت‌ها، ایده‌ای تقریبی درباره نحوه نمایش فرم‌ها در دستگاه‌های تلفن همراه ارائه می‌دهد، اما ممکن است عناصر یکسان نمایش داده نشوند، زیرا عرض هر دستگاه تلفن همراه متفاوت است و مرورگرهای وب آن‌ها ممکن است از کیت‌های وب متفاوتی استفاده کنند.

  همچنین توجه داشته باشید که این یک پیش نمایش برای برنامه تلفن همراه ProcessMaker نیست که دارای رابط کاربری ساده شده است.

پیش نمایش را با کلیک بر روی X در گوشه سمت راست بالا ببندید تا به طراح بازگردید. سپس برای بار دوم روی X در گوشه سمت راست بالا کلیک کنید تا از طراح خارج شوید.

اکنون، یک Dynaform دوم با نام “Request Approval Form” ایجاد کنید که در کار دوم استفاده خواهد شد. در اینDynaform، سرپرست این امکان را خواهد داشت که اطلاعات ارسال شده در اولین وظیفه را بررسی کرده و آن را تایید یا رد کند.

پس از افزودن عنوان و توضیحات، به جای ذخیره و باز کردن، روی Save کلیک کنید.

https://wiki.processmaker.com/sites/default/files/ProcessMaker3_FirstProcess_CreateRequestApproval.png

نیازی به طراحی مجدد این فرم از ابتدا نیست. به جای ایجاد مجدد فیلدها، می توان از محتویات "فرم درخواست سفارش" در داخل "فرم تایید درخواست" استفاده مجدد کرد.

فایل JSON "فرم درخواست سفارش" را می توان صادر کرد و سپس در "فرم تأیید درخواست" وارد کرد. به جعبه ابزار اصلی در نقشه فرآیند بروید و روی Dynaforms کلیک کنید. سپس "فرم درخواست سفارش" را در لیست DynaForms پیدا کنید و روی دکمه ویرایش آن کلیک کنید تا باز شود.

پس از باز شدن "فرم درخواست سفارش" درDynaForm Designer، روی https://wiki.processmaker.com/sites/default/files/DynaFormExportIconVersion3.png کلیک کنید تا صادر شود. فایل JSON حاوی فرم دانلود خواهد شد.

https://wiki.processmaker.com/sites/default/files/ProcessMaker3_FirstProcess_ExportFileJson.png

"فرم درخواست سفارش" را ببندید و "فرم تأیید درخواست" را دوباره باز کنید. روی نماد (وارد کردن) در نوار بالا کلیک کنید و فایل "Order Request Form.json" ذخیره شده در رایانه خود را انتخاب کنید. کل طراحی اولین DynaForm به طرح فعلی وارد خواهد شد. در انتهایDynaform، قبل از دکمه ارسال، یک زیرنویس جدید با عنوان "تایید سفارش" اضافه کنید.

همچنین یک کنترل رادیویی با عنوان "تأیید شد؟" اضافه کنید.

https://wiki.processmaker.com/sites/default/files/ProcessMaker3_FirstProcess_SecondDynaFormDesignr.png

متغیر «requestApproved» را که قبلاً ایجاد شده بود به رادیو کنترل اختصاص دهید. رادیو کنترل باید دارای ویژگی های زیر باشد:

https://wiki.processmaker.com/sites/default/files/ProcessMaker3_FirstProcess_RadioProperties.png

از آن جایی که سرپرستان فقط درخواست ارسال شده توسط کارمند را بررسی می کنند، داده های موجود در جعبه های متنی "نام"، "آدرس"، "ایمیل"، "تاریخ" و کنترل شبکه باید فقط خواندنی باشد. برای این کار روی هر فیلد کلیک کنید و ویژگی Display Mode آن را روی View قرار دهید.

https://wiki.processmaker.com/sites/default/files/ProcessMaker3_FirstProcess_DisplayModeViewDynaForm.png

پیش نمایش Dynaform باید مانند تصویر زیر باشد. توجه داشته باشید که فیلدها قابل تغییر نیستند، زیرا حالت نمایش کنترل برای مشاهده تنظیم شده است.

. https://wiki.processmaker.com/sites/default/files/ProcessMaker3_FirstProcess_SecondDynaFormPreview.png

در نهایت، Dynaform  را با نام "Deliver Order" برای کار نهایی ایجاد کنید. یک توضیح مختصر اضافه کنید و روی Save & Open کلیک کنید.

https://wiki.processmaker.com/sites/default/files/ProcessMaker3_FirstProcess_DeliveryOrderCreationWindow.png

فایل "Order Approval Form.json" را از اولین Dynaform به این Dynaform وارد کنید. به انتهای Dynaform بروید و یک کنترل زیرنویس جدید با عنوان "Manager Review" اضافه کنید. همچنین یک کنترل رادیویی با عنوان "تحویل سفارش؟" اضافه کنید. متغیر "requestDelivery" را مانند قبل به رادیو کنترل در ویژگی های آن اختصاص دهید.

https://wiki.processmaker.com/sites/default/files/ProcessMaker3_FirstProcess_ThirdDynaFormDesign.png

فراموش نکنید که فیلدهای "نام"، "آدرس"، "ایمیل"، "تاریخ"، "تأیید شد؟" را تنظیم کنید و کل شبکه به حالتView، همان طور که با Dynaform دوم انجام شد. DynaForm قبلی باید مانند تصویر زیر باشد:

https://wiki.processmaker.com/sites/default/files/ProcessMaker3_FirstProcess_ThirdDynaFormPreview.png

 

دیدگاه ها

هیچ دیدگاهی تا به این لحظه در این صفحه ثبت نشده است

دیدگاه خود را در مورد این مطلب بیان کنید.




تماس فوری
تماس فوری