แชร์ผ่าน


บทที่ 3: การสร้างต้นแบบแบบเขียนโค้ดเล็กน้อย

หมายเหตุ

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

Kiana ไม่เชื่อในโซลูชันแบบเขียนโค้ดเล็กน้อยและ Power Apps อย่างไรก็ตาม Kiana และ Maria ตัดสินใจที่จะสร้างแอปร่วมกันเพื่อช่วยช่างเทคนิคภาคสนามตรวจสอบสินค้าคงคลัง (และสั่งซื้อชิ้นส่วน หากจำเป็น) สอบถามฐานความรู้ และตรวจสอบการนัดหมายครั้งต่อไป ในขณะที่พวกเขาไม่อยู่ที่สำนักงานในการให้บริการ Kiana และ Maria วางแผนที่จะใช้ประสบการณ์นี้เพื่อสำรวจวิธีเพิ่มการควบคุมและใช้สูตรใน Power Apps

แม้ว่าโดยทั่วไปการสร้างต้นแบบเขียนโค้ดเล็กน้อยเริ่มต้นจะเป็นงานของนักพัฒนาพลเมือง แต่ Kiana ก็ตัดสินใจที่จะใส่ใจกับกระบวนการนี้เพื่อทำความเข้าใจวิธีการสร้างแอป Kiana ต้องการข้อมูลนี้เพื่อช่วยให้ Maria สามารถผสานรวมแหล่งข้อมูลในโลกแห่งความเป็นจริง API เว็บ และบริการที่จำเป็นอื่นๆ ลงในแอป

รายการที่ 1: การจัดการสินค้าคงคลังภาคสนาม

จุดมุ่งหมายเริ่มต้นของ Maria คือการสร้างแอปพื้นที่ทำงานที่แสดงรายการชิ้นส่วน และช่วยให้ผู้ใช้สามารถดูรายละเอียดของส่วนใดก็ได้ ในที่สุดผู้ใช้ยังควรสามารถสั่งซื้อชิ้นส่วนได้ด้วย อย่างไรก็ตามแอปเวอร์ชันเริ่มต้นนี้จะเป็นเพียงต้นแบบและยังไม่ได้เชื่อมต่อกับแบ็คเอนด์ หลังจากที่ได้รับข้อเสนอแนะจาก Caleb หัวหน้าช่างเทคนิคภาคสนามแล้ว Maria จะทำงานร่วมกับ Kiana ในการรวมแอปพื้นที่ทำงานเข้ากับระบบสินค้าคงคลังที่เรียกใช้ในสถานที่

Maria คุ้นเคยกับระบบการจัดการสินค้าคงคลังที่มีอยู่เป็นอย่างดีและเข้าใจข้อมูลที่มีอยู่ Maria เริ่มต้นด้วยการสร้างสมุดงาน Excel ที่มีตารางที่เก็บข้อมูลจำลองพร้อมรายละเอียดของตัวอย่างบางส่วน ฟิลด์ในตารางคือ ID, ชื่อ, CategoryID, ราคา, ภาพรวม, NumberInStock และ ภาพ (URL ที่อ้างอิงภาพของชิ้นส่วน) สมุดงานนี้สามารถใช้สร้างและทดสอบแอปพื้นที่ทำงาน เพื่อให้แน่ใจว่าจะแสดงข้อมูลที่ต้องการอย่างถูกต้อง Maria เก็บสมุดงานนี้ไว้ในบัญชี OneDrive ที่มีชื่อว่า BoilerParts.xlsx

หมายเหตุ

คุณสามารถค้นหาสำเนาของสมุดงานนี้ได้ในโฟลเดอร์ สินทรัพย์ ในที่เก็บ Git สำหรับคำแนะนำนี้

เวิร์กชีตชิ้นส่วนหม้อไอน้ำที่แสดงรายการของชิ้นส่วนที่มีคอลัมน์รหัส, ชื่อ, CategoryId, ราคา, ภาพรวม, NumberInStock และภาพ

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

หมายเหตุ

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

ทำตามขั้นตอนเหล่านี้เพื่อสร้างแอปด้วย Power Apps

  1. ลงชื่อเข้าใช้ Power Apps

  2. บนหน้า หน้าแรก ภายใต้ เริ่มจากข้อมูล เลือก Excel Online

    โฮมเพจ Power Apps Studio

  3. บนหน้า การเชื่อมต่อ ให้เลือก OneDrive สำหรับธุรกิจ แล้วจากนั้น เลือก สร้าง

    การเชื่อมต่อ OneDrive ใหม่

  4. บนหน้า OneDrive สำหรับธุรกิจ เลือกไฟล์ BoilerParts.xlsx

    เชื่อมต่อกับสมุดงาน Excel

  5. เลือกตารางในไฟล์ Excel (Maria สร้างตารางโดยใช้ชื่อเริ่มต้น ตารางที่ 1) แล้วจากนั้น เลือก เชื่อมต่อ

    เชื่อมต่อกับตาราง Excel

  6. รอขณะที่ Power Apps สร้างแอป

    สร้างแอป

  7. เมื่อสร้างแอปแล้ว คุณจะเห็นหน้าจอ เรียกดู ซึ่งแสดงฟิลด์ CategoryID, รหัส และ ภาพ จากแต่ละแถวของตารางชิ้นส่วนในสมุดงาน

    ส่วนต่างๆ ที่แสดงบนหน้าจอเรียกดู

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

    หมายเหตุ

    ในภาพต่อไปนี้ ป้ายชื่อ แลกเปลี่ยนความร้อน ที่แสดงในฟอร์มเดิมได้เปลี่ยนเป็นชื่อผลิตภัณฑ์ เครื่องทำความร้อน 3.5 W/S

    เปลี่ยนข้อความสำหรับการควบคุมป้ายชื่อ

  9. ทำซ้ำขั้นตอนก่อนหน้าสำหรับป้ายชื่อ รหัส และ ภาพ เปลี่ยนคุณสมบัติ Text ของฟิลด์ รหัส เป็น CategoryID และคุณสมบัติ Text ของฟิลด์ ภาพ เป็น ภาพรวม ตอนนี้หน้าจอ เรียกดู ควรมีลักษณะเหมือนภาพต่อไปนี้ ซึ่งวิศวกรภาคสนามมีแนวโน้มที่จะพบว่ามีประโยชน์สำหรับการเลือกชิ้นส่วน

    รายการที่แสดงชื่อของชิ้นส่วน ประเภทที่รายการอยู่ และภาพรวมที่เป็นคำอธิบาย

  10. คุณลักษณะการค้นหาของหน้าจอ เรียกดู กำหนดค่าเริ่มต้นเป็นการใช้ฟิลด์ที่เลือกไว้ในตอนแรก เมื่อสร้างหน้าจอ ในกรณีนี้ CategoryID, ID และ รูปภาพ ผลลัพธ์จะเรียงตาม CategoryID ซึ่งสมเหตุสมผลแล้วที่จะสลับเป็นฟิลด์ ชื่อ, CategoryID และ ภาพรวม โดยเรียงลำดับผลลัพธ์ตาม ชื่อ เลือกการควบคุม BrowseGallery1 บนบานหน้าต่าง มุมมองทรี ในรายการแบบหล่นลงทางด้านซ้ายของแถบสูตร ให้เลือกคุณสมบัติ รายการ ลากขอบล่างของแถบสูตรลง เพื่อให้มองเห็นสูตรได้อย่างสมบูรณ์ สูตรประกอบด้วยนิพจน์ต่อไปนี้:

    **SortByColumns(Search([\@Table1], TextSearchBox1.Text, "CategoryID","ID","Image"), "CategoryID", If(SortDescending1, Descending, Ascending))
    

    ฟิลด์เรียงลำดับและค้นหา

  11. เปลี่ยนนิพจน์ ค้นหา เพื่ออ้างอิงฟิลด์ ชื่อ, CategoryID และ ภาพรวม โดยใช้สูตรต่อไปนี้:

    SortByColumns(Search([\@Table1], TextSearchBox1.Text, "Name", "CategoryID", "Overview"), "Name", If(SortDescending1, Descending, Ascending))
    
  12. ชื่อในส่วนหัวของฟอร์มไม่เป็นประโยชน์ และธีมเริ่มต้นไม่ตรงกับรูปลักษณ์และความรู้สึกขององค์กรของ VanArsdel ในหน้าจอ เรียกดู เลือกป้ายชื่อ ตารางที่ 1 และบนแถบ สูตร เปลี่ยนคุณสมบัติ Text ของป้ายชื่อเป็น "เรียกดูส่วนต่างๆ" (รวมเครื่องหมายคำพูดคู่ในค่า)

  13. บนแถบเครื่องมือ เลือก ธีม (คุณอาจต้องขยายแถบเครื่องมือเพื่อแสดงรายการเพิ่มเติม) และจากนั้น เลือกธีม ป่าไม้ สีและสไตล์สำหรับหน้าจอ เรียกดู จะเปลี่ยนเพื่อให้เข้ากับธีม

    เลือกธีม

