แบบฝึกหัด - ออกแบบหน้าและอีเมลเพิ่มเติมใน Power Apps

เสร็จสมบูรณ์เมื่อ

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

สร้างหน้าบันทึกย่อ

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

1. สร้างหน้าจอว่างใหม่สองหน้าจอ และเปลี่ยนชื่อ Product_notes และ Carpet_notes

   

2. ออกแบบหน้า Product_notes: เลือกดรอปดาวน์ อินพุต จากนั้นเลือก การป้อนข้อความ เปลี่ยนชื่อ TextInput_products

   

3. เลือก แกลเลอรี>แนวนอน เพื่อรวมแกลเลอรีชนิดแนวนอน คุณจะจัดเก็บรูปภาพที่ถ่ายในระหว่างเซสชั่น MR ใน แกลเลอรีนี้ เปลี่ยนชื่อ View_products แกลเลอรี

   

4. จัดตําแหน่งแกลเลอรีที่ส่วนอื่น ๆ ของหน้าจอ เก็บเฉพาะรูปภาพโดยการลบซับไตเติลและชื่อเรื่อง ขยายรูปภาพ

   

5. เลือกแกลเลอรีและกําหนดค่าคุณสมบัติ Items โดยการเพิ่มบรรทัดต่อไปนี้:

   ViewInMR1.Photos
   

   

   รูปภาพทั้งหมดที่ถ่ายใน เซสชัน View in MR จะถูกเก็บไว้ในแกลเลอรีนี้เพื่อการอ้างอิงในอนาคต

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

   

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

   

8. จัดตําแหน่งไอคอน ย้อนกลับ อย่างถูกต้องและกําหนดค่าคุณสมบัติ OnSelect โดยการเพิ่มรายการต่อไปนี้:

   Navigate(Product_details,ScreenTransition.Cover)
   

   

9. สลับไปยังหน้าจอ Product_details และเพิ่มไอคอน หมายเหตุ จากดรอปดาวน์ ไอคอน บนแท็บ แทรก

   

10. กําหนดค่าคุณสมบัติ OnSelect ของไอคอน หมายเหตุ โดยการเพิ่มบรรทัดต่อไปนี้:

    Navigate(Product_notes,ScreenTransition.CoverRight)
    

    

11. ทําซ้ําขั้นตอนเดียวกันสําหรับ Notes_carpets

    หมายเหตุ

    เราจะไม่รวมมุมมองในคุณลักษณะ MR สําหรับประเภทพรม สําหรับหน้า Notes_carpets ไม่รวมการเพิ่มตัวควบคุมแกลเลอรีเพื่อจัดเก็บรูปภาพที่ถ่ายในระหว่างเซสชัน View in MR

    เคล็ดลับ

    คุณสามารถทดสอบแอปพลิเคชันของคุณได้โดยการกดปุ่ม F5 บนแป้นพิมพ์หรือเลือกปุ่ม เล่น ที่มุมบนขวาของ Power Apps Studio

สร้างหน้าสรุปคําสั่งซื้อ

1. เพิ่มปุ่มไปยังหน้าจอ Product_details และ Carpet_details เปลี่ยนชื่อปุ่ม Order_product และ Order_carpet เปลี่ยนข้อความที่แสดงของปุ่มเป็นลําดับ

   

2. สร้างสองหน้าจอว่างใหม่ และเปลี่ยนชื่อ Order_products และ Order_carpets

   

3. เลือกหน้าจอ Product_details จากนั้นกําหนดค่าคุณสมบัติ OnSelect ของปุ่ม Order ดังนี้:

   Navigate('Order_products',ScreenTransition.Cover)
   

   

4. ทําตามขั้นตอนเดียวกันสําหรับหน้าจอ Carpet_details

5. ในหน้า Order_products ให้แทรกป้ายชื่อ ผลิตภัณฑ์ราคาสี และ บันทึกย่อ และเปลี่ยนชื่อให้สอดคล้องกัน

   

6. แทรกป้ายชื่อที่ว่างเปล่าถัดจาก ผลิตภัณฑ์, ราคา, สี และ บันทึกย่อ ดังที่แสดงในรูป

   

7. กําหนดค่าคุณสมบัติ Text ของป้ายชื่อที่ว่างเปล่าเหล่านี้ดังต่อไปนี้:

   • ผลิตภัณฑ์: ผลิตภัณฑ์

     Gallery_products.Selected.Name
     

     

   • ราคา: 99.8

     Gallery_products.Selected.Price
     

     

   • สี: 100-

     Gallery_products.Selected.Color
     

     

   • หมายเหตุ:

     TextInput_products.Text
     

     

8. เพิ่มป้ายชื่ออื่นที่ด้านบน และเปลี่ยนข้อความที่แสดงเป็นสรุปคําสั่งซื้อ เปลี่ยนขนาดตัวอักษรและแบบอักษรตามความต้องการของคุณ

   

9. ขยายรายการดรอปดาวน์แกลเลอรี และเลือกแนวนอน เก็บเฉพาะรูปภาพ ลบคอมโพเนนต์อื่น ๆ ของแกลเลอรี เปลี่ยนชื่อ Order_gallery_products

   

10. กําหนดค่าคุณสมบัติ Items ของแกลเลอรีนี้โดยการเพิ่มบรรทัดต่อไปนี้:

    ViewInMR1.Photos
    

    

