แบบฝึกหัด - เพิ่มแหล่งข้อมูลลงในแอปพื้นที่ทํางานและหน้าฟังก์ชันการออกแบบ

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

ใน Power Apps คุณสามารถเชื่อมต่อข้อมูลของคุณกับแอปพลิเคชันที่มีอยู่หรือกับแอปพลิเคชันที่คุณกําลังสร้างตั้งแต่เริ่มต้นได้ แอปของคุณสามารถเชื่อมต่อกับ SharePoint, Microsoft Dataverse, Salesforce, OneDrive หรือแหล่งข้อมูลอื่นได้

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

สร้างไซต์ SharePoint

  1. ลงชื่อเข้าใช้ พอร์ทัล SharePoint ด้วยข้อมูลประจําตัวองค์กร Microsoft ของคุณ

  2. เลือก + สร้างไซต์ บนหน้าเริ่มต้น SharePoint เพื่อสร้างไซต์ SharePoint

    สกรีนช็อตที่แสดงเพื่อสร้างไซต์บนหน้าเริ่มต้น SharePoint

  3. บนหน้าเริ่มต้น SharePoint คุณจะพบข้อมูลต่อไปนี้:

    • เลือกชนิดไซต์ ตัวเลือกคือ เว็บไซต์การสื่อสาร หรือ ไซต์ทีม เลือก ไซต์การสื่อสาร

    • ป้อนชื่อที่เหมาะสมสําหรับไซต์ ตัวอย่างเช่น ยอดขายที่ง่าย

    • เพิ่ม คําอธิบายไซต์ ถ้าจําเป็น (ไม่บังคับ)

    • เลือก ภาษา ที่คุณเลือกจากรายการดรอปดาวน์

  4. เลือก เสร็จสิ้น เพื่อสร้างไซต์ SharePoint สําหรับการโหลดข้อมูลของคุณ

    สกรีนช็อตของการอัปเดตรายละเอียดไซต์

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

หมายเหตุ

ถ้าคุณเลือก ไซต์ทีม Microsoft 365 Group จะถูกสร้างขึ้นด้วย

สร้างรายการ SharePoint

รายการ SharePoint จะรวบรวมข้อมูลที่มีโครงสร้างบางอย่าง คล้ายกับตาราง สเปรดชีต หรือฐานข้อมูลแบบธรรมดา ซึ่งอาจประกอบด้วยข้อมูลหลายชนิด เช่น ตัวเลข ข้อความ ไฟล์แนบ และแม้แต่รูปภาพ

สําหรับแอปพลิเคชัน Easy Sales ของเรา เราจะสร้างรายการที่มีรายละเอียดของหมวดหมู่ผลิตภัณฑ์ทั้งหมด: โซฟาเก้าอี้ตาราง และพรม

  1. ในไซต์ SharePoint ที่สร้างขึ้นใหม่ภายใต้ชื่อ Easy Sales เลือกรายการดรอปดาวน์ + ใหม่ จากนั้นเลือก รายการ เพื่อสร้างรายการ SharePoint ของคุณ

    ภาพหน้าจอของการเลือกรายการ

  2. ในหน้าต่าง สร้างรายการ ให้เลือก รายการเปล่า เพื่อสร้างรายการ SharePoint ตั้งแต่เริ่มต้น

    ภาพหน้าจอของการเลือกรายการว่าง

  3. กําหนดค่าบานหน้าต่าง สร้าง ดังนี้:

    • ป้อนชื่อที่เหมาะสมสําหรับรายการ ตัวอย่างเช่น ยอดขายที่ง่าย

    • กรอกคําอธิบาย ถ้าจําเป็น (ไม่บังคับ)

    • เลือกกล่องกาเครื่องหมาย แสดงในการนําทางไซต์ ทิ้งไว้

    • เลือก สร้าง

      ภาพหน้าจอของสร้างบานหน้าต่าง

เพิ่มข้อมูลลงในรายการ SharePoint ของคุณ