ทำให้หน้าจอรายละเอียดมีประโยชน์มากขึ้น

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

  1. บนบานหน้าต่าง มุมมองทรี เลื่อนลง และเลือก DetailScreen1 หน้าจอนี้แสดงรายละเอียดเกี่ยวกับส่วนที่ผู้ใช้เลือกบนหน้าจอ เรียกดู

    หน้าจอรายละเอียดชิ้นส่วน

  2. ในส่วนหัวของหน้าจอ รายละเอียด บนบานหน้าต่างตรงกลาง ให้เลือกป้ายชื่อ ตารางที่ 1 ในบานหน้าต่างด้านขวา บนแท็บ คุณสมบัติ เปลี่ยนคุณสมบัติ Text เป็น รายละเอียดชิ้นส่วน

    หมายเหตุ

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

    เปลี่ยนส่วนหัวของหน้าจอเรียกดูชิ้นส่วน

  3. บนบานหน้าต่าง มุมมองทรี ภายใต้ DetailScreen1 เลือก DetailForm1 ในบานหน้าต่างด้านขวา บนแท็บ คุณสมบัติ ให้เลือก แก้ไขฟิลด์ ที่ถัดจาก ฟิลด์ ในบานหน้าต่างตรงกลาง ให้เลือกและลากฟิลด์เพื่อให้แสดงตามลำดับต่อไปนี้ จากบนลงล่าง:

    • ชื่อ
    • CategoryID
    • ภาพรวม
    • ราคา
    • NumberInStock
    • Image
    • ID

    จัดเรียงฟิลด์บนหน้าจอรายละเอียด

  4. เลือกฟิลด์ รหัส เลือกจุดไข่ปลาที่ปรากฏทางด้านขวาของฟิลด์ และจากนั้น เลือก ลบ จากเมนูแบบหล่นลงที่ปรากฏขึ้น การดำเนินการนี้จะลบฟิลด์ รหัส จากฟอร์ม

    ลบฟิลด์รหัสออกจากฟอร์ม

  5. บนบานหน้าต่าง มุมมองทรี ใต้ DetailForm1 ให้เลือก CategoryID_DataCard1 องค์ประกอบนี้คือตัวควบคุม DataCard ที่แสดงชื่อของฟิลด์ (ที่เรียกว่า คีย์) และค่า

    การควบคุมการ์ดข้อมูล CategoryID

    ในบานหน้าต่างด้านขวา บนแท็บ ขั้นสูง ให้เลือก ปลดล็อกเพื่อเปลี่ยนคุณสมบัติ ในส่วน ข้อมูล เปลี่ยนฟิลด์ DisplayName เป็น "ประเภท" (รวมเครื่องหมายคำพูด)

    หมายเหตุ

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

    เปลี่ยนชื่อที่แสดงของฟิลด์รายละเอียด CategoryID

  6. ทำซ้ำขั้นตอนก่อนหน้าเพื่อเปลี่ยนคีย์สำหรับ NumberInStock_DataCard1 เป็น "จำนวนในสต็อก" (รวมเครื่องหมายคำพูด)

  7. คุณต้องปรับการจัดรูปแบบของฟิลด์ ราคา เพื่อแสดงข้อมูลเป็นค่าสกุลเงิน บนบานหน้าต่าง มุมมองทรี ใต้ DetailForm1 ใต้ Price_DataCard1 เลือก DataCardValue7 นี่คือฟิลด์ที่แสดงค่าของฟิลด์ ราคา บนบานหน้าต่าง DataCardValue7 ทางด้านขวา บนแท็บ ขั้นสูง ให้เปลี่ยนคุณสมบัติ Text เป็น Text(Value(Parent.Default), "[$-en-US]$ ###,##0.00")

    จัดรูปแบบราคาเป็นสกุลเงิน

    นิพจน์ Parent.Default หมายถึงรายการข้อมูลที่ตัวควบคุมหลัก (มีการผูกข้อมูล DataCard) ในกรณีนี้เป็นคอลัมน์ ราคา ฟังก์ชัน ข้อความ จัดรูปแบบค่านี้ใหม่โดยใช้รูปแบบที่ระบุเป็นอาร์กิวเมนต์ที่สอง ในตัวอย่างนี้ นี่คือสกุลเงินท้องถิ่นที่มีทศนิยมสองตำแหน่ง

  8. การ์ดข้อมูลรูปภาพควรแสดงรูปภาพของชิ้นส่วน แทนที่จะเป็น URL ของไฟล์รูปภาพ บนบานหน้าต่าง มุมมองทรี ใต้ DetailForm1 ใต้ Image_DataCard1 เลือก DataCardValue3 แล้วเลือก ลบ เพื่อลบตัวควบคุมนี้

  9. เลือก Image_DataCard1 บนบานหน้าต่างด้านซ้าย เลือก + แทรก บนบานหน้าต่าง แทรก ขยาย สื่อ แล้วจากนั้น เลือก ภาพ

    แทนที่ URL รูปภาพด้วยรูปภาพ

  10. กลับไปที่บานหน้าต่าง มุมมองทรี และตรวจสอบว่าตัวควบคุมข้อความ Image1 ถูกเพิ่มลงในตัวควบคุม Image_DataCard1

    ตรวจสอบว่าได้เพิ่มตัวควบคุมรูปภาพแล้ว

  11. บนบานหน้าต่าง มุมมองทรี เลือก Image_DataCard1 ในบานหน้าต่างด้านขวา บนแท็บ ขั้นสูง เปลี่ยน ความสูง เป็น 500 เพื่อให้มีพื้นที่เพียงพอสำหรับการแสดงภาพ

    ตั้งค่าความสูงของการ์ดข้อมูลรูปภาพ

  12. บนบานหน้าต่าง มุมมองทรี เลือก Image1 ตั้งค่าคุณสมบัติดังต่อไปนี้

    • รูปภาพ: Parent.Default
    • ImagePosition: ImagePosition.Fit
    • ความกว้าง: 550
    • ความสูง: 550

    หมายเหตุ

    ขณะนี้รูปภาพที่แสดงว่างเปล่า เนื่องจาก URL ในสมุดงาน Excel เป็นเพียงตัวยึด คุณจะแก้ไขปัญหานี้ และดึง URL จริง เมื่อคุณเชื่อมโยงแอปกับ Web API ในบทต่อไป

