การใช้ form widget ใน OFBiz - การสร้าง list form widget

จากบทความที่แล้ว (การใช้ form widget ใน OFBiz - การสร้าง find form widget) ได้ทำการสร้างฟอร์มการค้นหา ขั้นตอนต่อไปจะทำการสร้างฟอร์มที่แสดลผลการค้นหา หรือ list form ดังนี้

1. define form ของการแสดงผลของ list form ในไฟล์ *Forms.xml

<form name="ListExamples" type="list" target="example" default-entity-name="Example" list-name="listIt">
        <actions>
            <service service-name="performFind" result-map="result" result-map-list="listIt">
                <field-map field-name="inputFields" from-field="parameters"/>
                <field-map field-name="entityName" value="Example"/>
            </service>
        </actions>
        <auto-fields-entity entity-name="Example" default-field-type="display"/>
    </form>

อธิบายโค้ด
ในส่วนของ actions จะมีการเรียกใช้ service ในไฟล์ services.xml ดังนี้
service-name="performFind" result-map="result" result-map-list="listIt" มีการเรียกใช้ service ชื่อ performFind ซึ่งเป็น service ของ OFBiz ที่สร้างขึ้นมาเพื่อให้เรียกใช้งาน find form ได้

2. ที่ screen ที่ต้องการให้ข้อมูลผลลัพธ์ของการค้นหาแสดงผล ให้เพิ่มโค้ดในส่วนของ actions และ include form ListExamples เข้าไป ดังนี้

<actions>
                <set field="exampleId" global="true" />
                <entity-one value-field="resultMap" entity-name="Example"></entity-one>
                <get-related relation-name="ExampleItem" list="resultList" value-field="resultMap"/>
            </actions>

<include-form location="component://culinary/widget/CulinaryForms.xml" name="ListExamples"/>

โค้ดในส่วนของ screen name="findExample" เมื่อสมบูรณ์แล้ว จะได้ดังนี้

<screen name="findExample">
        <section>
            <actions>
                <set field="exampleId" global="true" />
                <entity-one value-field="resultMap" entity-name="Example"></entity-one>
                <get-related relation-name="ExampleItem" list="resultList" value-field="resultMap"/>
            </actions>
            <widgets>
                <decorator-screen name="CommonDecorator" location="component://culinary/widget/CommonScreens.xml">
                    <decorator-section name="body">
                        <container id="content">
                             <container style="post">
                                   <container style="entry">
                                        <include-form location="component://culinary/widget/CulinaryForms.xml" name="FindExample"/>
                                        <include-form location="component://culinary/widget/CulinaryForms.xml" name="ListExamples"/>
                                   </container>
                             </container>
                        </container>
                    </decorator-section>
                </decorator-screen>
            </widgets>
        </section>
    </screen>

อธิบายโค้ด
ส่วนของ actions จะทำการประมวลผลก่อน ถึงจะส่งไปให้ในส่วนของ widgets แสดงผลต่อไป
field="exampleId" global="true" ทำการเซ็ตค่าที่ได้จากตัวแปร exampleId ให้เป็น global

entity-one value-field="resultMap" entity-name="Example" ทำการส่งค่าที่ได้จากการค้นหาใน entity ชื่อ Example มาเก็บไว้ในตัวแปรชนิด map ชื่อ resultMap

get-related relation-name="ExampleItem" list="resultList" value-field="resultMap" ทำการลิสต์ item ที่มีความสัมพันธ์กับ entity ชื่อ Example นี้มาแสดงผลทีละ item

entity ชื่อ Example นี้ จะมี entity ชื่อ ExampleItem ที่มีความสัมพันธ์กันแบบ one to many โค้ดในส่วนของ get-related จะช่วยทำการลิสต์ item ใน ExampleItem มาแสดงผล

ยกตัวอย่างความสัมพันธ์เหล่านี้ เช่น ในการออกรายงานในแต่ละครั้ง การแสดงผลของรายงานจะมีส่วนหัวที่ประกอบไปด้วย ที่อยู่บริษัทหรือวันที่ต่างๆ และส่วนของ item ที่ต้องการโชว์ในรายงาน

ส่วนหัวของรายงานเปรียบได้กับ entity ชื่อ Example ที่มี entity ชื่อ ExampleItem มามีความสัมพันธ์ด้วย เพื่อเรียกใช้ส่วนหัวของรายงาน นั่นหมายความว่า หัวรายงาน 1 หัวรายงาน สามารถแสดง item ใน entity ชื่อ ExampleItem ได้หลายไอเท็มนั่นเอง ซึ่งคำสั่งนี้จะทำการลิสต์ไอเท็มที่ต้องการแสดงภายใต้หัวรายงานออกมาทั้งหมด

เมื่อจบในส่วนของ actions แล้ว จึง include เพื่อเรียกใช้งาน form ชื่อ ListExamples มาแสดงผลต่อจากส่วน FindExample

3. ทำการทดลองค้นหาผ่าน url http://localhost:8080/culinary/control/example จะพบว่า เมื่อกดปุ่ม Search แล้ว ผลลัพธ์ในการค้นหาจะแสดงต่อจาก find form ทางด้านล่าง