Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Info
titlePrevious step

Make sure that you have first completed the previous tutorial ตรวจสอบให้แน่ใจว่าคุณได้ทำตามบทแนะนำก่อนหน้านี้เสร็จสิ้นแล้ว - การออกแบบลิสต์

Widget Connector
width600
urlhttps://www.youtube.com/watch?v=1xEB2JGP5fQ&list=PLFOgRDg2hmNLg_I-BjTj3hGAi2pD57lZ1&index=4

 

  1. In the App design page, click on the ในหน้าการออกแบบแอปให้คลิกที่ปุ่ม Create New Userview button along the top. ที่ด้านบน

     
  2. ใส่รายละเอียดของข้อมูลใหม่และคลิกที่ปุ่ม Save Key in the details of the new userview and click on the Save button.

    NameDescription
    ID

    Unique ID to represent this entity.รหัสเฉพาะเพื่อบ่งบอกถึงเอนทิตี้นี้

    Info
    titleNaming convention

    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: travelPortal

    Info
    titleImportant Note

    The ID declared here would be part of the eventual URL seen by the end users. Try to choose something short and meaningful.

    รหัสที่ประกาศจะเป็นส่วนหนึ่งของ URL ที่ผู้ใช้เห็น พยายามเลือกสิ่งที่สั้นและมีความหมาย

    Name

    ชื่อที่อ้างอิงถึงเอนทิตี้นี้

    Name

    Name to represent this entity.

    Info
    titleExample

    Travel Portal

    Info
    titleImportant Note

    The name declared here would be the userview name seen by the end users. Try to choose something short and meaningful.ชื่อที่ประกาศไว้จะเป็นชื่อยูสเซอร์วิวที่ผู้ใช้เห็น พยายามเลือกสิ่งที่สั้นและมีความหมาย

    DescriptionEntity description. คำอธิบายเอนทิตี้ (OPTIONALไม่บังคับ)
    Duplicate Userview fromWith the above information filled up, one can choose to clone the design from existing Userview entity.ด้วยข้อมูลด้านบนที่มากไป คุณสามารถเลือกคัดลอกยูสเซอร์วิวที่มีอยู่แล้วได้

            

  3. Click on Save to save the userview and launch the Userview Builder in a new window. If your browser blocks the popup, click on the form name to launch it.
     
  4. The first step in the Userview Builder is the Design Userview page. On the left is the palette containing available menu elements. In the middle is the canvas containing the userview headerfooter and one or more menu categories.
    Image Removed
     
  5. คลิกที่ Save เพื่อบันทึกยูสเซอร์วิวและจะไปยังหน้าต่าง Userview Builder หากเบราว์เซอร์ของคุณบล็อกป๊อปอัปให้คลิกที่ชื่อฟอร์มเพื่อเปิดใช้งาน
     
  6. ขั้นตอนแรกใน Userview Builder คือหน้า Design Userview ด้านซ้ายคือส่วนของเมนูต่างๆ สามารถเลือกใช้งานได้ โดยการลากแล้วนำมาวางในพื้นที่ตรงกลาง ซึ่งในพื้นที่ตรงกลางประกอบด้วย header footer และหนึ่ง menu categories หรือมากกว่า
    Image Added
     
  7. เมื่อวางเมาส์เหนือเมนูในพื้นที่ส่วนตรงกลาง จะปรากฏปุ่ม Add Category ขึ้นมาเพื่อให้คุณเลือกที่จะเพิ่มหมวดหมู่ 

  8. คุณสามารถคลิกชื่อหมวดหมู่ใดๆเพื่อแก้ไขและลากหมวดหมู่ขึ้นและลงได้

  9. ลากเมนูจากด้านซ้ายมาวางลงในหมวดหมู่ใดก็ได้

  10. วางเมาส์เหนือหมวดหมู่หรือเมนูเพื่อดูตัวเลือกต่างๆที่สามารถใช้งานได้
    Image Added

  11. คลิกที่ปุ่ม Properties เพื่อแก้ไขคุณสมบัติต่างๆของเมนู
    Image Added

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

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

  14. ก่อนที่ยูสเซอร์วิวจะสามารถเข้าถึงได้โดยผู้ใช้ปกติ แอปต้องได้รับการเผยแพร่ โดยคลิกที่ลิงก์ Not Published หรือ Versions ทางด้านซ้ายในหน้าออกแบบแอป
    Image Added

  15. ป๊อปอัปแสดงเวอร์ชันทั้งหมดของแอปพลิเคชัน กดเลือกเวอร์ชันที่ต้องการ และคลิกที่ปุ่ม Publish เมื่อมีการเผยแพร่แอปแล้ว ยูสเซอร์วิวจะพร้อมใช้งานใน When you hover over the canvas Menu, a button will appear giving you the option to Add Category.
    You can click any category name to edit it, and drag categories up and down.
    Drag menu elements from the palette into any category.
    Hover over any category or menu element to see the available options.
    Image Removed
    Click on Properties button to modify each menu element's properties.
    Image Removed
    At any time, you may preview the Userview by clicking on the large Preview button at the top.
    Once you have finished designing the Userview, click on the large Save button at the top and you will receive confirmation that the Userview is saved. You may then continue to design the Userview, or close the Userview Builder window.
    Before an Userview can be accessed by a normal user, the app needs to be published. To do that, click on the Not Published or Versions link on the left in the App design page.
    Image Removed
    A popup displays all versions of the app. Select the radio button next to the latest version and click on the Publish button. Once an app is published, its Userviews will be available in the App Center.