Make sure that you have first completed the previous tutorial - Designing a New App

ตรวจสอบให้แน่ใจว่าคุณได้ทำบทช่วยสอนก่อนหน้านี้เสร็จแล้ว - Designing a New App


  1. In the Design App page, click on the Create New Form button along the top.

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



  2. Key in the details of the new form.

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


    NameDescription
    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. Hover any form element to see the Edit and Delete options. Click on Edit to modify the form element properties.

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


  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 ขนาดใหญ่ที่ด้านบนและคุณจะได้รับการยืนยันว่าฟอร์มนั้นถูกบันทึก จากนั้นคุณสามารถออกแบบฟอร์มต่อไปหรือปิดหน้าต่างตัวสร้างแบบฟอร์ม