Picker ตัวควบคุม

ตัวควบคุมที่ใช้เพื่อมอบประสบการณ์การค้นหา

หมายเหตุ

รหัสแหล่งที่มาของส่วนประกอบและข้อมูลเพิ่มเติมใน ที่เก็บส่วนประกอบของโค้ด GitHub

รายละเอียด

Pickers ใช้เพื่อเลือกหนึ่งรายการขึ้นไป เช่น แท็กหรือไฟล์ จากรายการขนาดใหญ่

ส่วนประกอบของโค้ด Picker อนุญาตให้ใช้ ส่วนประกอบเมนู Fluent UI picker จากภายในแอปพื้นที่ทำงานและหน้าแบบกำหนดเอง

ส่วนประกอบของโค้ด Tag Picker มีคุณสมบัติดังต่อไปนี้:

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

ชุดข้อมูล

Tag Picker มีชุดข้อมูลอินพุตต่อไปนี้ ซึ่งมีการอธิบายโดยละเอียดใน คุณสมบัติที่สำคัญ ในบทความนี้

• Tags
  • TagsDisplayName
• Suggestions
  • SuggestionsDisplayName
  • SuggestionSubDisplayName

ชุดข้อมูล Suggestions ควรกรองโดยใช้คุณสมบัติผลลัพธ์ SearchTerm ตัวอย่างเช่น:

Search(colSuggestions,TagPicker.SearchTerm,"name")

คุณสมบัติ

คุณสมบัติที่สำคัญ

คุณสมบัติ	Description
Items	คอลเลกชัน (ตาราง) ของแท็ก แอปมีหน้าที่เพิ่มหรือลบแท็กเพื่อตอบสนองต่อการเพิ่มหรือลบเหตุการณ์ของส่วนประกอบ (อธิบายใน ส่วนเหตุการณ์ OnChange ต่อไปนี้)
Suggestions_Items	คอลเลกชัน (ตาราง) ของข้อเสนอแนะ
TagMaxWidth	ความกว้างสูงสุดของแท็กเมื่อแสดงผล ข้อความล้นจะถูกตัดด้วยจุดไข่ปลา และคำแนะนำเครื่องมือโฮเวอร์จะแสดงข้อความทั้งหมด
AllowFreeText	เมื่อพิมพ์ค่า อย่าเลือกคำแนะนำแรกโดยอัตโนมัติเพื่อให้สามารถป้อนข้อความอิสระแทนการเลือกจากรายการที่กำหนดไว้ล่วงหน้า
SearchTermToShortMessage	ข้อความที่จะแสดงเมื่อคำที่ใช้ค้นหามีค่าน้อยกว่า MinimumSearchTermLength
HintText	ข้อความที่จะแสดงภายใน Picker เมื่อไม่มีคำที่ใช้ค้นหาที่ให้ไว้
NoSuggestionsFoundMessage	ข้อความที่จะแสดงเมื่อคอลเลกชัน Suggestions ไม่มีผลลัพธ์
MinimumSearchTermLength	จำนวนอักขระขั้นต่ำที่จะทริกเกอร์เมนูลอยคำแนะนำ
MaxTags	จำนวนแท็กสูงสุดที่สามารถเพิ่มได้ หลังจากหมายเลขนี้ Tag Picker จะถูกเปลี่ยนใหม่เท่านั้นจนกว่าแท็กจะถูกลบออก
Error	เป็นจริงเมื่อควรแสดงขอบข้อผิดพลาดสีแดง

Itemsคุณสมบัติ

คุณสมบัติ	Description
TagsDisplayName	ตั้งค่าเป็นชื่อของคอลัมน์ที่มีแท็ก ชื่อที่แสดง

Suggestions คุณสมบัติ

คุณสมบัติ	Description
SuggestionsDisplayName	ตั้งค่าเป็นชื่อของคอลัมน์ที่มีคำแนะนำ ชื่อที่แสดง
SuggestionsSubDisplayName	(ไม่บังคับ) ตั้งค่าเป็นชื่อของคอลัมน์ที่มีบรรทัดข้อความรอง

คุณสมบัติ Style

คุณสมบัติ	Description
Theme	ยอมรับสตริง JSON ที่สร้างขึ้นโดยใช้ ตัวออกแบบธีม Fluent UI (windows.net) การเว้นว่างไว้จะใช้ธีมเริ่มต้นที่กำหนดโดย Power Apps ดูที่ ชุดรูปแบบ สำหรับความช่วยเหลือเกี่ยวกับวิธีกำหนดค่า
FontSize	ขนาดแบบอักษรของแท็กที่แสดงใน Picker
BorderRadius	รัศมีเส้นขอบของแท็กที่แสดงใน Picker
ItemHeight	ความสูงของแท็ก (พิกเซล) ที่แสดงภายในตัวเลือก
AccessibilityLabel	ป้ายชื่อ aria สำหรับโปรแกรมอ่านหน้าจอ

คุณสมบัติ Event

คุณสมบัติ	Description
Input Event	ตั้งค่าเหตุการณ์ที่จะส่งไป TagPicker

คุณสมบัติ Output

คุณสมบัติ	Description
SearchTerm	ข้อความที่ป้อนลงใน Tag Picker ที่สามารถใช้เพื่อกรองชุดข้อมูลคำแนะนำ
TagsDisplayName	ข้อความที่ใช้สร้าง แท็ก ใหม่เมื่อเหตุการณ์ เมื่อเปลี่ยนแปลง ถูกเปิด
AutoHeight	เมื่อ Tag Picker ตัดเป็นหลายบรรทัด คุณสมบัติ Auto Height สามารถใช้เพื่อควบคุมความสูงของคอนเทนเนอร์ที่ตอบสนองได้

พฤติกรรม

รองรับ SetFocus เป็น InputEvent

เหตุการณ์ OnChange

ส่วนประกอบ TagPicker เพิ่มเหตุการณ์ OnChange เมื่อมีการเพิ่มหรือลบแท็ก คุณสมบัติที่ใช้คือ:

คุณสมบัติ	Description
TagEvent	ชื่อของเหตุการณ์ที่ยก
TagKey	คีย์ของรายการที่ยกเหตุการณ์ (หากเหตุการณ์เกี่ยวข้องกับแท็ก)

เหตุการณ์ควรมีนิพจน์คล้ายกับ:

If( TagPicker.TagEvent = "Add" && CountRows(Filter(colTags,name=TagPicker.TagsDisplayName)) = 0,
    Collect( colTags, { name:TagPicker.TagsDisplayName })
);

If( TagPicker.TagEvent="Remove",
 RemoveIf( colTags,name=Text(TagPicker.TagsDisplayName) )
);

ข้อจำกัด

ส่วนประกอบโค้ดนี้ใช้ได้เฉพาะในแอปพื้นที่ทำงานและหน้าที่กำหนดเองเท่านั้น