แผนภูมิ PowerApps กราฟ และรูปภาพแบบไดนามิก

ในบทช่วยสอนนี้ เราจะดูว่าแผนภูมิและรูปภาพ PowerApps สามารถทำให้แอปของเราดีขึ้นได้อย่างไร

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

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

สารบัญ

• การใช้รูปภาพแบบไดนามิกใน PowerApps
• การใช้แผนภูมิและกราฟ PowerApps
• การใช้ตัวแปรคอลเลกชันในแผนภูมิ PowerApps
• บทสรุป

การใช้รูปภาพแบบไดนามิกใน PowerApps

เริ่มต้นด้วยการดูว่าเราสามารถใช้รูปภาพไดนามิกใน PowerApps ได้อย่างไร เราจะนำภาพเหล่านี้ไปใช้กับแกลเลอรี

สำหรับตัวอย่างนี้ เราจะใช้วัสดุอ้างอิงที่เรียกว่า Flooring Estimates ตารางนี้ซึ่งเราจะใช้เป็นแหล่งข้อมูล มีคอลัมน์สำหรับ Name, Category, Price และ ImageURL

ไปที่แท็บแหล่งข้อมูล คลิกที่ตัวเชื่อมต่อ และไปที่ OneDrive เนื่องจากเป็นที่ที่บันทึกไฟล์

เราจะเลือกไฟล์ที่ถูกต้องที่นี่

จากนั้นเราต้องแน่ใจว่าเรากำลังนำตารางที่ถูกต้องเข้ามา ในกรณีนี้ เราจะแนบตารางกับไฟล์ Excel นั้นเพียงตารางเดียว

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

ตอนนี้มาเพิ่มแกลเลอรีและเลือกเทมเพลตแนวตั้ง

เมื่อแกลเลอรีปรากฏบนหน้าจอ เราสามารถย้ายแกลเลอรีไปทุกที่ที่ต้องการหรือปรับขนาดได้ตามต้องการ

เนื่องจากเราได้แนบ Table1_2 เข้ากับแอปนี้แล้ว ตอนนี้เราจึงเห็นเป็นตัวเลือกภายใต้แหล่งข้อมูล

ขณะนี้ข้อมูลจากตารางปรากฏในแกลเลอรีของเรา

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

ในการรีเฟรชแหล่งข้อมูล เราจำเป็นต้องมีปุ่มที่จะใช้ฟังก์ชันรีเฟรช อย่างที่คุณเห็น ข้อมูลนี้อ้างอิงถึง Table1_2

นี่หมายความว่าฟังก์ชันรีเฟรชจะถูกนำไปใช้กับตารางเฉพาะที่เรากำลังอ้างอิง

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

มาเปลี่ยนคำบรรยายเป็นราคาและชื่อเรื่องเป็นชื่อกันเถอะ

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

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

เราต้องการให้แต่ละรายการแสดงรูปภาพเฉพาะที่ URL รูปภาพเหล่านี้ในแหล่งข้อมูลของเราเป็นตัวแทน

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

เราจะใช้ ThisItem.ImageURL แทน

โดยพื้นฐานแล้ว ข้อมูลนี้จะอ้างอิงถึงแต่ละรายการในแกลเลอรีและรับ URL ของรูปภาพแนบมาด้วย

ตอนนี้ แกลเลอรีแสดงรูปภาพต่างๆ ที่มาจาก URL ในแหล่งข้อมูลของเรา

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

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

การใช้แผนภูมิและกราฟ PowerApps

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

ไม่ต้องสงสัยเลยว่า การใช้ไทล์ LuckyTemplatesเป็นวิธีที่ดีที่สุดในการเพิ่มแผนภูมิ PowerApps ลงในแอปใดๆ

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

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

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

ในการทำเช่นนั้น เราจำเป็นต้องมีแหล่งข้อมูล ในตัวอย่างนี้ เราจะใช้สองคอลัมน์นี้ที่แสดงตำแหน่งที่ตั้งและรายได้

หากต้องการใช้เป็นแหล่งข้อมูล เราจำเป็นต้องแปลงเป็นตาราง

ตอนนี้เรามีตารางที่จะใช้แล้ว เราเพียงแค่แนบไฟล์กับ PowerApps แบบเดียวกับที่เราทำก่อนหน้านี้ นี่คือไฟล์ชื่อ LocationRevenue

สำหรับชื่อตารางนี้เรียกว่า Table1 เช่นกัน

หมายความว่าเมื่อเราเลือกแล้วมันจะแสดงเป็น Table1_3

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

ในขณะนี้ มันยังคงแสดงข้อมูลตัวอย่างเริ่มต้น

จะต้องมีแหล่งข้อมูลเฉพาะซึ่งควรแสดงภายใต้คุณสมบัติรายการ

ลองใช้ Table1_3 สำหรับแผนภูมินี้

ตอนนี้จะแสดงข้อมูลจากตารางที่เราใช้เป็นแหล่งข้อมูล

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

การใช้ตัวแปรคอลเลกชันในแผนภูมิ PowerApps

อีกวิธีในการแสดง ข้อมูลในแผนภูมิคือการใช้ตัวแปรคอลเลกชัน ถ้าเราดูที่เอกสารประกอบ Microsoft PowerApps จะแสดงสูตรตัวอย่าง

ก่อนที่เราจะใช้สูตรนี้เรามาเพิ่มปุ่มตรงนี้ก่อน

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

คราวนี้มาเน้นที่แผนภูมิ ไปที่คุณสมบัติ รายการ และเทียบเป็นรายรับ

เมื่อดำเนินการเสร็จแล้ว ทุกครั้งที่เราคลิกปุ่ม ระบบจะแสดงรายการที่เกี่ยวข้องกับตัวแปรรายได้

บทนำ Power Apps: คำจำกัดความ คุณลักษณะ ฟังก์ชัน และความสำคัญ
สภาพแวดล้อม Power Apps: การตั้งค่าองค์ประกอบของแอปอย่างเหมาะสม
ฟังก์ชันและสูตร PowerApps | การแนะนำ

บทสรุป

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

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

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

สิ่งที่ดีที่สุด

เฮนรี่