นอกจากนี้ แอปนี้ยังมีหน้าจอ แก้ไข ซึ่งช่วยให้ผู้ใช้สามารถเปลี่ยนข้อมูลบางส่วนได้ วิศวกรไม่ควรสามารถเปลี่ยนแปลงรายละเอียดของชิ้นส่วน สร้างชิ้นส่วนใหม่ หรือลบชิ้นส่วนออกจากแค็ตตาล็อกได้

  1. บนบานหน้าต่าง มุมมองทรี เลือก EditScreen1 เลือกปุ่มจุดไข่ปลา และจากนั้น เลือก ลบ เพื่อลบหน้าจอนี้

    ลบหน้าจอแก้ไข

  2. บนบานหน้าต่าง มุมมองทรี เลือก DetailsScreen1 สังเกตว่า Power Apps Studio แสดงข้อความแสดงข้อผิดพลาดสำหรับหน้าจอนี้ ข้อผิดพลาดนี้เกิดขึ้นเนื่องจาก DetailsScreen1 มีนิพจน์ที่อ้างอิงหน้าจอ EditScreen1 ซึ่งไม่มีอยู่แล้ว

  3. ในส่วนหัวของ DetailsScreen1 เลือกไอคอนดินสอ (IconEdit1) คุณสมบัติ OnSelect สำหรับการควบคุมนี้ประกอบด้วยนิพจน์ EditForm(EditForm1);Navigate(EditScreen1, ScreenTransition.None) เมื่อไอคอน แก้ไข ถูกเลือก นิพจน์นี้จะทำงานและพยายามย้ายไปที่หน้าจอ EditScreen1

    แก้ไขคุณสมบัติ OnSelect

  4. บนบานหน้าต่าง มุมมองทรี เลือก IconEdit1 แล้วจากนั้น เลือก ลบ ไม่จำเป็นต้องมีไอคอนนี้อีกต่อไป

  5. เลือก IconDelete1 แล้วจากนั้น เลือก ลบ ไอคอนนี้ถูกใช้เพื่อลบส่วนปัจจุบัน และไม่จำเป็นต้องมีไอคอนนี้

    ลบไอคอนลบและไอคอนแก้ไข

  6. สังเกตว่าข้อความ รายละเอียดชิ้นส่วน หายไปจากส่วนหัวของหน้าจอ แต่ Power Apps Studio แสดงข้อความแสดงข้อผิดพลาดแทน นี่เกิดขึ้นเนื่องจากมีการคำนวณความกว้างของตัวควบคุมป้ายชื่อที่แสดงข้อความ บนบานหน้าต่าง มุมมองทรี เลือก LblAppName2 ตรวจสอบคุณสมบัติ ความกว้าง ค่าของคุณสมบัตินี้เป็นผลลัพธ์ของนิพจน์ Parent.Width - Self.X - IconDelete1.Width - IconEdit1.Width

    ตัวควบคุม LblAppName2 ที่แสดงข้อผิดพลาดเกี่ยวกับความกว้าง

  7. เปลี่ยนนิพจน์สำหรับคุณสมบัติ ความกว้าง เป็น Parent.Width - Self.X ข้อผิดพลาดควรหายไป และข้อความ รายละเอียดชิ้นส่วน ควรปรากฏขึ้นอีกครั้งในส่วนหัวของหน้าจอ

  8. บนบานหน้าต่าง มุมมองทรี เลือก BrowseScreen1 นอกจากนี้ หน้าจอนี้ยังแสดงข้อความแสดงข้อผิดพลาดด้วย ไอคอน + ในแถบเครื่องมือ (IconNewItem1) ช่วยให้ผู้ใช้สามารถเพิ่มส่วนใหม่ คุณสมบัติ OnSelect สำหรับไอคอนนี้ อ้างอิงถึงหน้าจอ EditScreen1

    ไอคอนรายการใหม่ที่แสดงข้อผิดพลาด

  9. เลือก IconNewItem1 แล้วจากนั้น เลือก ลบ เหมือนที่ทำก่อนหน้านี้ ข้อความในส่วนหัวสำหรับหน้าจอจะหายไป และข้อความแสดงข้อผิดพลาดจะปรากฏขึ้น และด้วยเหตุผลเดียวกัน

  10. บนบานหน้าต่าง มุมมองทรี ภายใต้ BrowseScreen1 เลือก LblAppName1 แก้ไขนิพจน์สำหรับคุณสมบัติ ความกว้าง โดยลบการอ้างอิงถึง IconNewItem1.Width นิพจน์ใหม่ควรเป็น Parent.Width - Self.X - IconSortUpDown1.Width - IconRefresh1.Width

    เปลี่ยนความกว้างของป้ายชื่อ

  11. ยังคงมีปัญหาเกี่ยวกับส่วนหัว แม้ว่าข้อความ เรียกดูชิ้นส่วน ได้ปรากฏขึ้นอีกครั้ง มีข้อผิดพลาดปรากฏขึ้น และไอคอนรีเฟรชและไอคอนจัดเรียงอยู่ในตำแหน่งที่ไม่ถูกต้อง บนบานหน้าต่าง มุมมองทรี เลือก IconSortUpDown1 ค้นหาคุณสมบัติ X สำหรับการควบคุมนี้ คุณสมบัตินี้กำหนดตำแหน่งแนวนอนของไอคอนในส่วนหัว ขณะนี้มีการคำนวณตามความกว้างของตัวควบคุม IconNewItem1

    ข้อผิดพลาดไอคอนเรียงลำดับ

  12. เปลี่ยนนิพจน์สำหรับคุณสมบัติ X เป็น Parent.Width - Self.Width

  13. บนบานหน้าต่าง มุมมองทรี เลือก IconRefresh1 เปลี่ยนนิพจน์สำหรับคุณสมบัติ X เป็น Parent.Width - IconSortUpDown1.Width - Self.Width ข้อผิดพลาดทั้งหมดควรหายไป

บันทึกและทดสอบแอป

ขณะนี้คุณสามารถบันทึกและทดสอบแอปได้

  1. เลือก ไฟล์>บันทึกเป็น

  2. ภายใต้ บันทึกเป็น เลือก ระบบคลาวด์ที่ ป้อนชื่อ VanArsdelApp แล้วจากนั้น เลือก บันทึก

    บันทึกแอป

  3. เลือกลูกศรย้อนกลับเพื่อกลับไปยังหน้าจอ หน้าแรก

    ย้อนกลับไปที่หน้าจอหลัก

  4. เลือก F5 เพื่อดูตัวอย่างแอป บนหน้า เรียกดูส่วน เลือกวงเล็บด้านขวา (>) ทางด้านขวาของส่วนใดๆ หน้าจอ รายละเอียด สำหรับชิ้นส่วนจะปรากฏขึ้น

    การเรียกใช้แอปครั้งแรก

  5. เลือกวงเล็บด้านซ้าย (<) ในส่วนหัวของหน้าจอ รายละเอียด เพื่อกลับไปที่หน้าจอ เรียกดู

  6. บนหน้าจอ เรียกดูชิ้นส่วน ให้ป้อนข้อความในกล่อง ค้นหา ในขณะที่คุณพิมพ์ รายการจะถูกกรองเพื่อแสดงเฉพาะรายการที่มีข้อความที่ตรงกันในฟิลด์ ชื่อCategoryID หรือ ภาพรวม

    ค้นหาบนหน้าจอเรียกดูชิ้นส่วน

  7. ปิดหน้าต่างแสดงตัวอย่างและกลับไปที่ Power Apps Studio

