องค์ประกอบอินพุตและวิธีการใช้ใน Power Apps

ในบทช่วยสอนนี้ เราจะพูดถึงองค์ประกอบอินพุตและวิธีเพิ่มการใช้งานให้สูงสุดใน Power Apps

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

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

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

สารบัญ

• กล่องคำสั่งผสม
• เลือกวันที่
• กล่องรายการ
• สลับ
• สไลเดอร์
• คะแนน
• จับเวลา
• บทสรุป

กล่องคำสั่งผสม

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

ตัวอย่างเช่น ถ้าเราพิมพ์ 1 รายการก็จะกรองรายการทั้งหมดและแสดงผลลัพธ์ที่ตรงกัน

ทำให้ผู้ใช้ค้นหาสิ่งที่ต้องการได้ง่าย โดยเฉพาะอย่างยิ่งหากมีรายการที่ต้องดำเนินการจำนวนมาก

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

ตอนนี้ รายการแสดงตำแหน่งต่างๆ จากแหล่งข้อมูลของเรา

เราสามารถพิมพ์คำว่า แคนาดา แล้วช่องจะกรองรายการที่ตรงกันโดยอัตโนมัติ

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

เลือกวันที่

เครื่องมือเลือกวันที่มักใช้ในแอปที่ต้องการให้ผู้ใช้เลือกวันที่ที่ต้องการ

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

ในการเลือกปี ผู้ใช้สามารถคลิกที่ปีเริ่มต้นที่แสดงบนหน้าจอและเลือกจากรายการ

สิ่งเดียวกันสามารถทำได้เพื่อเลือกเดือน

เรายังสามารถเพิ่มป้ายกำกับที่นี่ จากนั้นเปลี่ยนข้อความบนป้ายกำกับเป็น DatePicker1.SelectedDate ป้ายกำกับจะแสดงวันที่ใดก็ตามที่ผู้ใช้เลือกจากตัวเลือกวันที่

กล่องรายการ

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

กล่องรายการยังช่วยให้คุณเลือกหลายรายการในรายการ

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

สลับ

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

จากนั้นจะเปลี่ยนเป็นสีเทาเมื่อคุณปิดใช้งาน

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

จากนั้น คุณสามารถเปลี่ยนเป็นข้อความที่คุณต้องการใช้ เช่น "ซ่อนป้ายกำกับ"

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

คุณยังสามารถเปลี่ยนคุณสมบัติอื่นๆ ตัวอย่างเช่น สีของปุ่มสลับสามารถเปลี่ยนเป็นสีอื่นได้

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

เนื่องจากการสลับมีค่า True หรือ False ป้ายกำกับของเราจึงแสดง True เมื่อองค์ประกอบถูกเปิดใช้งาน

จากนั้นป้ายกำกับจะแสดงเป็นเท็จหากเราปิดการสลับ

สไลเดอร์

ต่อไปเรามาพูดถึงสไลเดอร์กัน ตัวเลื่อนเป็นองค์ประกอบทั่วไปในแอพที่ใช้ค่าตัวเลข

ผู้ใช้สามารถเลือกจำนวนเฉพาะจากช่วงของค่าที่กำหนดได้โดยการเลื่อนสวิตช์ไปทางซ้ายหรือทางขวา

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

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

เรามาเพิ่มป้ายกำกับที่นี่ด้วย

ก่อนที่เราจะเชื่อมต่อองค์ประกอบเหล่านั้น ตรวจสอบให้แน่ใจว่าเรามีชื่อองค์ประกอบที่ถูกต้อง ในกรณีนี้ เรากำลังทำงานกับ Slider4

ดังนั้นมาเปลี่ยนข้อความบนฉลากของเราและทำให้เป็น Slider4.Value

ซึ่งจะทำให้ฉลากแสดงค่าที่เราเลือกบนแถบเลื่อน

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

ก่อนอื่น เราจะตั้งค่าสูงสุดกลับเป็น 100

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

เรามาเน้นไอคอนสี่เหลี่ยมผืนผ้าแล้วไปที่คุณสมบัติเติม โปรดทราบว่าค่าสุดท้ายที่แสดงคือ 0.58 ซึ่งเป็นค่าความทึบแสงของเรา

จากนั้นเราจะเปลี่ยนค่าสุดท้ายในชุดข้อมูลเป็น Slider4.Value

