วันอาทิตย์ที่ 4 กรกฎาคม พ.ศ. 2553

การเพิ่ม confirm dialog box ใน form ของ OFBiz 9.04

ใน OFBiz 10.04 การทำ Confirm Dialog Box สามารถใช้ confirmation-message ใน button ได้โดยตรง ดังนี้

<field name="searchButton" title="Search" widget-style="smallSubmit"><submit button-type="button" confirmation-message="Test"/></field>

แต่ใน OFBiz 9.04 ไม่สามารถใช้ confirmation-message ได้ จึงได้ทำการทดลองหาวิธีต่างๆ มาใช้ ดังนี้

ทดลองสร้าง javascript แล้วนำไปใช้กับ onClick ของปุ่มของฟอร์มใน OFBiz ดังนี้
<input type="submit" name="Submit" value="Submit" onClick="fncSubmit()" />

พบว่าไม่สามารถทำได้ เนื่องจาก OFBiz จะทำการ generate แท็ก onSubmit ให้โดยอัติโนมัติดังนี้

onSubmit="javascript:submitFormDisableSubmits(this)"

เมื่อเขียน javascript ที่ปุ่ม submit ของ form ทำให้เกิดการ submit ไปยัง target ของ form ถึงแม้ว่าจะเป็นการกดปุ่ม cancel

ได้รับคำแนะนำจากพี่แซนด์ให้ทำการสร้างปุ่มของฟอร์มในไฟล์ ftl แล้ว include เข้ามาใช้แทนปุ่มของ form โดยตรง จึงได้ทำการสร้างไฟล์ดังนี้

1. สร้างไฟล์ submitButton.ftl โดยมีรายละเอียดดังนี้ (ใช้ dojo มาช่วยในการเขียน javascript ศึกษาเพิ่มเติมได้จาก http://www.dojotoolkit.org/)

<button dojoType="dijit.form.Button" id="btn">Submit
    <script type="dojo/method" event="onClick">showDlg1("FindProject")</script>
</button>

2. ทำการ comment ปุ่มของ form เดิม เพื่อไม่ให้ปุ่มเดิมสามารถทำงานได้
3. เขียนฟังก์ชั่น javascript ในไฟล์ชื่อ testDialog.js ดังนี้

dojo.addOnLoad(function(){
 dojo.parser.parse();
});

function removeThis(){
 this.destroyRecursive()
}

function showDlg1(formIdName){
 var d = new dijit.Dialog({id:'dlg',title:'Dojo Dialogs',content: "<h2>Do you need to do this thing ?</h2>" +
        "<button dojoType='dijit.form.Button' type='submit' id='buttonalertyes' iconClass='mailIconOk' onClick='document." + formIdName + ".submit()'>Yes</button><button dojoType='dijit.form.Button' type='submit' id='buttonalertno' iconClass='mailIconCancel'>No</button>",onExecute:removeThis,onCancel:removeThis});
 d.show()
}

4. ที่ form ทำการ include ไฟล์ submitButton.ftl เข้าไปดังนี้
<platform-specific>
    <html><html-template location="component://imas-project/webapp/imas-project/project/submitButton.ftl"/></html>
</platform-specific>

5. ทำการเพิ่มไฟล์ testDialog.js ใน framework/common/widget/CommonScreens.xml เพื่อให้ทุกเพจสามารถเรียกใช้ไฟล์ javscript นี้ได้ ดังนี้
<set field="layoutSettings.javaScripts[+0]" value="/dojotoolkit/imas/testDialog.js" global="true"/>

6.เมื่อทดลองกดปุ่ม จะแสดง dialog box ดังนี้

ไม่มีความคิดเห็น:

แสดงความคิดเห็น