รายการที่ 2: ฐานข้อมูลองค์ความรู้ภาคสนาม

สำหรับการเข้าถึงฐานข้อมูลองค์ความรู้ Maria และ Caleb (ช่างเทคนิค) พิจารณาส่วนติดต่ออย่างง่ายที่ผู้ใช้ป้อนคำที่ใช้ค้นหา และแอปจะแสดงบทความฐานข้อมูลองค์ความรู้ทั้งหมดที่กล่าวถึงคำนั้น Maria รู้ว่ากระบวนการนี้จะเกี่ยวข้องกับ Azure Cognitive Search แต่ไม่จำเป็นต้องใช้หรือแม้กระทั่งต้องการเพื่อทำความเข้าใจวิธีการทำงาน ดังนั้น Maria จึงตัดสินใจเพียงแค่ให้ส่วนติดต่อผู้ใช้พื้นฐานและทำงานร่วมกับ Kiana ในภายหลัง เพื่อเพิ่มฟังก์ชันการทำงานจริง

Maria ตัดสินใจสร้างหน้าจอใหม่โดยใช้เทมเพลต รายการ ที่มีอยู่ใน Power Apps Studio

  1. บนแถบเครื่องมือหน้าจอ Power Apps Studio หน้าแรก เลือก หน้าจอใหม่ แล้วจากนั้น เลือก รายการ

    เทมเพลตรายการ

  2. ในส่วนหัวของหน้าจอ ให้เลือกป้ายชื่อที่แสดงข้อความ [ชื่อเรื่อง] เปลี่ยนคุณสมบัติ Text เป็น "Query" (รวมเครื่องหมายคำพูด)

    แก้ไขข้อความส่วนหัวของหน้าจอแบบสอบถาม

  3. ในส่วนหัวของหน้าจอ เลือกเครื่องหมายบวก (+) จากนั้น เลือก ลบ ไอคอน + มีไว้เพื่อให้ผู้ใช้สามารถเพิ่มรายการอื่นๆ ในรายการ ฐานข้อมูลองค์ความรู้เป็นแบบสืบค้นเท่านั้น ดังนั้นจึงไม่จำเป็นต้องใช้คุณลักษณะนี้

    ลบไอคอน +

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

  4. บนบานหน้าต่าง มุมมองทรี เลื่อนลงไปที่ส่วน Screen1 และเลือก LblAppName3 เปลี่ยนคุณสมบัติ ความกว้าง ของสูตร Parent.Width - LblAppName3.X - IconSortUpDown2.Width - IconRefresh2.Width

    แก้ไขความกว้างส่วนหัวของหน้าจอแบบสอบถาม

  5. บนบานหน้าต่าง มุมมองทรี เลือก IconSortUpDown2 แก้ไขคุณสมบัติ X ของสูตร Parent.Width - IconSortUpDown2.Width

  6. บนบานหน้าต่าง มุมมองทรี เลือก IconRefresh2 แก้ไขคุณสมบัติ X เป็น Parent.Width - IconSortUpDown2.Width - IconRefresh2.Width สิ่งนี้ควรแก้ไขข้อผิดพลาดทั้งหมดที่เกิดขึ้นกับหน้าจอ

  7. เลือก ไฟล์>บันทึก

  8. ในกล่อง บันทึกย่อของเวอร์ชัน ให้ป้อนข้อความ เพิ่ม UI ฐานความรู้แล้ว แล้วจากนั้น เลือก บันทึก

  9. กลับไปที่หน้าจอ หน้าแรก และเลือก F5 เพื่อพรีวิวหน้าจอใหม่ ซึ่งควรมีลักษณะดังภาพต่อไปนี้

    หน้าจอการสอบถามกำลังทำงานอยู่

    โปรดทราบว่าหากคุณเลือกไอคอน > ถัดจากรายการจำลองใดๆ ฟังก์ชันการทำงานของรายละเอียดจะไม่ทำงานในขณะนี้ คุณจะแก้ไขปัญหานี้ในภายหลัง เมื่อคุณรวม Azure Cognitive Search เข้ากับแอป

  10. ปิดหน้าต่างแสดงตัวอย่างและกลับไปที่ Power Apps Studio

รายการที่ 3: การจัดกำหนดการภาคสนามและบันทึกย่อ

Maria ทำงานร่วมกับ Malik ซึ่งเป็นพนักงานต้อนรับของสำนักงาน เพื่อออกแบบส่วนติดต่อสำหรับการจัดกำหนดการภาคสนามและส่วนการนัดหมายของแอป Malik ให้สมุดงาน Excel พร้อมข้อมูลตัวอย่างที่ Maria สามารถใช้เพื่อสร้างหน้าจอการนัดหมายได้ สมุดงานประกอบด้วยตารางที่มีคอลัมน์ต่อไปนี้:

  • รหัส (รหัสการนัดหมาย)
  • รหัสลูกค้า (รหัสเฉพาะสำหรับลูกค้า)
  • ชื่อลูกค้า
  • ที่อยู่ลูกค้า
  • รายละเอียดปัญหา (Description ข้อความของปัญหาที่ลูกค้ากำลังประสบ)
  • หมายเลขของผู้ติดต่อ
  • สถานะ
  • วันที่ของการนัดหมาย
  • เวลานัดหมาย
  • หมายเหตุ (Description ข้อความพร้อมบันทึกย่อใดๆ ที่เพิ่มโดยวิศวกร)
  • รูปภาพ (รูปถ่ายของอุปกรณ์ ไม่ว่าจะอยู่ในสภาพใช้งานได้หลังการซ่อมแซม หรือเป็นภาพเสริมสำหรับบันทึกย่อของวิศวกร)

สมุดงานการนัดหมาย

หมายเหตุ

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

Maria เก็บไฟล์นี้ไว้ในบัญชี OneDrive ที่มีชื่อว่า Appointments.xlsx Maria จำได้ว่าก่อนหน้านี้เธอใช้ชื่อเริ่มต้นสำหรับตารางในสมุดงาน และต้องเปลี่ยนชื่อเรื่องในหน้าจอต่างๆ ที่สร้างขึ้น เธอจึงเปลี่ยนชื่อตารางในสมุดงานเป็น การนัดหมาย

หมายเหตุ

สมุดงานนี้พร้อมใช้งานในโฟลเดอร์ สินทรัพย์ ของที่เก็บ Git สำหรับคำแนะนำนี้

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

