การเรียงลำดับฟิวด์ใน form-widget ของ ofbiz

ในการสร้าง Form-Widget ของ Ofbiz นั้นหากเราสร้าง ฟิวด์เรียงลำดับตามที่เราต้องการ การแสดงผลก็จะเป็นตามนั้นครับ แต่ถ้ากรณีเราเรียกใช้ แท็กดังต่อไปนี้ในฟอร์ม

?

1	<auto-fields-service name=""></auto-fields-service>

หากเราเรียกใช้สองฟิวด์นี้ ฟิวด์ที่ออกมาจะเป็นไปตามลำดับฟิวด์ของ service กรณี auto-fields-service และจะเรียงตามลำดับฟิวด์ในตาราง กรณี auto-fields-entity ครับ ซึ่งปัญหานี้เราสามารถแก้ไขได้โดยการใช้แท็ก sort-order ครับจากรูป

From Programming Hunter

และโคดของรูปเป็นแบบนี้ครับ

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<form name="AddCalendarExceptionDay" target="CreateCalendarExceptionDay" title="" type="single">   <auto-fields-service name="createCalendarExceptionDay"></auto-fields-service>   <field name="calendarId"><hidden></hidden></field>   <field name="description" title="${uiLabelMap.CommonDescription}"></field>   <field name="exceptionDateStartTime" title="${uiLabelMap.ManufacturingExceptionDateStartTime}"><date-time type="date"></date-time></field>   <field name="exceptionCapacity" title="${uiLabelMap.ManufacturingCalendarCapacity}"></field>   <field name="submitButton" title="${uiLabelMap.CommonAdd}"><submit type="button"></submit></field> </form>

ต่อไปนี้เราจะทำการย้ายช่องที่เป็นวันที่อยู่ในกรอบสีแดงลงไปด้านล่างด้วยวิธีการดังนี้

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<form name="AddCalendarExceptionDay" target="CreateCalendarExceptionDay" title="" type="single">   <auto-fields-service name="createCalendarExceptionDay"></auto-fields-service>   <field name="calendarId"><hidden></hidden></field>   <field name="description" title="${uiLabelMap.CommonDescription}"></field>   <field name="exceptionDateStartTime" title="${uiLabelMap.ManufacturingExceptionDateStartTime}"><date-time type="date"></date-time></field>   <field name="exceptionCapacity" title="${uiLabelMap.ManufacturingCalendarCapacity}"></field>   <field name="submitButton" title="${uiLabelMap.CommonAdd}"><submit type="button"></submit></field>   <sort-order>         <sort-field name="calendarId"></sort-field>         <sort-field name="description"></sort-field>         <sort-field name="exceptionCapacity"></sort-field>         <sort-field name="exceptionDateStartTime"></sort-field>         <sort-field name="submitButton"></sort-field>     </sort-order></form>

สังเกตจากแท็ก sort-order จะเรียงลำดับตามฟิวด์ที่เราต้องการผลลัพธ์ที่ตามรูป

From Programming Hunter

นอกจากแท็ก sort-field แล้วยังมีแท็กอีกสองแท็กที่น่าสนใจเหมือนกันคือแท็ก banner และ field-group เราลองมาดูวิธีการใช้งาน banner ซึ่งเป็นการแบ่งการจัดกลุ่มฟิวด์โดยข้อความ

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<form name="AddCalendarExceptionDay" target="CreateCalendarExceptionDay" title="" type="single">   <auto-fields-service name="createCalendarExceptionDay"></auto-fields-service>   <field name="calendarId"><hidden></hidden></field>   <field name="description" title="${uiLabelMap.CommonDescription}"></field>   <field name="exceptionDateStartTime" title="${uiLabelMap.ManufacturingExceptionDateStartTime}"><date-time type="date"></date-time></field>   <field name="exceptionCapacity" title="${uiLabelMap.ManufacturingCalendarCapacity}"></field>   <field name="submitButton" title="${uiLabelMap.CommonAdd}"><submit type="button"></submit></field>   <sort-order>         <sort-field name="calendarId"></sort-field>         <banner text="Test left"></banner>         <sort-field name="description"></sort-field>         <sort-field name="exceptionCapacity"></sort-field>         <sort-field name="exceptionDateStartTime"></sort-field>         <sort-field name="submitButton"></sort-field>     </sort-order></form>

ผลลัพธ์ที่ได้จากการใส่ banner ดังรูปครับ

From Programming Hunter

มาลองอีกแบบ

?

1 2	<banner right-text="Test right"> </banner>

ได้ผลลัพธ์ดังนี้

From Programming Hunter

ตัวสุดท้ายที่แนะนำคือการใช้งาน field-group เป็นการแบ่งการจัดกลุ่มฟิวด์เหมือนกัน แต่ตัวนี้สามารถยุบได้ครับ
จากโคด

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<form name="AddCalendarExceptionDay" target="CreateCalendarExceptionDay" title="" type="single">   <auto-fields-service name="createCalendarExceptionDay"></auto-fields-service>   <field name="calendarId"><hidden></hidden></field>   <field name="description" title="${uiLabelMap.CommonDescription}"></field>   <field name="exceptionDateStartTime" title="${uiLabelMap.ManufacturingExceptionDateStartTime}"><date-time type="date"></date-time></field>   <field name="exceptionCapacity" title="${uiLabelMap.ManufacturingCalendarCapacity}"></field>   <field name="submitButton" title="${uiLabelMap.CommonAdd}"><submit type="button"></submit></field>   <sort-order>         <sort-field name="calendarId"></sort-field>         <field-group collapsible="true" title="Test field group">             <sort-field name="description"></sort-field>             <sort-field name="exceptionCapacity"></sort-field>         </field-group>         <sort-field name="exceptionDateStartTime"></sort-field>         <sort-field name="submitButton"></sort-field>     </sort-order></form>

ผลลัพธ์ที่ได้จากการใส่ field-group ดังรูปครับ ซึ่ง ยุบ-ขยาย ได้

From Programming Hunter

From Programming Hunter

About Nop

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.