Step-by-Step Guide

1. In the Design App page, click on the + button along the top to create a form.

   ในหน้า Design App คลิกที่ Create New Form ด้านบน

   
   
   
   
   
   

2. Key in the details of the new form.

   ใส่รายละเอียดของแบบฟอร์มใหม่

   
   

   

   Name	Description
   Form ID	Unique ID to represent this entity. ID ที่ไม่ซ้ำเพื่อแสดงถึง เอกลักษณ์ A standard naming convention is highly recommended to be used across the development of your App to maintain consistency and ease maintenance works. Camel case naming convention is recommended for this field. Example:  travelRequestForm ขอแนะนำให้ใช้แบบแผนการตั้งชื่อมาตรฐานในการพัฒนาแอพของคุณเพื่อรักษาความสม่ำเสมอและความสะดวกในการบำรุงรักษา แนะนำให้ใช้หลักการตั้งชื่อเคสสำหรับฟิลด์นี้ ตัวอย่าง: travelRequestForm Do not use the following reserved IDs as ID of Form, Section and Field. "appId, appVersion, version, userviewId, menuId, key, embed". อย่าใช้ ID ที่สงวนไว้ต่อไปนี้เป็น ID ของแบบฟอร์มและฟิลด์ "appId, appVersion, version, userviewId, menuId, key, embed"
   Form Name	Name to represent this entity. ชื่อที่ใช้แทนเอกลักษณ์ Travel Request Form
   Table Name	The database table name to store the form data. ชื่อตารางฐานข้อมูลเพื่อเก็บข้อมูลฟอร์ม As the table name is related to the database, we highly recommend the use of database naming conventions, e.g.  travel_requests เนื่องจากชื่อตารางควรเกี่ยวข้องกับฐานข้อมูลเราขอแนะนำให้ใช้แบบแผนการตั้งชื่อฐานข้อมูลเช่น travel_requests Note that different forms can share data by pointing to the same table name. โปรดทราบว่าฟอร์มที่แตกต่างกันสามารถแบ่งปันข้อมูลโดยชี้ไปที่ชื่อตารางเดียวกัน
   Description	Entity description. คำอธิบาย
   Duplicate form settings and elements from	With the above information filled up, one can choose to clone the design from existing Form entity. เราสามารถเลือกโคลนการตั้งค่าข้อมูลที่สมบูรณ์จาก Form เดิมที่มีอยู่

                                                                

3. Click on Save to save the form and launch the Form Builder in a new window. If your browser blocks the popup, click on the form name to launch it.

   คลิก Save เพื่อบันทึกแบบฟอร์มและเปิดตัวสร้างแบบฟอร์มในหน้าต่างใหม่ หากเบราว์เซอร์ของคุณบล็อกป๊อปอัปให้คลิกที่ชื่อฟอร์มเพื่อเปิดใช้งาน

   
   
   

4. The first step in the Form Builder is the Design Form page. On the left is the palette containing available form elements. In the middle is the canvas containing one or more sections, and each section may contain one or more columns.

   ขั้นตอนแรกในตัวสร้างแบบฟอร์มคือหน้า Design Form ด้านซ้ายเป็นจานสีที่มีองค์ประกอบของฟอร์มที่มีอยู่ ตรงกลางคือผืนผ้าใบที่มีส่วนหนึ่งส่วนหรือมากกว่าและแต่ละส่วนอาจมีหนึ่งหรือหลายคอลัมน์

   
   
   
   

5. When you mouseover a section header (or any form element), buttons appear giving you options.

   เมื่อคุณวางส่วนหัวของส่วน (หรือองค์ประกอบของฟอร์มใด ๆ ) ปุ่มจะปรากฏขึ้นเพื่อให้คุณเลือก

   
   
   

6. Click on Edit Section. This opens a Property Editor showing properties that you can modify. Each form element has different properties that can be configured.

   คลิกที่ Edit Section นี่เป็นการเปิดตัวแก้ไขคุณสมบัติที่แสดงคุณสมบัติที่คุณสามารถปรับเปลี่ยนได้ แต่ละองค์ประกอบของฟอร์มมีคุณสมบัติที่แตกต่างกันซึ่งสามารถกำหนดค่าได้

   
   
   

7. Click on the OK at the bottom to save the property changes.

   คลิกที่ OK ที่ด้านล่างเพื่อบันทึกการเปลี่ยนแปลงคุณสมบัติ

   
   
   

8. You can add sections using Add Section, and move sections around by dragging.

   คุณสามารถเพิ่มส่วนโดยใช้ Add Section และย้ายส่วนต่างๆโดยการลาก

   
   
   

9. Drag form elements from the palette into any section.

   
   

   ลากองค์ประกอบแบบฟอร์มจากจานสีลงในส่วนใดก็ได้

   

10. Click on any form element to see the Property options, and to view the configured details.

    เลื่อนองค์ประกอบอิลิเมนต์ใด ๆ เพื่อดูตัวเลือกแก้ไขและลบ คลิกที่แก้ไขเพื่อแก้ไขคุณสมบัติองค์ประกอบแบบฟอร์ม

    
    

11. At any time, you may preview the form by clicking on the large Preview button at the top.

    คุณสามารถดูตัวอย่างแบบฟอร์มได้ตลอดเวลาโดยคลิกที่ปุ่มแสดงตัวอย่างขนาดใหญ่ที่ด้านบน

    
    
    

12. Once you have finished designing the form, click on the large Save button at the top and you will receive confirmation that the form is saved. You may then continue to design the form, or close the Form Builder window.

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