แสดงไอคอนแบบกำหนดเองควบคู่ไปกับค่าในมุมมองรายการ

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

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

ไอคอนที่กำหนดเองในมุมมองรายการสามารถแสดงในแอปแบบจำลอง แอปสำหรับอุปกรณ์เคลื่อนที่ และแอปสำหรับ Outlook

เพิ่มกราฟิกแบบกำหนดเองและ JavaScript เป็นทรัพยากรบนเว็บ

1. สร้างไฟล์รูปภาพใหม่ที่จำเป็นสำหรับการแก้ไข/ปรับปรุงตามคำสั่ง เราขอแนะนำให้ใช้ไอคอนขขนาด 16x16 พิกเซล (รูปที่ใหญ่กว่านี้จะถูกลดขนาดลง)

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

3. ลงชื่อเข้าใช้สภาพแวดล้อมของคุณ และเปิด solution explorer

4. แท็บโซลูชันจะเปิดขึ้น ไปยัง ส่วนประกอบ>ทรัพยากรบนเว็บ

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

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

   2. ตั้งค่า ประเภท ให้เป็นรูปแบบกราฟิกที่คุณใช้บันทึกไฟล์กราฟิก (PNG, JPEG หรือ GIF)

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

   4. เพิ่ม ชื่อที่แสดง และ/หรือ คำอธิบาย ถ้าคุณต้องการ

   5. เลือก บันทึก แล้วปิดหน้าต่าง ทรัพยากรบนเว็บ

6. ทำซ้ำขั้นตอนก่อนหน้าสำหรับแต่ละแฟ้มรูปภาพที่คุณมี

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

   1. ให้ ชื่อ ที่มีความหมายแก่ทรัพยากรใหม่

   2. ตั้งค่า ชนิด เป็น สคริปต์ (JScript)

   3. เลือก ตัวแก้ไขข้อความ (ถัดจากการตั้งค่า ชนิด ) เพื่อเปิดหน้าต่างของตัวแก้ไขข้อความ วางโค้ด JavaScript ของคุณที่นี่ และเลือก ตกลง เพื่อบันทึกโค้ดนั้น

   4. เพิ่ม ชื่อที่แสดง และ/หรือ คำอธิบาย ถ้าคุณต้องการ

   5. เลือก บันทึก แล้วปิดหน้าต่าง ทรัพยากรบนเว็บ

8. ขณะแท็บโซลูชันยังคงเปิดอยู่ ให้ขยายผัง ส่วนประกอบ>ตาราง และค้นหาตารางที่คุณต้องการปรับแต่ง

9. ขยายตารางของคุณและเลือกไอคอน มุมมอง

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

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

    • ทรัพยากรบนเว็บ: ระบุชื่อของทรัพยากรบนเว็บที่คุณสร้างขึ้นเพื่อเก็บฟังก์ชัน JavaScript ของคุณ (เลือก เรียกดู เพื่อเลือกจากรายการ)

    • ชื่อฟังก์ชัน: พิมพ์ชื่อของฟังก์ชันที่คุณเขียนเพื่อปรับเปลี่ยนคอลัมน์และมุมมองที่เลือก

12. เลือก ตกลง เพื่อปิดกล่องโต้ตอบ เปลี่ยนแปลงคุณสมบัติของคอลัมน์

13. เลือก บันทึกและปิด เพื่อบันทึกมุมมองของคุณ

14. ทำซ้ำขั้นตอนเหล่านี้สำหรับแต่ละตาราง มุมมอง และคอลัมน์ ตามความจำเป็น

15. เมื่อคุณพร้อม ให้เลือก เผยแพร่การปรับแต่งทั้งหมด เพื่อเผยแพร่การเปลี่ยนแปลงของคุณ จากนั้นปิดหน้าต่าง Default Solution।

ฟังก์ชัน JavaScript ตัวอย่าง

ฟังก์ชัน JavaScript สําหรับการแสดงไอคอนแบบกําหนดเองและคําแนะนําเครื่องมือต้องใช้อาร์กิวเมนต์สองรายการต่อไปนี้: ออบเจ็กต์ของแถวทั้งหมดที่ระบุใน layoutxml และ Locale ID (LCID) ของผู้ใช้ที่เรียกใช้ พารามิเตอร์ LCID ช่วยให้คุณสามารถระบุข้อความคำแนะนำเครื่องมือในหลายภาษา สําหรับข้อมูลเพิ่มเติมเกี่ยวกับภาษาที่สนับสนุน ดูตัวเลือกภูมิภาคและภาษาสําหรับสภาพแวดล้อมของคุณ สำหรับรายการของค่ารหัสตำแหน่งที่ตั้ง (LCID) ที่คุณสามารถใช้ในรหัสของคุณ โปรดดู รหัสตำแหน่งที่ตั้งที่กำหนดโดย Microsoft

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

ตัวอย่างโค้ดต่อไปนี้แสดงไอคอนและคำแนะนำเครื่องมือที่ขึ้นอยู่กับค่าใดค่าหนึ่งในสามค่า (1: ร้อน 2: อุ่น 3: เย็น) ในแอตทริบิวต์ opportunityratingcode (การจัดอันดับ) รหัสตัวอย่างยังแสดงวิธีการแสดงข้อความคำแนะนำเครื่องมือที่แปลเป็นภาษาท้องถิ่นด้วย เพื่อที่จะนำตัวอย่างนี้ไปใช้งาน คุณต้องสร้างทรัพยากรบนเว็บที่เป็นรูปภาพสามรายการพร้อมกับรูปภาพขนาด 16 x 16 ที่มีชื่อดังต่อไปนี้: new_Hot, new_Warm และ new_Cold

function displayIconTooltip(rowData, userLCID) {      
    var str = JSON.parse(rowData);  
    var coldata = str.opportunityratingcode_Value;  
    var imgName = "";  
    var tooltip = "";  
    switch (parseInt(coldata,10)) { 
        case 1:  
            imgName = "new_Hot";  
            switch (userLCID) {  
                case 1036:  
                    tooltip = "French: Opportunity is Hot";  
                    break;  
                default:  
                    tooltip = "Opportunity is Hot";  
                    break;  
            }  
            break;  
        case 2:  
            imgName = "new_Warm";  
            switch (userLCID) {  
                case 1036:  
                    tooltip = "French: Opportunity is Warm";  
                    break;  
                default:  
                    tooltip = "Opportunity is Warm";  
                    break;  
            }  
            break;  
        case 3:  
            imgName = "new_Cold";  
            switch (userLCID) {  
                case 1036:  
                    tooltip = "French: Opportunity is Cold";  
                    break;  
                default:  
                    tooltip = "Opportunity is Cold";  
                    break;  
            }  
            break;  
        default:  
            imgName = "";  
            tooltip = "";  
            break;  
    }  
    var resultarray = [imgName, tooltip];  
    return resultarray;  
}  

พฤติกรรมการแสดงมุมมองไอคอนที่กำหนดเอง

คอลัมน์หลัก

ในมุมมองรายการแบบตาราง ไอคอนแบบกำหนดเองที่ใช้กับคอลัมน์หลักของตารางจะแทนที่ไอคอนเริ่มต้นที่ระบบสร้างขึ้น

คอลัมน์อื่น ๆ

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

ฟอร์มบัตร

ไอคอนที่กำหนดเองแทนที่ไอคอนเริ่มต้นที่ระบบสร้างขึ้นเมื่อมีการกำหนดค่ามุมมองให้ใช้แบบฟอร์มการ์ด

ดูเพิ่มเติม

ทำความเข้าใจมุมมองของแอปที่ขับเคลื่อนด้วยโมเดล