เนื่องจากตอนนี้ค่าความทึบเป็นทศนิยมที่ 0.58 เราจำเป็นต้องหารด้วยร้อยเพื่อให้เป็นตัวเลขระหว่าง 0 ถึง 100

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

แต่ถ้าเราเลื่อนแถบเลื่อนไปที่ 100 คุณจะเห็นความสว่างสูงสุดของสี่เหลี่ยมผืนผ้า

คะแนน

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

การให้คะแนนเกือบจะเหมือนกับแถบเลื่อนที่รู้ว่าทั้งคู่อนุญาตให้ผู้ใช้เลือกค่าเฉพาะได้ ความแตกต่างที่สำคัญคือรูปแบบภาพ

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

เช่นเดียวกับองค์ประกอบอื่นๆ ที่เราทำงานด้วย เรายังสามารถรับค่าจากการให้คะแนนและแสดงในรูปแบบของป้ายกำกับ ก่อนที่เราจะเริ่มใช้ป้ายกำกับนั้น โปรดจำไว้ว่าองค์ประกอบการให้คะแนนที่เราจะใช้คือ Rating2

เช่นเดียวกับที่เราทำก่อนหน้านี้ มาเพิ่มป้ายกำกับและเปลี่ยนค่าทดสอบเป็น Rating2.Value

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

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

จับเวลา

องค์ประกอบอินพุตสุดท้ายที่เราจะพูดถึงในบทช่วยสอนนี้คืออินพุตตัวจับเวลา

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

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

มาดูกันว่าตัวจับเวลาทำงานอย่างไรและสำรวจแอปพลิเคชันสองสามตัว

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

ลองเปลี่ยนเป็น 10 วินาที ซึ่งหมายความว่าเราจะพิมพ์เป็น 10,000

นอกจากนี้ เราจะตั้งค่าตัวจับเวลาเป็นโหมดทำซ้ำ ซึ่งหมายความว่าตัวจับเวลาจะรีสตาร์ทโดยอัตโนมัติเมื่อครบ 10 วินาที เรามาเปิดการเริ่มอัตโนมัติด้วยเพื่อให้ตัวจับเวลาเริ่มทันทีที่โหลดหน้าจอ

ทีนี้มาทำแอพพลิเคชั่นเจ๋ง ๆ กันเถอะ ขั้นแรก มาดูค่าของตัวจับเวลาและแสดงเป็นป้ายกำกับ ลองเพิ่มป้ายกำกับและเปลี่ยนข้อความเป็น Timer2.Value

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

ลองให้ไอคอนปรากฏขึ้นหลังจากผ่านไป 5 วินาที เราจะเริ่มต้นด้วยการเพิ่มไอคอนค้นหา

จากนั้น เราจะตั้งค่าคุณสมบัติมองเห็นได้ของไอคอนเป็นที่ระบุว่าถ้า Timer2.Value มากกว่า 5000 ไอคอนควรจะมองเห็นได้ มิฉะนั้นก็ไม่ควรมองเห็นได้

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

แต่หลังจากตัวจับเวลาถึงเครื่องหมาย 5,000 ไอคอนค้นหาก็ปรากฏขึ้น

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

นี่เป็นอีกหนึ่งแอปพลิเคชั่นที่ยอดเยี่ยม มาเพิ่มวงกลมกันเถอะ

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

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

เราสามารถสร้างการไล่ระดับสีเจ๋งๆ ได้ถ้าเราทำเช่นนี้ ตัวอย่างเช่น ไปที่สีหรือการเติม

เราจะเปลี่ยนตัวเลขนั้นเป็น Timer2.Value จากนั้นเราจะหารด้วย 100

ด้วยสูตรนั้น วงกลมจะเริ่มเป็นสีน้ำเงิน

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

เราสามารถเปลี่ยนแปลงได้เร็วและเด่นชัดขึ้นหากเราเปลี่ยนตัวเลข แทนที่จะหารค่าแรกด้วย 100 ลองเปลี่ยนเป็น 10

อีกครั้งมันเริ่มเป็นสีน้ำเงิน

จากนั้นในเวลาเพียง 1,900 มิลลิวินาที มันก็เปลี่ยนเป็นสีม่วง

และในเวลา 5600 มิลลิวินาที มันก็กลายเป็นสีชมพูสดใส

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

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

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

บทสรุป

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

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

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

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

เฮนรี่