เมื่อสร้างรายการแล้ว ถึงเวลาเพิ่มข้อมูลแล้ว ต่อไปนี้ "ข้อมูล" หมายถึงรายละเอียดของผลิตภัณฑ์เฉพาะใด ๆ รายละเอียดผลิตภัณฑ์มีข้อมูลต่อไปนี้: ชื่อ, รูปภาพ, ราคา, มิติ, น้ําหนัก, สี, PrimaryMaterial, พื้นที่, ความสูง และรูปแบบ 3 มิติ/ภาพของผลิตภัณฑ์ที่จะดูในความเป็นจริงผสม

  1. ในรายการ ยอดขายที่ถูกสร้างขึ้นอย่างง่าย เลือก + เพิ่มคอลัมน์ เพื่อเพิ่มคอลัมน์ของประเภทที่เฉพาะเจาะจง รายการด้านล่างแสดงคอลัมน์ที่จําเป็นต้องสร้าง ด้วยชื่อและชนิดของคอลัมน์ในรูปแบบนี้: ชื่อของคอลัมน์ - ชนิดคอลัมน์

    • ชื่อ: ข้อความบรรทัดเดียว
    • ImageLink: ข้อความบรรทัดเดียว
    • ราคา: ข้อความบรรทัดเดียว
    • มิติ: ข้อความบรรทัดเดียว
    • น้ําหนัก: ข้อความบรรทัดเดียว
    • สี: ข้อความบรรทัดเดียว
    • PrimaryMaterial: ข้อความบรรทัดเดียว
    • ความสูง: ตัวเลข
    • ความลึก: จํานวน
    • ความกว้าง: ตัวเลข
    • ราคา/cm2: จํานวน
    • ProductCategory: ข้อความบรรทัดเดียว
    • FileType: ข้อความบรรทัดเดียว

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

    สกรีนช็อตของการเลือกข้อความบรรทัดเดียว

    ป้อนรายละเอียดของคอลัมน์ในแท็บ สร้างคอลัมน์ และเลือก บันทึก

    ภาพหน้าจอของการสร้างคอลัมน์

    ทําซ้ําขั้นตอนเดียวกันสําหรับคอลัมน์ที่เหลือในรายการก่อนหน้า

    หมายเหตุ

    หลังจากที่คุณสร้างรายการ SharePoint คอลัมน์ ชื่อเรื่อง เริ่มต้นจะถูกสร้างขึ้นซึ่งคุณสามารถเปลี่ยนชื่อเป็น ชื่อได้

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

    โฟลเดอร์แบบกําหนดเองของ Power Apps

  3. เลือก + ใหม่ เพื่อเพิ่มรายการแล้วกรอกรายละเอียดที่จําเป็นตามที่ระบุไว้ในไฟล์ Excel ที่ดาวน์โหลด เลือก บันทึก เพื่อบันทึกรายละเอียดที่ป้อน

    สกรีนช็อตของการเลือกใหม่หรือแก้ไขในมุมมองตารางเพื่อเพิ่มรายการใหม่

    หมายเหตุ

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

  4. เริ่มเพิ่มข้อมูลของคุณในคอลัมน์ที่เกี่ยวข้อง ดังที่แสดงในรูปภาพ:

    ภาพหน้าจอของรายการ sharepoint ที่มีรายละเอียดเพิ่มเติม

    หมายเหตุ

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

    หมายเหตุ

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

สร้างการเชื่อมต่อ

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

  1. เมื่อต้องเริ่มสร้างการเชื่อมต่อ ลงชื่อเข้าใช้ ใน Power Apps และเลือก การเชื่อมต่อ ในแถบนําทางด้านซ้าย จากนั้นเลือก + การเชื่อมต่อใหม่ ใกล้กับมุมบนซ้าย

  2. เลือก SharePoint เรากําลังเลือก SharePoint เนื่องจากเราได้จัดเก็บข้อมูลที่จําเป็นในรายการ SharePoint

    ภาพหน้าจอของการเลือก Sharepoint

  3. เมื่อต้องการเชื่อมต่อกับ SharePoint Online ให้เลือก เชื่อมต่อโดยตรง (บริการระบบคลาวด์) แล้วเลือก สร้าง แล้วถ้าได้รับพร้อมท์ ใส่ข้อมูลประจําตัว

    ภาพหน้าจอของการเลือกสร้าง

  4. การเชื่อมต่อจะถูกสร้างขึ้น และคุณสามารถสร้างแอปตั้งแต่เริ่มต้นได้

    หมายเหตุ

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

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

เปิดแอปเปล่า

  1. ไปที่โฮมเพจ Power Apps จากนั้นเลือก สร้าง ในเมนูทางด้านซ้าย เลือก แอปเปล่า จากนั้นเลือก สร้าง ภายใต้ แอปพื้นที่ทํางานเปล่า

    สกรีนช็อตของการเลือกแอปพื้นที่ทํางานจากเอกสารเปล่า

  2. ระบุชื่อสําหรับแอปของคุณ ตัวอย่างเช่น Easy-Sales เลือก โทรศัพท์ จากนั้นเลือก สร้าง

    ภาพหน้าจอของการระบุชื่อแอปและเลือกสร้าง

    Power Apps Studio สร้างแอปเปล่าสําหรับโทรศัพท์

    หมายเหตุ

    ในขณะที่คุณสามารถออกแบบแอปตั้งแต่เริ่มต้นสําหรับอุปกรณ์ต่าง ๆ ได้ แต่หัวข้อนี้เน้นไปที่การออกแบบแอปสําหรับโทรศัพท์

  3. ถ้ากล่องโต้ตอบ ยินดีต้อนรับสู่ Power Apps Studio เปิดขึ้น ให้เลือก ข้าม

    ภาพหน้าจอของการเลือกตัวเลือกข้าม