Maria ตัดสินใจสร้างหน้าจอการนัดหมายในตอนแรกเป็นแอปที่แยกต่างหาก วิธีนี้ Maria สามารถใช้ Power Apps Studio เพื่อสร้างแอปจำนวนมากได้โดยอัตโนมัติ Power Apps Studio ปัจจุบันไม่อนุญาตให้คุณสร้างหน้าจอเพิ่มเติมจากการเชื่อมต่อข้อมูลในแอปที่มีอยู่ หลังจากสร้างและทดสอบหน้าจอแล้ว Maria จะคัดลอกหน้าจอไปยังสินค้าคงคลังภาคสนามและแอปฐานข้อมูลองค์ความรู้

หมายเหตุ

อีกทางเลือกหนึ่งคือ การเพิ่มตาราง การนัดหมาย ในไฟล์ Excel เป็นแหล่งข้อมูลที่สองไปยังแอปที่มีอยู่ และจากนั้น สร้างหน้าจอสำหรับการนัดหมายด้วยมือ Maria เลือกที่จะสร้างหน้าจอใหม่จากสมุดงานและคัดลอกหน้าจอ ปัจจุบัน Maria คุ้นเคยกับแนวคิดของการคัดลอกและวางมากกว่าการสร้างหน้าจอด้วยตนเอง และจะค่อยๆ เรียนรู้วิธีสร้างหน้าจอตั้งแต่เริ่มต้น เมื่อกระบวนการสร้างแอปนี้ดำเนินไป

เพื่อสร้างแอปการนัดหมาย

  1. ในแถบเมนู Power Apps Studio เลือก ไฟล์

    เมนูไฟล์

  2. บนบานหน้าต่างด้านซ้าย เลือก ใหม่ ในบานหน้าต่างหลัก เลือกกล่อง OneDrive for Business - โครงร่างโทรศัพท์

    สร้างแอปใหม่

  3. บนบานหน้าต่าง การเชื่อมต่อ เลือก Appointments.xlsx

    แอปใหม่จากสมุดงานการนัดหมาย

  4. ในไฟล์ Excel ให้เลือกตาราง การนัดหมาย แล้วจากนั้น เลือก เชื่อมต่อ

    เลือกตารางการนัดหมาย

  5. รอขณะที่มีการสร้างแอป เมื่อแอปใหม่ปรากฏขึ้น แอปจะมีหน้าจอ เรียกดู, หน้าจอ รายละเอียด และหน้าจอ แก้ไข โดยใช้ธีมเริ่มต้น

    แอปการนัดหมายที่สร้างขึ้น

  6. บนบานหน้าต่าง มุมมองทรี ในส่วน BrowseScreen1 ภายใต้ BrowseGallery1 เลือก Image1 แล้วจากนั้น เลือก ลบ หน้าจอ เรียกดู ควรแสดงการนัดหมายของรายการเท่านั้น ไม่ใช่ภาพใดๆ ที่เกี่ยวข้อง

    ลบตัวควบคุมรูปภาพ

    สังเกตว่าการลบตัวควบคุม Image1 ทำให้เกิดข้อผิดพลาดหลายอย่างบนหน้าจอ เนื่องจากทั้งความกว้างและตำแหน่งของตัวควบคุม Title1 อ้างอิงตัวควบคุม ภาพ คุณจะแก้ไขปัญหาเหล่านี้ได้ในขั้นตอนต่อไปนี้

  7. บนบานหน้าต่าง มุมมองทรี ภายใต้ BrowseGallery1 เลือก Title1 เปลี่ยนค่าในคุณสมบัติ X เป็น 16 เปลี่ยนสูตรในคุณสมบัติ ความกว้าง เป็น Parent.TemplateWidth - 104 สิ่งนี้ควรแก้ไขข้อผิดพลาดสำหรับหน้าจอ

  8. บนบานหน้าต่าง มุมมองทรี ภายใต้ BrowseGallery1 เลือก Body1 ขณะนี้การควบคุมนี้แสดงรายละเอียดโทรศัพท์ของผู้ติดต่อสำหรับลูกค้า เปลี่ยนค่าในคุณสมบัติ Text เป็น ThisItem.'Customer Name' (รวมเครื่องหมายอัญประกาศเดี่ยว)

    เปลี่ยนตัวควบคุม Body1 เป็นชื่อลูกค้า

    รายละเอียดเกี่ยวกับชื่อหน้าจอ เรียกดู จะแสดงชื่อลูกค้าในขณะนี้

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

    SortByColumns(Search([@Appointments], TextSearchBox1.Text, "Appointment_x0020_Date","Appointment_x0020_Time","Customer_x0020_Name"), "Appointment_x0020_Date", If(SortDescending1, Descending, Ascending)).
    

    สังเกตว่าการนัดหมายจะเรียงลำดับตามวันที่ และจากนั้นเวลา (แสดงสองฟิลด์แรก)

  10. บนบานหน้าต่าง มุมมองทรี ลบ IconNewItem1 เฉพาะพนักงานในสถานที่เท่านั้นที่สามารถจองการนัดหมายใหม่สำหรับวิศวกรและช่างเทคนิคได้ โปรดสังเกตว่าการดำเนินการนี้ทำให้เกิดข้อผิดพลาดในฟอร์ม เนื่องจากความกว้างและตำแหน่งของตัวควบคุมอื่นๆ ในส่วนหัวอ้างอิงไอคอนที่คุณเพิ่งลบออก

  11. บนบานหน้าต่าง มุมมองทรี เลือก LblAppName1 เปลี่ยนสูตรสำหรับคุณสมบัติ ความกว้าง เป็น Parent.Width - Self.X - IconSortUpDown1.Width - IconRefresh1.Width

  12. บนบานหน้าต่าง มุมมองทรี เลือก IconRefresh1 เปลี่ยนค่าสำหรับคุณสมบัติ X เป็น Parent.Width - IconSortUpDown1.Width - Self.Width

  13. บนบานหน้าต่าง มุมมองทรี เลือก iconSortUpDown1 เปลี่ยนค่าสำหรับคุณสมบัติ X เป็น Parent.Width - Self.Width

  14. บนบานหน้าต่าง มุมมองทรี เลือก BrowseScreen1 และจากนั้น เลือกปุ่มจุดไข่ปลา (...) ในเมนูแบบหล่นลงที่ปรากฏขึ้น ให้เลือก เปลี่ยนชื่อ และเปลี่ยนชื่อของหน้าจอเป็น BrowseAppointments

    เปลี่ยนชื่อหน้าจอเรียกดู

  15. โดยใช้เทคนิคเดียวกัน ให้เปลี่ยนชื่อตัวควบคุม BrowseGallery1 เป็น BrowseAppointmentsGallery

นั่นทำให้หน้าจอ เรียกดู เสร็จสมบูรณ์

เพื่อสร้างหน้าจอรายละเอียด

