Versions Compared

Old Version 1

changes.mady.by.user Hugo

Saved on

compared with

New Version Current

changes.mady.by.user Nitchakan Maneelam

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Panel
borderColorgreen
borderWidth1
titleBGColor#ddffcc
borderStylesolid
titleDefinition

Form Grid extends the default functionalities of a typical grid element.

Unlike the generic grid element that only accepts standard text field for its inputs, the Enhanced Grid Form Element captures data by making reference to another form element.

 ขยายฟังก์ชันการทำงานเริ่มต้นขององค์ประกอบตารางทั่วไป

แตกต่างจากองค์ประกอบตารางทั่วไปที่ยอมรับเฉพาะฟิลด์ข้อความมาตรฐานสำหรับข้อมูลอินพุต ฟอร์มตารางที่ปรับปรุงแล้วยอมรับข้อมูลด้วยการอ้างอิงถึงองค์ประกอบฟอร์มอื่น

ดังนั้นเราสามารถใช้ประโยชน์อย่างเต็มที่จากสิ่งที่องค์ประกอบของรูปแบบทั่วไปนำเสนอเช่นการตรวจสอบความถูกต้องและการจัดรูปแบบHence, one can take full advantage of what a typical form element has to offer, e.g., validation and formatting.

Panel
borderColorpurple
borderWidth1
titleBGColor#ddccff
borderStylesolid
titleNew Feature

New feature added in เพิ่มคุณสมบัติใหม่ใน Joget Workflow v6.เวอร์ชั่น 6

  • Pagingเลขลำดับหน้า
  • Delete Options
  • ลบตัวเลือก
  • ประเภทรูปแบบหลายบรรทัด
    Multiple Lines Format Type

 
Figure ภาพที่ 1: Screenshot of Form Grid in sample ภาพตัวอย่างแสดงฟอร์มตารางไฟล์ใน App HR Expenses  Claim appclaim 

Figure 2: Screenshot of Form Grid in sample  ภาพตัวอย่างแสดงฟอร์มตารางไฟล์ใน App HR Expenses  Claim app - Add New Rowclaim - เพิ่มแถวใหม่