11. เพิ่ม ป้ายชื่อสามป้าย และเปลี่ยนข้อความที่แสดงเพื่อ ป้อนอีเมลของคุณเพื่อรับอีเมลยืนยันคําสั่งซื้อ!รหัสอีเมลขององค์กร: และ ID อีเมลของลูกค้า: ตามลําดับ

    

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

    

13. กําหนดค่าคุณสมบัติ ข้อความแนะนํา โดยการเพิ่ม ใส่ ID อีเมล:; ไม่เก็บค่าในคุณสมบัติ Default ปรับขนาดตัวอักษรและสีตามความต้องการของคุณ

    

14. เพิ่มปุ่มจากแท็บ แทรก และกําหนดค่าคุณสมบัติ Text โดยการเพิ่ม ยืนยัน

    

15. ขยายรายการดรอปดาวน์ ไอคอน และเลือก ไอคอนย้อนกลับและหน้าแรก จัดตําแหน่งอย่างถูกต้อง ดังที่แสดงในภาพ

    

16. กําหนดค่าคุณสมบัติ OnSelect ของไอคอนทั้งสองนี้ดังนี้:

    • กลับ:

      Navigate(Product_details,ScreenTransition.CoverRight)
      

      

    • หน้าแรก: หน้าหลัก

      Navigate('Home Page',ScreenTransition.CoverRight)
      

      

17. ทําตามขั้นตอนเดียวกันสําหรับ Order_carpets

สร้างหน้าสิ้นสุด

1. สร้างหน้าจอว่าง และเปลี่ยนชื่อหน้าสิ้นสุด

   

2. เพิ่ม ป้ายชื่อ และเปลี่ยนข้อความที่แสดงเป็น เรียงลําดับเรียบร้อยแล้ว ส่งแล้ว! จัดตําแหน่งป้ายชื่อตามที่จําเป็นบนหน้าจอ

   

3. เพิ่ม ปุ่ม ที่ด้านล่างของหน้าจอ กําหนดค่าคุณสมบัติ Text ของปุ่มโดยการเพิ่ม เลือกซื้อเพิ่มเติม ลองนําผู้ใช้ไปยังหน้าแรก: เลือกปุ่ม เลือกซื้อเพิ่มเติม จากนั้นเพิ่มบรรทัดต่อไปนี้ในคุณสมบัติ OnSelect

   Navigate('Home Page',ScreenTransition.Cover)
   

   

4. ขยายดรอปดาวน์สื่อและเลือกรูปเพื่อเพิ่มคอมโพเนนต์รูปไปยังหน้าสิ้นสุด

   

5. จัดตําแหน่งรูปภาพตามที่แสดงในรูปภาพ เลือกไฟล์ โลโก้ ที่จะแสดง

   

   เคล็ดลับ

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

ส่งอีเมลผ่าน Power Apps

1. เลือกแท็บ ข้อมูล และเลือก+ เพิ่มข้อมูล ขยาย ตัวเชื่อมต่อ จากนั้นเลือก Office 365 Outlook เพื่อเพิ่มเป็นหนึ่งในตัวเชื่อมต่อสําหรับแอปพลิเคชันนี้

   

2. เปิด Order_products แล้วกําหนดค่าคุณสมบัติ OnSelect ของปุ่ม ยืนยัน โดยการเพิ่มบรรทัดต่อไปนี้:

   Office365Outlook.SendEmailV2(Input1_products & ";"& Input2_products,"Order Summary","<b> Your order is successfully submitted! </b> <br> Order details are as follows: <ul> <li> Product: " & Order_product_name_details & "</li> <li> Price: " & Order_price_details & "</li> <li> Color: " & Order_color_details & "</li> </ul>Notes: " & TextInput_products & "<br><b> Thank you for shopping with us! </b>");
   Navigate('End page',ScreenTransition.Cover)
   

   

   หมายเหตุ

   ชื่อที่ใช้ในฟังก์ชันก่อนหน้าเป็นไปตามมาตรฐานการตั้งชื่อที่ใช้ในแอปพลิเคชันนี้ในเวลาของการพัฒนา คุณสามารถปรับแต่งฟังก์ชันตามแอปพลิเคชันของคุณ

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

ทดสอบแอปพลิเคชันของคุณบนอุปกรณ์เคลื่อนที่

1. เลือกลิงก์ดาวน์โหลดสําหรับอุปกรณ์ของคุณ:

   • สําหรับ iOS (iPad หรือ iPhone) ให้ไปที่ App Store
   • สําหรับ Android ไปที่ Google Play

2. เปิด Power Apps บนอุปกรณ์เคลื่อนที่ของคุณ และลงชื่อเข้าใช้ด้วยข้อมูลประจําตัวบัญชี Microsoft ของคุณ

3. แอปที่คุณใช้ล่าสุดจะปรากฏบนหน้าจอเริ่มต้นเมื่อคุณลงชื่อเข้าใช้ Power Apps สําหรับอุปกรณ์เคลื่อนที่

   หน้าแรกคือหน้าจอเริ่มต้นเมื่อคุณลงชื่อเข้าใช้ ซึ่งแสดงแอปที่คุณใช้ล่าสุดและแอปที่คุณได้ทําเครื่องหมายเป็นรายการโปรด

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

5. เมื่อต้องการปิดแอป ให้ใช้นิ้วปัดจากขอบด้านซ้ายของแอปไปทางด้านขวา บนอุปกรณ์ Android คุณยังสามารถเลือกปุ่ม ย้อนกลับ และยืนยันว่าคุณต้องการปิดแอป

   หมายเหตุ

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