ตอนนี้คุณสามารถหันมาสนใจหน้าจอ รายละเอียด ในขณะนี้

  1. บนบานหน้าต่าง มุมมองทรี เลื่อนลงไปที่ส่วน DetailsScreen1 คุณจะเห็นได้ว่ารายละเอียดต่างๆ จะแสดงตามลำดับตัวอักษรตามชื่อฟิลด์ และข้อมูลที่เป็นประโยชน์บางส่วนเช่น ฟิลด์ บันทึกย่อ จะไม่แสดงเลย

    เค้าโครงของหน้าจอรายละเอียดการนัดหมาย

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

    • วันที่ของการนัดหมาย
    • เวลานัดหมาย
    • รหัสลูกค้า
    • ID
  3. เลือก + เพิ่มฟิลด์ และเพิ่มฟิลด์ต่อไปนี้:

    • บันทึกย่อ
    • รายละเอียดปัญหา
    • สถานะ

    เพิ่มฟิลด์ในหน้าจอรายละเอียด

  4. ลากฟิลด์แต่ละฟิลด์เพื่อให้แสดงตามลำดับต่อไปนี้ จากบนลงล่าง:

    • ชื่อลูกค้า
    • ที่อยู่ลูกค้า
    • หมายเลขของผู้ติดต่อ
    • รายละเอียดปัญหา
    • Status
    • บันทึกย่อ
    • Image
  5. บนบานหน้าต่าง มุมมองทรี เลือก Notes_DataCard1 เปลี่ยนคุณสมบัติ ความสูง เป็น 320

    ปรับเปลี่ยนขนาดของฟิลด์บันทึกย่อ

  6. บนบานหน้าต่าง มุมมองทรี ลบ IconDelete1 วิศวกรไม่ควรสามารถลบการนัดหมายออกจากระบบได้

  7. เลือก LblAppName2 และเปลี่ยนคุณสมบัติ ความกว้าง เป็น Parent.Width - Self.X - IconEdit1.Width

  8. โดยใช้เทคนิคที่อธิบายไว้ก่อนหน้านี้ เปลี่ยนชื่อของ DetailsScreen1 เป็น AppointmentDetails

เพื่อแก้ไขหน้าจอแก้ไข

หน้าจอสุดท้ายที่จะดูในตอนนี้คือ หน้าจอ แก้ไข

  1. บนบานหน้าต่าง มุมมองทรี เลือก EditScreen1

  2. บนบานหน้าต่าง มุมมองทรี ในส่วน EditScreen1 เลือก EditForm1 ในบานหน้าต่างด้านขวา บนแท็บ คุณสมบัติ ให้เลือก แก้ไขฟิลด์ ที่ถัดจาก ฟิลด์

  3. ลบฟิลด์ต่อไปนี้:

    • ที่อยู่ลูกค้า
    • ID
    • รหัสลูกค้า
    • วันที่ของการนัดหมาย
    • เวลานัดหมาย
  4. เพิ่มฟิลด์ต่อไปนี้:

    • รายละเอียดปัญหา
    • สถานะ
    • บันทึกย่อ
  5. ลากฟิลด์แต่ละฟิลด์เพื่อให้แสดงตามลำดับต่อไปนี้ จากบนลงล่าง:

    • ชื่อผู้ติดต่อ
    • หมายเลขลูกค้า
    • รายละเอียดปัญหา
    • สถานะ
    • บันทึกย่อ
    • Image
  6. เลือกฟิลด์ ชื่อลูกค้า และขยายเพื่อดูคุณสมบัติ เปลี่ยน ชนิดการควบคุม เป็น ดูข้อความ การเปลี่ยนแปลงนี้ทำให้ตัวควบคุมเป็นแบบอ่านอย่างเดียว มีประโยชน์ที่จะดูชื่อของลูกค้าในหน้าจอ แก้ไข แต่วิศวกรไม่ควรสามารถเปลี่ยนได้

    กำหนดให้ชื่อลูกค้าเป็นแบบอ่านอย่างเดียว

  7. เลือกฟิลด์ หมายเลขของผู้ติดต่อ และขยายเพื่อดูคุณสมบัติ เปลี่ยน ชนิดการควบคุม เป็น ดูข้อความ ฟิลด์นี้ควรเป็นแบบอ่านอย่างเดียวด้วยเช่นกัน

  8. เลือกฟิลด์ บันทึกย่อ ขยายและเปลี่ยน ชนิดการควบคุม เป็น แก้ไขข้อความหลายบรรทัด การตั้งค่านี้ช่วยให้วิศวกรสามารถเพิ่มบันทึกย่อโดยละเอียดที่สามารถขยายได้หลายบรรทัด

  9. เลือกฟิลด์ สถานะ ขยายและเปลี่ยน ชนิดการควบคุม เป็น ค่าที่อนุญาต

  10. บนบานหน้าต่าง มุมมองทรี เลือก Status_DataCard5 ในบานหน้าต่างด้านขวา บนแท็บ คุณสมบัติ ให้เลือก ปลดล็อกเพื่อเปลี่ยนคุณสมบัติ เลื่อนลงไปที่คุณสมบัติ AllowedValues และเปลี่ยนข้อความเป็น ["คงที่", "สั่งชิ้นส่วนแล้ว", "ยังไม่ได้แก้ไข"] (รวมวงเล็บสี่เหลี่ยม) วิศวกรภาคสนามสามารถตั้งค่า สถานะ เป็นค่าใดค่าหนึ่งที่กำหนดไว้เหล่านี้เท่านั้น

    ตั้งค่าสถานะที่อนุญาต

  11. บนบานหน้าต่าง มุมมองทรี เปลี่ยนชื่อ EditScreen1 เป็น EditAppointment

ขณะนี้คุณสามารถบันทึกและทดสอบแอปได้

  1. เลือก ไฟล์>บันทึกเป็น

  2. ภายใต้ บันทึกเป็น เลือก ระบบคลาวด์ที่ ป้อนชื่อ VanArsdelAppointments แล้วจากนั้น เลือก บันทึก

  3. เลือกลูกศรย้อนกลับในแถบเครื่องมือ Power Apps Studio เพื่อกลับไปยังหน้าจอ หน้าแรก

  4. เลือก F5 เพื่อดูตัวอย่างแอป บนหน้า การนัดหมาย ให้เลือกไอคอน > ถัดจากการนัดหมายใดๆ หน้าจอ รายละเอียด สำหรับการนัดหมายควรปรากฏขึ้น ในส่วนหัว ให้เลือก แก้ไข เพื่ออัปเดตการนัดหมาย ตรวจสอบรายละเอียดต่อไปนี้

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

    หมายเหตุ

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

    แอปการนัดหมายที่กำลังทำงาน

การรวมหน้าจอไว้ในแอปเดียว