Figure ภาพที่ 3: Form Grid Propertiesคุณสมบัติฟอร์มตาราง
NameDescription
IDElement  ID (By declaring as รหัส (เมื่อประกาศ ID ชื่อ "entries" , a corresponding database table column แล้ว จะมีการสร้างคอลัมน์ตารางในฐานข้อมูลว่า "c_entries" will be created)
LabelElement  Label to be displayed to end userชื่อที่จะแสดงให้ผู้ใช้เห็น.
FormTarget form to reference to.แบบฟอร์มเป้าหมายที่จะอ้างอิงถึง
ColumnsThe columns defined here must be correspondent to the Form chosen above.
คอลัมน์ที่กำหนดที่นี่จะต้องสอดคล้องกับแบบฟอร์มที่เลือกด้านบน
NameDescription
Value
Field ID of the form element to reference to the target form.ของแบบฟอร์มเพื่ออ้างอิงไปยังแบบฟอร์มเป้าหมาย
 Panel
borderColorblue
borderWidth1
titleBGColor#ddffcc
borderStylesolid
Exampleตัวอย่าง:
In ในฟอร์ม "HR Expense Claim Entry" form, there are Form Elements with the มีองค์ประกอบของฟอร์มที่มี ID "dateวันที่", "categoryหมวดหมู่", "purposeวัตถุประสงค์" , and และ "formattedAmountจัดรูปแบบจำนวนเงิน".
LabelColumn Label.ป้ายกำกับคอลัมน์
Format Type
หากคุณต้องการจัดรูปแบบค่าที่ส่งคืนคุณอาจใช้ประโยชน์จากประเภทรูปแบบ 
ตัวเลือกเริ่มต้น: ข้อความ
 ประเภทรูปแบบที่ใช้ได้ 
  • Text - จัดรูปแบบค่าเป็นข้อความ
  • HTML - ส่งออกข้อมูลเป็น 
If you would like to format the returned value, you may make use of the format type.
Default choice: Text.
 Available Format Types 
  • Text - formats the value as text
  • HTML - outputs data as HTML
  • Multiple lines text - maintains the spacing formatting for multiple lines text, such as TextArea.รักษาการจัดรูปแบบระยะห่างสำหรับข้อความหลายบรรทัดเช่น TextArea
  • Decimal - formats as decimal. Number of decimals is expected in the "Format" field.จัดรูปแบบเป็นทศนิยม จำนวนทศนิยมที่คาดว่าจะอยู่ในฟิลด์ "รูปแบบ"
  • Date - รูปแบบตามวันที่ คาดว่าจะใช้รูปแบบวันที่ดั้งเดิมและวันที่ใหม่ในฟิลด์ "รูปแบบ"Date - formats as date. Original Date and New Date formats are expected in the "Format" field.
     Panel
    borderColorblue
    borderWidth1
    titleBGColor#ddffcc
    borderStylesolid
    Formatรูปแบบ: (original formatรูปแบบดั้งเดิม) | (new formatรูปแบบใหม่)
    Example of usageตัวอย่างการใช้งาน:
    Original value ค่าดั้งเดิม:     5/23/2012
    Expected value ค่าที่คาดหวัง: 2012/5/23
     Format รูปแบบ :      M/d/y|y/M/d
     Note:  Please refer to หมายเหตุ: โปรดอ้างอิง Java SimpleDateFormat for date format. สำหรับรูปแบบวันที่
  • File - Show the value as a link to the attachment. แสดงค่าเป็นลิงค์ไปยังเอกสารแนบ Form Def ID  is expected in the คาดว่าจะอยู่ในฟิลด์ "Format" field.
     Info
    titleExpected Form Def ID
    Specify the ระบุ Form Def ID that contains the actual File Upload form element. การกำหนดแบบฟอร์มที่มีองค์ประกอบแบบฟอร์มการอัพโหลดไฟล์จริง
  • Image - Show the value as a thumbnail of the attachment. แสดงค่าเป็นภาพย่อของไฟล์แนบ Form Def ID  is expected in the คาดว่าจะอยู่ในฟิลด์ "Format" field.
     Info
    titleExpected Form Def ID
    Specify theระบุ Form Def ID that contains the actual Image Upload / File Upload form element. การกำหนดแบบฟอร์มที่มีองค์ประกอบแบบฟอร์มการอัพโหลดไฟล์จริง
  • Options - Show the label of multiple choice element given the value given. แสดงเลเบลของอิลิเมนต์ตัวเลือกหลายตัวที่กำหนดค่าที่กำหนด Form Def ID  is expected in the คาดว่าจะอยู่ในฟิลด์ "Format" field.
     Info
    titleExpected Form Def ID
    Specify theระบุ Form Def ID that contains the actual  ที่มีองค์ประกอบฟอร์มด้วย Select Box / Radio / Check Boxform element.
FormatDepending on your chosen Format Type, additional argument may be entered here.
อาจมีการป้อนอาร์กิวเมนต์เพิ่มเติมที่นี่ทั้งนี้ขึ้นอยู่กับประเภทรูปแบบที่คุณเลือก
Width
Column width in characters.ความยาว
 Code Block
titleSample
200px
 
Figure 4: Form Grid Properties - UI คุณสมบัติฟอร์มตาราง - หน้าจอผู้ใช้งาน
NameDescription
Enable Sorting FeatureDetermines if ordering of rows is to be enforced.
กำหนดว่าจะบังคับใช้การเรียงลำดับของแถวหรือไม่
Field ID for SortingField to  keep the ordering sequence; must correspond with a field id in the target form.
เพื่อให้ลำดับการเรียงฟิลด์; จะต้องสอดคล้องกับฟิลด์รหัสในรูปแบบ
Form Submit Button Label (Normal Mode)Label of the Submit button in normal mode.
ป้ายกำกับของปุ่มส่งในโหมดปกติ
Form Submit Button Label (Readonly Mode)Label of the Submit button in read-only mode.
ป้ายกำกับของปุ่มส่งในโหมดอ่านอย่างเดียว
Display field as Label when readonly?Displays the value of the element as plain text when element is set to แสดงค่าของข้อความในรูปแบบข้อความล้วนๆไม่สามารถแก้ไขได้ เมื่อกล่องข้อความนั้นถูกตั้งค่าไว้ว่า "Readonly".
Popup Dialog Height
Specifies the height, in characters.ความสูง
 Code Block
titleSample
200px
Popup Dialog Width
Specifies the width, in characters.ความกว้าง
 Code Block
titleSample
200px
Readonly
Determines if the element is editable.กำหนดว่าข้อความสามารถแก้ไขได้หรือไม่
Disable Add FeatureDetermines if a new row can be added.
พิจารณาว่าสามารถเพิ่มแถวใหม่ได้หรือไม่
Disable Delete Feature
Determines if a row can be removed.พิจารณาว่าสามารถลบแถวได้หรือไม่
Delete confirmation messageConfirmation message  when deleting a row.
ข้อความยืนยันเมื่อลบแถว
Show Row Numbering?Shows numbering on the grid.
แสดงคอลัมน์เพิ่มเติมทางด้านซ้ายสุดเพื่อแสดงหมายเลข
Paging SizeItems to be displayed per page.
รายการที่จะแสดงต่อหน้า
 
Figure ภาพที่ 5: Form Grid Properties - Validation & Data Binder คุณสมบัติรายการตาราง - หน้าจอผู้ใช้และตั้งค่าให้สมบูรณ์
NameDescription
Validator
Attach a Validator plugin to validate the input value. Please see Form Validatorแนบปลั๊กอิน Validator เพื่อตรวจสอบความถูกต้องของค่าที่ป้อนเข้ามา โปรดดู ตรวจสอบข้อมูลของฟอร์ม (Form Validator).
 Info
titleWhen will validation takes place?
Validation will takes place whenever form is submitted except when it is submitted as การตรวจสอบจะเกิดขึ้นทุกครั้งที่มีการบันทึกแบบฟอร์มยกเว้นเมื่อบันทึกเป็น "Save as Draft".
Unique ColumnColumn/Field ID to identify record ID.
คอลัมน์ / ฟิลด์ ID เพื่อระบุ ID บันทึก
Min Number of Row Validation (Integer)
Min Number of Row Validation (Integer
จำนวนแถวขั้นต่ำ (จำนวนเต็ม)
Max Number of Row Validation (Integer)Max Number of Row Validation (Integer
จำนวนแถวสูงสุด (จำนวนเต็ม)
Error Message
Error message 		 to be shown when row requirements set above is not met.
ข้อความแสดงข้อผิดพลาดที่จะแสดงเมื่อไม่ตรงตามข้อกำหนดของแถวที่ตั้งไว้ข้างต้น
Load Binder
Option by default. Grid data will be saved/loaded in JSON format in its defined database cell.
ตัวเลือกโดยค่าเริ่มต้น ข้อมูลตารางจะถูกบันทึก / โหลดในรูปแบบ JSON ในฐานข้อมูลที่กำหนดไว้
In this example, Multirow Form Binder is used to load data from other form. See list of available  Form Binder
ในตัวอย่างนี้ Multirow Form Binder ถูกใช้เพื่อโหลดข้อมูลจากฟอร์มอื่น ดูรายการที่มีอยู่ สิ่งที่ผูกกับฟอร์ม (Form Binder)
.
Store Binder
Option by default. Grid data will be saved/loaded in JSON format in its defined database cell.
ตัวเลือกโดยค่าเริ่มต้น ข้อมูลตารางจะถูกบันทึก / โหลดในรูปแบบ JSON ในฐานข้อมูลที่กำหนดไว้
ในตัวอย่างนี้ Multirow Form Binder ถูกใช้เพื่อโหลดข้อมูลจากฟอร์มอื่น ดูรายการที่มีอยู่ สิ่งที่ผูกกับฟอร์ม (Form Binder)
In this example, Multirow Form Binder is used to load data from other form. See list of available  Form Binder
.
Delete Associated Grid Data?
If the popup form have grid element(s), this option will delete the inner grid data.หากฟอร์มป๊อปอัพมีรายการในตารางตัวเลือกนี้จะลบข้อมูลภายในตาราง
 Panel
borderColor#ffa700
borderWidth1
titleBGColor#ffdb99
borderStylesolid
titleCaution
These ตัวเลือก 3 optionsตัวเหล่านี้: (Delete Associated Grid Data, Delete Associated Child Form Data, Delete Files), in combination, does apply to nested grid/child elements.
These options traverses the entire form tree. Upon encountering a 'false' condition, it will move on to the next grid/child element.
ลบข้อมูลตารางที่เชื่อมโยง, ลบข้อมูลแบบฟอร์มลูกที่เกี่ยวข้อง, ลบไฟล์) โดยใช้ร่วมกับองค์ประกอบ ตาราง / ลูกตารางซ้อนกัน
ตัวเลือกเหล่านี้ลัดไปที่แผนผังทั้งหมด เมื่อพบเงื่อนไข 'เท็จ' มันจะย้ายไปยังองค์ประกอบตาราง / ลูกตารางถัดไป
ตัวอย่าง: พิจารณาว่าฟอร์มป๊อปอัปมีตารางมีฟอร์มย่อยมีองค์ประกอบการอัปโหลดไฟล์ที่มี abc.pdf หากตรวจสอบตัวเลือกทั้งหมด abc.pdf จะถูกลบ หากทุกคนยกเว้นหนึ่งในตัวเลือกที่เลือกไว้ abc.pdf จะไม่ถูกลบExample: Consider that the popup form has a form grid, form grid has a subform, subform has a file upload element with abc.pdf. If all options are checked, abc.pdf will be deleted. If all except ONE of the option is checked, abc.pdf will NOT be deleted.
Delete Associated Child Form Data?
If the popup form have child element(s), this option will delete the child data.หากฟอร์มป๊อปอัพมีองค์ประกอบลูกตัวเลือกนี้จะลบข้อมูลลูก
 Panel
borderColor#ffa700
borderWidth1
titleBGColor#ffdb99
borderStylesolid
titleCaution
These ตัวเลือก 3 optionsตัวเหล่านี้: (Delete Associated Grid Data, Delete Associated Child Form Data, Delete Files), in combination, does apply to nested grid/child elements.ลบข้อมูลกริดที่เชื่อมโยง, ลบข้อมูลแบบฟอร์มลูกที่เกี่ยวข้อง, ลบไฟล์) โดยใช้ร่วมกับองค์ประกอบตาราง / ลูกซ้อนกัน
Delete Files?If the popup form contains file upload element, this option will delete the actual uploaded file(s).
ถ้าฟอร์มป๊อปอัพมีองค์ประกอบอัพโหลดไฟล์ตัวเลือกนี้จะลบไฟล์ที่อัพโหลดจริง
 Panel
borderColor#ffa700
borderWidth1
titleBGColor#ffdb99
borderStylesolid
titleCaution
These ตัวเลือก 3 optionsตัวเหล่านี้: (Delete Associated Grid Data, Delete Associated Child Form Data, Delete Files), in combination, does apply to nested grid/child elements.ลบข้อมูลตารางที่เชื่อมโยง, ลบข้อมูลแบบฟอร์มลูกที่เกี่ยวข้อง, ลบไฟล์) โดยใช้ร่วมกับองค์ประกอบตาราง / ลูกซ้อนกัน
Abort Related Running Processes?If there are process instances related to the deleted row, this options will abort those process instances.
หากมีอินสแตนซ์กระบวนการที่เกี่ยวข้องกับแถวที่ถูกลบตัวเลือกนี้จะยกเลิกอินสแตนซ์กระบวนการเหล่านั้น
 Info
titleLearning More
Download a tutorial app on Grids from ดาวน์โหลดแอพบทช่วยสอนเกี่ยวกับ Grids จาก Joget Workflow Marketplace to learn more. เพื่อเรียนรู้เพิ่มเติม