แชร์ผ่าน


เพิ่มและใช้งานหน้าจอในแอปพื้นที่ทำงาน

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

มีหน้าจอที่สร้างล่วงหน้าใหม่ๆ ต่อไปนี้:

ภาพหน้าจอของเมนูหน้าจอใหม่ใน Power Apps Studio ที่แสดงเค้าโครงที่พร้อมใช้งาน

เพิ่มหน้าจอใหม่

  1. เข้าสู่ระบบ Power Apps

  2. สร้างแอปพื้นที่ทำงานหรือเปิดแอปเพื่อแก้ไข

  3. บน แถบคำสั่ง ให้เลือก หน้าจอใหม่ แล้วเลือกเค้าโครงหน้าจอ

  4. ดูตัวอย่าง แอปเพื่อดูว่าแอปมีลักษณะอย่างไรบนอุปกรณ์ต่างๆ สําหรับข้อมูลเพิ่มเติม ให้ดู แสดงตัวอย่างแอป

เคล็ดลับ

เพื่อทําให้แอปปรับให้เข้ากับขนาดของอุปกรณ์ที่แสดงกําลังทํางานอยู่ ให้ปิดตัวเลือก ปรับมาตราส่วนให้พอดี

หน้าจอต้อนรับ

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

เทมเพลต หน้าจอยินดีต้อนรับ มีตัวควบคุมต่อไปนี้:

  • คอนเทนเนอร์หน้าจอ
    • คอนเทนเนอร์ส่วนหัว
      • ส่วนหัว
    • คอนเทนเนอร์หลัก
      • คอนเทนเนอร์
        • คอนเทนเนอร์รูปภาพ
          • Image
        • คอนเทนเนอร์ชื่อ
          • ปุ่มรายการคุณลักษณะ
          • ข้อความคำอธิบาย

ภาพหน้าจอที่แสดงสิ่งที่ปรากฏขึ้นเมื่อคุณเพิ่มเค้าโครงหน้าจอต้อนรับจากปุ่มหน้าจอใหม่

เพิ่มและปรับแต่งหน้าจอต้อนรับ

  1. เลือก หน้าจอใหม่>หน้าจอต้อนรับ

  2. หากต้องการเปลี่ยนรูปภาพของไทล์ ให้เลือกรูปภาพ แล้วเลือก แก้ไข

  3. เลือกตัวควบคุมปุ่ม รายการคุณลักษณะ และเพิ่มข้อความของคุณเองใน บานหน้าต่างคุณสมบัติ

    ภาพหน้าจอแสดงตำแหน่งที่จะแก้ไขข้อความของไทล์รายการแนะนำ

  4. เลือกข้อความ คำอธิบายสั้นๆ หรือข้อความที่น่าสนใจ แล้วเพิ่มข้อความของคุณเอง

  5. เพิ่มและเอาไทล์ออก หากจำเป็น

    • หากต้องการเพิ่มไทล์ในมุมมองทรี ให้คัดลอกและวางรายการ คอนเทนเนอร์

    • หากต้องการเอาไทล์ในมุมมองทรีออก ให้คลิกขวาที่ คอนเทนเนอร์ แล้วเลือก ลบ

ใช้หน้าจอ ส่วนหัวและแกลเลอรี เพื่อแสดงช่วงของผลิตภัณฑ์หรือบริการ เช่น แค็ตตาล็อกผลิตภัณฑ์ เมื่อคุณเชื่อมต่อตัวควบคุมแกลเลอรีกับแหล่งข้อมูล แค็ตตาล็อกจะถูกสร้างขึ้นโดยอัตโนมัติโดยต้องมีการปรับแต่งเพียงเล็กน้อย

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

หน้าจอ ส่วนหัวและแกลเลอรี มีเทมเพลตสำหรับตัวควบคุมต่อไปนี้:

  • คอนเทนเนอร์หน้าจอ
    • คอนเทนเนอร์ส่วนหัว
      • ส่วนหัว
    • คอนเทนเนอร์หลัก
      • แกลเลอรี
        • คอนเทนเนอร์แกลเลอรี
          • คอนเทนเนอร์รูปภาพ
            • Image
          • คอนเทนเนอร์ชื่อ
            • ข้อความชื่อเรื่อง
            • ข้อความคำอธิบาย
          • คอนเทนเนอร์ปุ่ม
            • Button