Maria ได้สร้างแอปสองแอปขึ้นมา แต่เธอต้องการรวมแอปเหล่านี้ไว้ในแอปเดียว ในการทำเช่นนี้ Maria ได้คัดลอกหน้าจอสำหรับแอปการนัดหมายลงในการจัดการสินค้าคงคลังภาคสนามและแอปฐานข้อมูลองค์ความรู้ ดังต่อไปนี้:

  1. เปิดหน้าต่างเบราว์เซอร์ใหม่และลงชื่อเข้าใช้ Power Apps Studio ด้วยรายละเอียดบัญชีของคุณ

  2. ในบานหน้าต่างด้านซ้าย เลือก แอป เลือก VanArdselApp แล้วจากนั้น เลือก แก้ไข

    เปิดแอป VanArsdel

  3. ในแถบเครื่องมือ เลือก หน้าจอใหม่ และจากนั้น เลือก ว่างเปล่า การดำเนินการนี้จะเพิ่มหน้าจอใหม่ให้กับแอปซึ่งคุณจะคัดลอกการควบคุมสำหรับหน้าจอ เรียกดู สำหรับแอป VanArsdelAppointments

    เพิ่มหน้าจอว่างเปล่า

  4. หน้าจอใหม่จะถูกตั้งชื่อว่า Screen2 บนบานหน้าต่าง มุมมองทรี เปลี่ยนชื่อเป็น BrowseAppointments

  5. ทำซ้ำขั้นตอนก่อนหน้าอีกสองครั้ง เพื่อเพิ่มหน้าจอว่างเปล่าอีกสองหน้าจอ (Screen3 และ Screen4)

  6. เปลี่ยนชื่อ Screen3 เป็น AppointmentDetails และเปลี่ยนชื่อ Screen4 เป็น EditAppointment

  7. บนแถบเครื่องมือด้านซ้ายของ Power Apps Studio เลือกไอคอน ข้อมูล บนบานหน้าต่าง ข้อมูล เลือก เพิ่มข้อมูล ในรายการแบบหล่นลง เลือกแหล่งข้อมูล ในฟิลด์ ค้นหา ป้อน OneDrive แล้วจากนั้น เลือก OneDrive for Business

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

  8. เลือกไฟล์ Excel Appointments.xlsx เลือกตาราง การนัดหมาย แล้วจากนั้น เลือก เชื่อมต่อ

  9. สลับไปที่หน้าต่างเบราว์เซอร์ที่แสดงแอป VanArsdelAppointments

  10. บนแถบเครื่องมือ เลือก ธีม (คุณอาจต้องขยายแถบเครื่องมือเพื่อแสดงรายการเพิ่มเติม) และจากนั้น เลือกธีม ป่าไม้ นี่เป็นธีมเดียวกับที่ใช้โดยแอป VanArsdel

  11. บนแถบเครื่องมือด้านซ้าย เลือกไอคอน มุมมองทรี เลือกหน้าจอ BrowseAppointments แล้วจากนั้น เลือก Ctrl+A การดำเนินการนี้จะเลือกตัวควบคุมทั้งหมดในหน้าจอ

  12. เลือก Ctrl+C เพื่อคัดลอกตัวควบคุมเหล่านี้ไปยังคลิปบอร์ด

  13. กลับไปที่หน้าต่างเบราว์เซอร์ที่แสดงแอป VanArsdelApp

  14. บนแถบเครื่องมือด้านซ้าย เลือกไอคอน มุมมองทรี และจากนั้น เลือกหน้าจอ BrowseAppointments

  15. เลือก Ctrl+V เพื่อวางตัวควบคุมบนหน้าจอ

    หมายเหตุ

    บางครั้งส่วนหัวของหน้าจอจะปรากฏต่ำเกินไปเล็กน้อย ในการแก้ไขปัญหานี้ ให้เลือกตัวควบคุม IconSortUpDOwn1_1, IconRefresh1_1, LblAppName1_1 และ RectQuickActionBar1_1 บนบานหน้าต่าง มุมมองทรี (กด Shift ค้างไว้ขณะที่คลิกเพื่อเลือกมากกว่าหนึ่งตัวควบคุมในแต่ละครั้ง) จากนั้น ใช้เมาส์หรือแป้นลูกศรเพื่อเลื่อนขึ้นในบานหน้าต่างมุมมองการออกแบบ

  16. กลับไปที่หน้าต่างเบราว์เซอร์ที่แสดงแอป VanArsdelAppointments และจากนั้น เลือกและคัดลอกตัวควบคุมในหน้าจอ AppointmentDetails ไปยังคลิปบอร์ด (Ctrl+A ตามด้วย Ctrl+C)

  17. กลับไปที่หน้าต่างเบราว์เซอร์ที่แสดงแอป VanArsdelApp เลือกหน้าจอ AppointmentDetails และจากนั้น วางตัวควบคุม (Ctrl+V) ปรับตำแหน่งของตัวควบคุมในส่วนหัวของหน้าจอ หากจำเป็น

    หมายเหตุ

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

  18. สลับกลับไปที่หน้าต่างเบราว์เซอร์ที่แสดงแอป VanArsdelAppointments และจากนั้น เลือกและคัดลอกตัวควบคุมในหน้าจอ EditAppointment ไปยังคลิปบอร์ด

  19. กลับไปที่หน้าต่างเบราว์เซอร์ที่แสดงแอป VanArsdelApp เลือกหน้าจอ EditAppointment และจากนั้น วางตัวควบคุม อีกครั้ง ให้ย้ายตัวควบคุมในส่วนหัวของหน้าจอ หากจำเป็น

  20. บนบานหน้าต่าง มุมมองทรี เลือกหน้าจอ AppointmentDetails และตรวจสอบว่าข้อผิดพลาดที่ระบุก่อนหน้านี้หายไปแล้วในขณะนี้

  21. บนบานหน้าต่าง มุมมองทรี เลือกหน้าจอ BrowseScreen1 เปลี่ยนชื่อหน้าจอนี้เป็น BrowseParts

  22. เปลี่ยนชื่อหน้าจอ DetailsScreen1 เป็น PartDetails

  23. เปลี่ยนชื่อหน้าจอ Screen1 เป็น Knowledgebase

    หมายเหตุ

    ซึ่งเป็นแนวทางปฏิบัติที่ดีในการเปลี่ยนชื่อหน้าจอเพื่อให้แสดงถึงฟังก์ชัน แทนที่จะใช้ชื่อเริ่มต้นที่สร้างขึ้นโดย Power Apps Studio โดยเฉพาะอย่างยิ่ง หากแอปมีหลายหน้าจอ วิธีนี้สามารถช่วยหลีกเลี่ยงความสับสนในภายหลัง หากนักพัฒนารายอื่นแก้ไขแอป

การเพิ่มหน้าจอหลักลงในแอป