เชื่อมต่อกับข้อมูล

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

  1. ทางด้านซ้ายของ Power Apps Studio ให้เลือกตัวเลือก ข้อมูล

  2. หลังจากเปิดบานหน้าต่าง ข้อมูล ให้เลือกปุ่ม เพิ่มข้อมูล เพื่อเชื่อมต่อกับข้อมูล

  3. ในหน้าต่าง เลือกแหล่งข้อมูล ให้ขยายส่วน ตัวเชื่อมต่อ และเลือกตัวเลือก SharePoint

    สกรีนช็อตของการเลือกตัวเลือกเพิ่มข้อมูลและ Sharepoint

  4. ในแบบฝึกหัดก่อนหน้านี้ เราได้สร้างการเชื่อมต่อไว้แล้ว เลือกการเชื่อมต่อที่สร้างขึ้นเพื่อเพิ่มข้อมูลลงในแอปพลิเคชันของคุณ เลือกไซต์ SharePoint ที่สร้างขึ้นภายใต้ชื่อ Easy Sales

    สกรีนช็อตของการเลือกยอดขายอย่างง่าย

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

    ภาพหน้าจอของการเลือกรายการ

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

สร้างหน้าจอเริ่มต้น

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

    สกรีนช็อตของการสร้างหน้าจอใหม่

  2. เปลี่ยนชื่อหน้าจอเป็น Splash screen โดยเลือกตัวเลือกจุดสามจุด (...) ที่อยู่ด้านข้างชื่อหน้าจอ และเลือกตัวเลือก เปลี่ยนชื่อ

    สกรีนช็อตของการเปลี่ยนชื่อหน้าจอ

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

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

    สกรีนช็อตของการเพิ่มโลโก้การขายอย่างง่าย

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

    สกรีนช็อตของการเพิ่มโลโก้การขายอย่างง่ายไปยังหน้าจอเริ่มต้น

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

    สกรีนช็อตของการเพิ่มตัวจับเวลา

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

    • เริ่มต้นอัตโนมัติ: จริง

    • ระยะเวลา: 2000

    • มองเห็นได้: เท็จ

      สกรีนช็อตของการอัปเดตคุณสมบัติของตัวจับเวลา

      หมายเหตุ

      ตามค่าเริ่มต้น ระยะเวลาจะวัดเป็นมิลลิวินาที ตั้งแต่ 1 วินาที = 1,000 มิลลิวินาที เราป้อน 2000 เป็นค่าสําหรับระยะเวลา

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

    Navigate('Home Page',ScreenTransition.Fade)
    

    สกรีนช็อตของการกําหนดค่าคุณสมบัติ OnTimerEnd

  9. บันทึกแอปพลิเคชันของคุณโดยไปยัง ไฟล์>บันทึก ถัดไป เลือกตัวเลือก ระบบคลาวด์ และเลือก บันทึก