ภาพหน้าจอแสดงหน้าจอส่วนหัวและแกลเลอรี

  1. เลือก หน้าจอใหม่>ส่วนหัวและแกลเลอรี

  2. ในมุมมองทรี ให้เลือก แกลเลอรี และเชื่อมต่อกับแหล่งข้อมูล เช่น Dataverse

  3. เลือกตัวควบคุมเฉพาะภายในแกลเลอรี เช่น รูปภาพ ข้อความชื่อ และข้อความคำอธิบาย ในคุณสมบัติของตัวควบคุม ให้ใช้ไวยากรณ์ ThisItem เพื่อตั้งค่ารูปภาพ ข้อความชื่อ และคำอธิบายที่ต้องการ

    ตัวอย่างเช่น เมื่อต้องการเพิ่ม ชื่อบัญชี ลงในตัวควบคุมข้อความชื่อ ให้ค้นหาโดยพิมพ์ ThisItem ในแถบสูตรเพื่อดูรายชื่อของรายการที่พร้อมใช้งานที่จะเพิ่มจากชุดข้อมูลของคุณ

    ภาพหน้าจอแสดงตำแหน่งที่จะใช้ ThisItem ในแถบสูตร

หน้าจอคำขออนุมัติ

หน้าจอ คำขออนุมัติ มีส่วนหัว ฟอร์มที่มีปุ่มส่ง และแกลเลอรีที่มีลำดับขั้นที่กำหนดไว้ล่วงหน้า หน้าจอ คำขออนุมัติ มีประโยชน์สำหรับสถานการณ์ที่มีการทริกเกอร์การดำเนินการโดยการส่งฟอร์ม เช่น การส่งคำขอการอนุมัติหรือการแสดงกระบวนการของเวิร์กโฟลว์สำหรับธุรกิจ

เคล็ดลับ

เมื่อคุณเพิ่มหน้าจอคําขออนุมัติ ให้เชื่อมต่อกับแหล่งข้อมูล แหล่งข้อมูลจะกำหนดชื่อฟิลด์ในฟอร์มคำขอ

หน้าจอ คำขออนุมัติ มีเทมเพลตสำหรับตัวควบคุมต่อไปนี้:

  • คอนเทนเนอร์หน้าจอ
    • คอนเทนเนอร์ส่วนหัว
      • ส่วนหัว
    • คอนเทนเนอร์หลัก
      • คอนเทนเนอร์ฟอร์ม
        • ข้อความชื่อเรื่องของฟอร์ม
        • ฟอร์มการอนุมัติ
        • ปุ่มส่ง
      • คอนเทนเนอร์แถบด้านข้าง
        • ข้อความของผู้ตรวจทาน
        • แกลเลอรีผู้ตรวจทาน

ภาพหน้าจอแสดงหน้าจอคำขออนุมัติ

เพิ่มและปรับแต่งหน้าจอคำขออนุมัติ

  1. เลือก หน้าจอใหม่>คำขออนุมัติ

  2. ในมุมมองทรีบน ApprovalForm ให้เชื่อมต่อกับแหล่งข้อมูล เช่น Dataverse

  3. เลือกแหล่งข้อมูล

  4. หากต้องการดูรายละเอียดของขั้นตอนการอนุมัติ ให้เลือก ผู้ตรวจสอบแกลเลอรี ภายใต้โหนด SidebarContainer ในมุมมองทรี จากนั้น ในบานหน้าต่างคุณสมบัติ ให้เลือกแท็บ ขั้นสูง และไปที่ รายการ

    ขั้นตอนการอนุมัติมีรายละเอียดดังต่อไปนี้:

    • ชื่อ: ชื่อของลำดับขั้นหรือผู้อนุมัติ
    • ชื่อเรื่อง: คำบรรยายของลำดับขั้นหรือผู้อนุมัติ
    • สถานะ: สถานะของลำดับขั้น
    • ปัจจุบัน: ลำดับขั้นนี้เป็นลำดับขั้นปัจจุบันของคำขออนุมัติหรือไม่

    ภาพหน้าจอแสดงคุณสมบัติขั้นสูงของรายการ