ขั้นตอนสุดท้ายคือ การเพิ่มหน้าจอ หน้าแรก ไปยังแอป หน้าจอ หน้าแรก จะช่วยให้วิศวกรสามารถย้ายไปมาระหว่างส่วนต่างๆ ของแอปได้ (การจัดการสินค้าคงคลัง ฐานข้อมูลองค์ความรู้ และการนัดหมาย)

  1. ในแอป VanArsdelApp บนแถบเครื่องมือ เลือก หน้าจอใหม่ แล้วจากนั้น เลือก ว่างเปล่า

  2. บนบานหน้าต่าง มุมมองทรี เปลี่ยนชื่อ Screen2 เป็น หน้าแรก

  3. บนแถบการดำเนินการ เลือก แทรก ในรายการตัวควบคุม ขยาย สื่อ แล้วจากนั้น เลือก ภาพ ตัวควบคุมจะถูกเพิ่มลงในหน้าจอ

    เพิ่มตัวควบคุมรูปภาพลงในหน้าจอหลัก

  4. ตั้งค่าตำแหน่ง X ของตัวควบคุมเป็น 16 และตำแหน่ง Y เป็น 22 เปลี่ยน ความกว้าง เป็น 605 และ ความสูง เป็น 127 เปลี่ยน ตำแหน่งภาพ เป็น เติม

    กำหนดขนาดและตำแหน่งภาพ

  5. ในขณะที่ยังอยู่บนแท็บ คุณสมบัติ ในรายการแบบหล่นลง ภาพ เลือก + เพิ่มไฟล์รูปภาพ แล้วจากนั้น อัปโหลดภาพ VanArsdelLogo.png ไปยังตัวควบคุม

    หมายเหตุ

    ไฟล์ภาพพร้อมใช้งานในโฟลเดอร์ สินทรัพย์ ในที่เก็บ Git สำหรับคำแนะนำนี้

    เพิ่มโลโก้ไปยังรูปภาพ

  6. จากรายการของตัวควบคุม ให้เพิ่มตัวควบคุม ป้ายข้อความ สี่รายการไปยังฟอร์มและจัดตำแหน่งเพื่อให้ซ้อนกันภายใต้โลโก้ VanArsdel

    เพิ่มตัวควบคุมป้ายข้อความ

  7. เลือกตัวควบคุม ป้ายข้อความ ด้านบนสุด ในบานหน้าต่างด้านขวา บนแท็บ คุณสมบัติ ตั้งค่าคุณสมบัติ Text เป็น Next Appointment ตั้งค่า ขนาดตัวอักษร เป็น 30 และใช้ตัวเลือกสีเพื่อตั้งค่าสีแบบอักษรเป็นสีเขียว (เพื่อให้ตรงกับโลโก้)

    ตั้งค่าสีแบบอักษร

  8. เลือกตัวควบคุม ป้ายข้อความ ที่สอง เปลี่ยนค่าของคุณสมบัติ Text เป็น First(Appointments).'ชื่อลูกค้า' (รวมเครื่องหมายอัญประกาศ) สูตรนี้ดึงชื่อลูกค้าจากแถวแรกในตารางการนัดหมาย

    แสดงชื่อของลูกค้า

    หมายเหตุ

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

  9. เลือกตัวควบคุม ป้ายชื่อข้อความที่สาม และตั้งค่าคุณสมบัติ Text เป็น First(Appointments).'วันที่นัดหมาย'

  10. ตั้งค่าคุณสมบัติ Text ของตัวควบคุมป้ายชื่อที่สี่เป็น First(Appointments).'เวลานัดหมาย' ตั้งค่าคุณสมบัติ Font size เป็น 30

  11. จากรายการของตัวควบคุม ให้เพิ่มตัวควบคุม สี่เหลี่ยมผืนผ้า ตั้งค่าคุณสมบัติต่อไปนี้สำหรับการควบคุมนี้:

    • โหมดการแสดงผล: มุมมอง
    • X: 0
    • Y: 632
    • ความกว้าง: 635
    • ความสูง: 1

    ตัวควบคุมนี้ทำหน้าที่เป็นตัวคั่นภาพตรงกลางหน้าจอ

  12. เพิ่มตัวควบคุม ปุ่ม สามรายการไปยังหน้าจอ จัดเรียงในแนวตั้งและเว้นระยะห่างเท่าๆ กันด้านล่างตัวคั่น ตั้งค่าคุณสมบัติ Text สำหรับปุ่มบนสุดเป็น การนัดหมาย คุณสมบัติ Text สำหรับปุ่มกลางเป็น ชิ้นส่วน และคุณสมบัติ Text สำหรับปุ่มล่างเป็น Knowledgebase

    ปุ่มหน้าจอหลัก

  13. เลือกปุ่ม การนัดหมาย เปลี่ยนนิพจน์ในการดำเนินการ OnSelect เป็นสูตร Navigate(BrowseAppointments, ScreenTransition.Fade) การดำเนินการนี้จะสลับการแสดงผลไปที่หน้าจอการนัดหมาย เมื่อผู้ใช้เลือกปุ่ม

    ปุ่มการนัดหมาย

  14. ตั้งค่าการดำเนินการ OnSelect สำหรับปุ่ม ชิ้นส่วน เป็น Navigate(BrowseParts, ScreenTransition.Fade)

  15. ตั้งค่าการดำเนินการ OnSelect สำหรับปุ่ม Knowledgebase เป็น Navigate(Knowledgebase, ScreenTransition.Fade)

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

  1. บนบานหน้าต่าง มุมมองทรี เลือกหน้าจอ BrowseParts

  2. เลือกตัวควบคุม RectQuickActionBar1 เพื่อให้ได้รับการโฟกัส

  3. เลือกเมนู แทรก และเลือก เพิ่มไอคอน ย้ายไอคอนไปทางซ้ายของตัวควบคุม RectQuickActionBar1 โปรดทราบว่าไอคอนจะบดบังบางส่วนของป้ายชื่อ เรียกดูชิ้นส่วน

    เพิ่มไอคอน

  4. บนเมนู มุมมองต้นไม้ เปลี่ยนชื่อของตัวควบคุมไอคอนใหม่เป็น IconReturn1

  5. เปลี่ยนสูตรสำหรับการดำเนินการ OnSelect เป็นนิพจน์ Back(ScreenTransition.Fade) ฟังก์ชัน กลับ นำทางผู้ใช้ไปยังหน้าจอก่อนหน้าที่พวกเขาเยี่ยมชม

  6. บนแท็บ คุณสมบัติ เปลี่ยนคุณสมบัติไอคอนเป็น < ซ้าย

  7. ในส่วนหัวของหน้าจอ ให้เลือกป้ายชื่อ เรียกดูชิ้นส่วน เปลี่ยนคุณสมบัติ X เป็น IconReturn1.Width + 20. ป้ายชื่อ เรียกดูส่วน ไม่ควรถูกบดบังบางส่วนอีกต่อไป

    ย้ายป้ายชื่อเรียกดูชิ้นส่วน

  8. โดยทำตามกระบวนการที่อธิบายไว้ในขั้นตอนที่ 16 ถึง 22 เพิ่มไอคอนที่ชื่อว่า IconReturn2 ไปที่ตัวควบคุม RectQuickActionBar3 ในหน้าจอ Knowledgebase

  9. ในทำนองเดียวกัน ให้เพิ่มไอคอนที่ชื่อว่า IconReturn3 ไปยังตัวควบคุม RectQuickActionBar1_1 ในหน้าจอ BrowseAppointments

  10. บนบานหน้าต่าง มุมมองทรี เลือกวัตถุ แอป เปลี่ยนคุณสมบัติ StartScreen เป็นนิพจน์ โฮมเพจ นี่ช่วยให้มั่นใจได้ว่าหน้าจอ หน้าแรก จะปรากฏขึ้นทุกครั้งที่แอปเริ่มทำงาน:

    ตั้งค่าสูตร App OnStart

    หมายเหตุ

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

สุดท้าย คุณสามารถทดสอบแอปได้

  1. เลือก ไฟล์>บันทึก ในกล่อง บันทึกย่อของเวอร์ชัน ให้ป้อน เวอร์ชันที่สมบูรณ์พร้อมหน้าจอหลัก แล้วจากนั้น เลือก บันทึก

  2. เลือกลูกศรย้อนกลับเพื่อกลับไปที่หน้าจอ หน้าแรก แล้วจากนั้น เลือก F5 เพื่อเรียกใช้แอป

  3. ตรวจสอบว่าหน้าจอ หน้าแรก สำหรับแอปจะปรากฏขึ้น

  4. เลือก การนัดหมาย หน้าจอการนัดหมายควรปรากฏขึ้น

  5. เลือกลูกศรย้อนกลับเพื่อกลับไปยังหน้าจอ หน้าแรก

  6. เลือก ชิ้นส่วน เบราว์เซอร์ชิ้นส่วนควรปรากฏขึ้น

  7. เลือกลูกศรย้อนกลับเพื่อกลับไปยังหน้าจอ หน้าแรก

  8. เลือก Knowledgebase หน้าจอแบบสอบถามฐานข้อมูลองค์ความรู้ควรปรากฏขึ้น

  9. เลือกลูกศรย้อนกลับเพื่อกลับไปยังหน้าจอ หน้าแรก

  10. ปิดหน้าต่างแสดงตัวอย่างและกลับไปที่ Power Apps Studio

ขณะนี้ แอปต้นแบบเสร็จสมบูรณ์แล้ว