สร้างโฮมเพจ

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

    สกรีนช็อตของการเพิ่มปุ่ม

  2. เปลี่ยนข้อความแสดงของปุ่มเพื่อระบุประเภทผลิตภัณฑ์ เช่น โซฟา เก้าอี้ ตาราง และพรม

    สกรีนช็อตของการแก้ไขข้อความที่แสดง

  3. เราจะใช้ปุ่มเหล่านี้เพื่อนําทางไปยังรายการผลิตภัณฑ์ภายใต้ประเภทต่างๆ เมื่อต้องการทําเช่นนั้น เราจําเป็นต้องกรองผลิตภัณฑ์จากรายการ SharePoint ตามประเภทผลิตภัณฑ์ สร้างหน้าจอว่างใหม่สองหน้าจอ และเปลี่ยนชื่อเป็น ผลิตภัณฑ์ และ พรม

    สกรีนช็อตของการเพิ่มหน้าจอใหม่

  4. เลือกปุ่ม Sofas_button ที่สร้างขึ้นใหม่และกําหนดค่าคุณสมบัติ OnSelect หลังจากเลือกปุ่มแล้วจะต้องนําเราไปยังหน้ารายการผลิตภัณฑ์ที่สร้างขึ้นในขั้นตอนก่อนหน้า แทนที่ false ด้วยโค้ดต่อไปนี้:

    Navigate(Products,ScreenTransition.Cover, {ID:1});
    

    สกรีนช็อตของการนําทางของหน้าโซฟา

    หมายเหตุ

    ID เป็นตัวแปรบริบทที่มีค่าที่กําหนดบางอย่าง ค่านี้จะถูกส่งผ่านไปยังหน้าปลายทางที่กล่าวถึงในฟังก์ชันนําทาง ค่าที่กําหนดให้กับตัวแปรจะกรองผลิตภัณฑ์ตามประเภทผลิตภัณฑ์

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

    Navigate(Products,ScreenTransition.Cover, {ID:2});
    
    Navigate(Products,ScreenTransition.Cover, {ID:3});
    
    Navigate(Carpets,ScreenTransition.Cover)
    

    เคล็ดลับ

    หากต้องการบันทึกความคืบหน้าของคุณ ให้เลือกแท็บ ไฟล์ ที่ด้านบนและเลือกตัวเลือก บันทึก คุณยังสามารถใช้ Ctrl + S เพื่อบันทึกความคืบหน้าของคุณได้

    หมายเหตุ

    ไวยากรณ์เริ่มต้นของฟังก์ชัน นําทาง คือ: Navigate(Screen [, Transition [, UpdateContextRecord]])

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

    เคล็ดลับ

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

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

  1. ในหน้าจอ ผลิตภัณฑ์ บนแท็บ แทรก เลือก แกลเลอรี>แนวตั้ง เพื่อเพิ่ม ตัวควบคุม แกลเลอรี ไปยังหน้าจอของคุณ

    สกรีนช็อตของการเพิ่มแกลเลอรี

  2. เปลี่ยนชื่อเป็น Gallery_products บนแท็บ คุณสมบัติของ บานหน้าต่างด้านซ้าย ให้กําหนดค่าคุณสมบัติ Items ดังนี้:

    If(
    ID = 1,
    Filter('Easy Sales',(ProductCategory = "Sofa")),
    ID = 2,
    Filter('Easy Sales',(ProductCategory = "Chair")),
    ID = 3,
    Filter('Easy Sales',(ProductCategory = "Table")),
    ID = 4,
    Filter('Easy Sales',(ProductCategory = "Carpet")))
    

    สกรีนช็อตของการเชื่อมต่อ Sharepoint

    เรากรองผลิตภัณฑ์ที่จัดเก็บไว้ในรายการ SharePoint ตามประเภทผลิตภัณฑ์ ตัวแปรบริบทใช้สําหรับกระบวนการกรอง

  3. กําหนดค่าคุณสมบัติเขตข้อมูล>ในบานหน้าต่างคุณสมบัติโดยการเลือกแก้ไข:

    • กําหนด ราคา ให้กับหัวเรื่อง ซับไตเติล 1

    • กําหนดชื่อเรื่องให้กับหัวเรื่อง Title1

      สกรีนช็อตของการกําหนดค่าเขตข้อมูลในหน้าผลิตภัณฑ์

    ในการกําหนดเขตข้อมูลก่อนหน้า คุณจะสังเกตเห็นว่าข้อมูลปรากฏใน แกลเลอรีของคุณ

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

    ThisItem.ImageLink
    

    สกรีนช็อตของการกําหนดค่าคุณสมบัติรูปภาพในหน้าผลิตภัณฑ์

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

    สกรีนช็อตของการเพิ่มป้ายชื่อในหน้าผลิตภัณฑ์

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

    สกรีนช็อตของการเพิ่มไอคอนย้อนกลับในโฮมเพจ

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

    Navigate('Home Page',ScreenTransition.Cover)
    

    สกรีนช็อตของการกําหนดค่าคุณสมบัติ OnSelect

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

    Filter('Easy Sales',ProductCategory = "Carpet")
    

    สกรีนช็อตของการทําตามขั้นตอนเดียวกันสําหรับหน้าพรม

    เคล็ดลับ

    หากต้องการบันทึกความคืบหน้าของคุณ ให้เลือกแท็บ ไฟล์ ที่ด้านบนและเลือกตัวเลือก บันทึก คุณยังสามารถใช้ Ctrl + S เพื่อบันทึกความคืบหน้าของคุณได้

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

การสาธิตแอปพลิเคชันหลังจากเชื่อมต่อกับแหล่งข้อมูล