หากต้องการแจ้งผู้อนุมัติ ให้เพิ่มเวิร์กโฟลว์การอนุมัติ Power Automate ในปุ่ม สําหรับข้อมูลเพิ่มเติม ให้ดู สร้างและทดสอบเวิร์กโฟลว์การอนุมัติด้วย Power Automate

ส่วนหัวและฟอร์ม

หน้าจอ ส่วนหัวและฟอร์ม มีส่วนหัว ฟอร์ม และปุ่มสองปุ่มสำหรับส่งฟอร์มหรือยกเลิกการส่งฟอร์ม หน้าจอนี้เหมาะสำหรับการใช้ฟอร์มแบบเต็มหน้าจอ

หน้าจอ ส่วนหัวและฟอร์ม มีเทมเพลตสำหรับตัวควบคุมต่อไปนี้:

  • คอนเทนเนอร์หน้าจอ
    • คอนเทนเนอร์ส่วนหัว
      • ส่วนหัว
    • คอนเทนเนอร์หลัก
      • คอนเทนเนอร์ฟอร์ม
        • ฟอร์ม
      • คอนเทนเนอร์ปุ่ม
        • ปุ่มยกเลิก
        • ปุ่มส่ง

ภาพหน้าจอแสดงหน้าจอส่วนหัวและฟอร์ม

เพิ่มและปรับแต่งหน้าจอส่วนหัวและฟอร์ม

  1. เลือก หน้าจอใหม่>ส่วนหัวและฟอร์ม

  2. ในมุมมองทรี คุณจะเห็น ฟอร์ม ถูกเลือกและพร้อมท์ปรากฏขึ้นเพื่อบอกให้คุณเชื่อมต่อฟอร์มกับแหล่งข้อมูล

  3. เลือกแหล่งข้อมูล

  4. หรือเพื่อให้แน่ใจว่าหน้าจอตอบสนองได้ดีที่สุด ให้เลือกการ์ดข้อมูลแต่ละใบในฟอร์มและตั้งค่าคุณสมบัติ Width Fit เป็น เปิด ในแท็บ การแสดงผล ของบานหน้าต่าง คุณสมบัติ

ส่วนหัวและตาราง

หน้าจอ ส่วนหัวและตาราง มีตัวควบคุมสองตัว: ตัวควบคุมส่วนหัวและตัวควบคุมตาราง เทมเพลตนี้เหมาะสำหรับการแสดงตารางข้อมูลโดยละเอียดบนหน้าจอ

หน้าจอ ส่วนหัวและตาราง มีตัวควบคุมต่อไปนี้:

  • คอนเทนเนอร์ส่วนหัว
    • ส่วนหัว
  • คอนเทนเนอร์หลัก
    • Table

เพิ่มและปรับแต่งหน้าจอส่วนหัวและตาราง

  1. เลือก หน้าจอใหม่>ส่วนหัวและตาราง

  2. ในมุมมองทรี ให้เลือก ตาราง และเชื่อมต่อกับแหล่งข้อมูล

ตารางและฟอร์ม

หน้าจอตารางและฟอร์มประกอบด้วยตัวควบคุมหลักสองตัวควบคุม ได้แก่ ตัวควบคุมตารางแบบโมเดิร์นและตัวควบคุมฟอร์มแบบโมเดิร์น เทมเพลตนี้มีสูตร Power Fx ในตัวเพื่อทําให้การเชื่อมต่อข้อมูลและการกําหนดค่าเป็นเรื่องง่าย เทมเพลตนี้เหมาะสําหรับการเลือกและการแก้ไขเรกคอร์ดโดยใช้ฟอร์ม

หน้าจอตารางและฟอร์มมีตัวควบคุมต่อไปนี้:

  • คอนเทนเนอร์หน้าจอ
    • คอนเทนเนอร์ส่วนหัว
      • ตัวควบคุมส่วนหัว
    • คอนเทนเนอร์เนื้อหา
      • การป้อนข้อความ (ค้นหา)
      • ตัวควบคุมตาราง
      • ตัวควบคุมฟอร์ม
      • ปุ่ม
        • ใหม่
        • แก้ไข
        • Delete
        • ส่ง
        • ยกเลิก

ภาพหน้าจอแสดงหน้าจอตารางและฟอร์ม

เพิ่มและปรับแต่งหน้าจอตารางและฟอร์ม

ใน Power Apps Studio

  1. เลือก หน้าจอใหม่>ตารางและฟอร์ม

  2. เลือก ข้อมูล ในแถบการดำเนินการแบบอินไลน์

  3. เลือกแหล่งข้อมูลที่คุณต้องการ

    ภาพหน้าจอแสดงตำแหน่งของปุ่มข้อมูล ซึ่งคุณสามารถเลือกแหล่งข้อมูลจากรายการได้

    เมื่อคุณเชื่อมต่อ ตารางและฟอร์มควบคุมทั้งคู่เชื่อมต่อกับแหล่งข้อมูล

คุณสามารถเลือกระเบียนในตัวควบคุมตาราง และฟอร์มจะแสดงรายละเอียดของระเบียนที่เลือก

ปุ่มทั้งหมดในเทมเพลตนี้มี Power Fx จัดทําสําเร็จ ดังนั้นคุณไม่จําเป็นต้องกําหนดค่าเอง เมื่อคุณเชื่อมต่อหน้าจอกับแหล่งข้อมูลที่เลือก หน้าจอจะทํางานอย่างสมบูรณ์

ภาพหน้าจอแสดงมุมมองหน้าจอเมื่อเชื่อมต่อกับแหล่งข้อมูล: รายการข้อมูลและองค์ประกอบของฟอร์มที่มีปุ่มส่ง

เรียงลำดับหน้าจอใหม่

เมื่อแอปของคุณมีมากกว่าหนึ่งหน้าจอ คุณสามารถเปลี่ยนลําดับของแอปในมุมมองทรีได้

เลือกเมนูโอเวอร์โฟลว์ของหน้าจอที่คุณต้องการเรียงลำดับใหม่ จากนั้นเลือก เลื่อนขึ้น หรือ เลื่อนลง

ภาพหน้าจอแสดงตำแหน่งของเมนูโอเวอร์โฟลว์เพื่อเลื่อนหน้าจอขึ้นหรือลงในมุมมองทรีของคุณ

ใช้คุณสมบัติ StartScreen เพื่อตั้งค่าหน้าจอที่แสดงเป็นอันดับแรก

เพิ่มการนำทาง

เมื่อแอปของคุณมีมากกว่าหนึ่งหน้าจอ เพิ่มการนําทางเพื่อให้ผู้ใช้ของคุณสามารถย้ายไปมาระหว่างหน้าจอเหล่านั้นได้

  1. เลือกหน้าจอ เลือก แทรก ในกล่องค้นหา ให้พิมพ์ ลูกศรถัดไป แล้วเลือก

  2. ย้ายลูกศรไปยังตำแหน่งที่คุณต้องการให้ปรากฏบนหน้าจอ

  3. เลือกลูกศร ตั้งค่าคุณสมบัติ OnSelect ไปยังฟังก์ชัน Navigate ตัวอย่างเช่น ใช้ Navigate(Target, Fade)

    แทนที่ เป้าหมาย ด้วยชื่อของหน้าจอที่คุณต้องการนำทาง

    ภาพหน้าจอของคุณสมบัติ OnSelect ตั้งค่าเป็นฟังก์ชัน Navigate

    ในตัวอย่างนี้ เมื่อผู้ใช้เลือกลูกศร หน้าจอเป้าหมายจะค่อยๆ ปรากฏขึ้นมา

  4. บนหน้าจอ เป้าหมาย ให้เพิ่มไอคอน ลูกศรย้อนกลับ ด้วยวิธีเดียวกัน ตั้งค่าคุณสมบัติ OnSelect ตัวอย่างเช่น Navigate(Target, ScreenTransition.Fade)

    แทนที่ เป้าหมาย ด้วยชื่อของหน้าจอที่คุณต้องการย้อนกลับ

การอ้างอิงการควบคุมหน้าจอ