Paparkan ikon tersuai bersama nilai dalam pandangan senarai

Pentadbir dan penyesuai persekitaran Power Apps boleh menambah grafik pada pandangan dan mewujudkan logik yang digunakan untuk memilih grafik berdasarkan nilai lajur menggunakan JavaScript. Keupayaan tersebut membolehkan anda menyesuaikan pandangan senarai yang memaparkan ikon bersama-sama teks atau nilai angka.

Contoh ini memaparkan ikon tersuai dalam pandangan untuk jadual peluang yang tersedia dengan aplikasi tertentu seperti Dynamics 365 Sales. Anda boleh memaparkan ikon tersuai dalam pandangan dengan jadual standard yang lain seperti jadual akaun atau kenalan serta jadual tersuai.

Pandangan Semua Peluang dengan lajur Penarafan yang memaparkan ikon dan nilai teks.

Ikon tersuai dalam pandangan senarai boleh dipaparkan dalam Antara Muka Disatukan, klien web legasi, aplikasi mudah alih dan Aplikasi untuk Outlook.

Nota

Ikon tersuai tidak tersedia apabila apl berada dalam mod mudah alih luar talian.

Tambah grafik tersuai dan JavaScript sebagai sumber web

  1. Cipta fail grafik baharu yang diperlukan untuk penyesuaian anda. Kami mengesyorkan saiz ikon 16x16 piksel (imej lebih besar akan dikecilkan).

  2. Tulis satu atau lebih fungsi JavaScript yang menetapkan ikon yang akan ditunjukkan untuk nilai tertentu (anda biasanya memerlukan satu fungsi untuk setiap lajur yang anda mahu sesuaikan). Setiap fungsi mesti menerima objek data baris dan kod bahasa (LCID) sebagai input dan mengembalikan tatasusunan yang mengandungi nama imej dan teks petua alat. Bagi fungsi contoh, lihat Fungsi sampel JavaScript, kemudian dalam artikel ini.

  3. Daftar ke dalam persekitaran anda sebagai pentadbir dan buka peneroka penyelesaian.

  4. Tetingkap timbul Penyelesaian Lalai dibuka. Navigasi ke Komponen > Sumber Web di sini.

  5. Sekarang, anda akan memuat naik grafik tersuai anda, satu demi satu, sebagai sumber web. Pilih butang Baharu dalam bar alat untuk mencipta sumber web baharu. Tetingkap timbul lain dibuka untuk membantu anda mencipta sumber. Ikuti langkah-langkah ini:

    1. Berikan Nama yang bermakna untuk sumber baharu. Ini ialah nama yang akan anda gunakan untuk merujuk setiap grafik daripada kod JavaScript anda.

    2. Tetapkan Jenis untuk format grafik yang telah anda gunakan untuk menyimpan fail grafik anda (PNG, JPEG atau GIF).

    3. Pilih Pilih Fail untuk membuka tetingkap pelayar fail. Gunakannya untuk mencari dan memilih fail grafik anda.

    4. Tambah Nama Paparan dan/atau Perihalan jika anda mahu.

    5. Pilih Simpan dan kemudian tutup tetingkap Sumber Web.

  6. Ulang langkah sebelumnya untuk setiap fail grafik yang anda ada.

  7. Sekarang, anda akan menambah JavaScript anda sebagai sumber web yang akhir. Pilih Baharu pada bar alat untuk mencipta sumber web baharu. Tetingkap timbul lain dibuka untuk membantu anda mencipta sumber. Lakukan yang berikut:

    1. Berikan Nama yang bermakna untuk sumber baharu.

    2. Tetapkan Jenis untuk Skrip (JScript).

    3. Pilih Editor Teks (di sebelah tetapan Jenis) untuk membuka tetingkap editor teks. Tampal kod Javascript anda di sini dan pilih OK untuk menyimpannya.

    4. Tambah Nama Paparan dan/atau Perihalan jika anda mahu.

    5. Pilih Simpan dan kemudian tutup tetingkap Sumber Web.

  8. Dengan tetingkap timbul Penyelesaian Lalai masih terbuka, kembangkan pohon Komponen > Jadual dan cari jadual yang anda mahu sesuaikan.

  9. Kembangkan jadual anda dan pilih ikon Pandangannya.

  10. Anda kini melihat senarai pandangan untuk jadual yang anda pilih. Pilih pandangan daripada senarai. Kemudian buka senarai juntai bawah Lebih Banyak Tindakan dalam bar alat dan pilih Edit.

  11. Tetingkap timbul dibuka dengan kawalan untuk mengedit pandangan yang anda pilih. Ia menunjukkan setiap lajur yang merupakan sebahagian daripada pandangan. Pilih untuk memilih lajur sasaran dan kemudian pilih Ubah Sifat dalam kotak Tugas Biasa. Dialog Ubah Sifat Lajur dibuka; buat tetapan berikut di sini:

    • Sumber Web: Tentukan nama sumber web yang anda cipta untuk menyimpan fungsi Javascript anda (pilih Layari untuk memilih daripada senarai).

    • Nama Fungsi: Taipkan nama fungsi yang anda tulis untuk mengubah suai lajur dan pandangan yang dipilih.

  12. Pilih OK untuk menutup dialog Ubah Sifat Lajur.

  13. Pilih Simpan dan Tutup untuk menyimpan pandangan anda.

  14. Ulang langkah ini untuk setiap jadual, pandangan dan lajur yang diperlukan.

  15. Apabila anda bersedia, pilih Terbitkan Semua Penyesuaian untuk menerbitkan perubahan anda. Kemudian, tutup tetingkap Penyelesaian Lalai.

Fungsi JavaScript sampel

Fungsi JavaScript untuk memaparkan ikon tersuai dan petua alat menjangkakan dua argumen berikut: seluruh objek baris yang dinyatakan dalam layoutxml dan ID Setempat pengguna panggilan (LCID). Parameter LCID membolehkan anda menentukan teks petua alat dalam berbilang bahasa. Untuk mendapatkan maklumat lanjut tentang bahasa yang disokong oleh persekitaran , lihat Dayakan bahasa dan Pasang atau naik taraf pek bahasa. Untuk senarai nilai ID tempatan (LCID) yang boleh anda gunakan dalam kod anda, lihat ID Tempatan yang ditugaskan oleh Microsoft .

Dengan andaian anda akan menambah ikon tersuai untuk jenis atribut pilihan set, yang mempunyai set pilihan dipratentukan terhad, pastikan anda menggunakan nilai integer pilihan dan bukannya label untuk mengelakkan isu penyetempatan.

Nota: Jika perlu untuk mendapatkan data bagi menentukan ikon, Antara Muka Disatukan menyokong pengembalian objek JavaScript Promise yang diselesaikan kepada boolean (seperti peraturan reben). Jangan gunakan XMLHttpRequest (XHR) segerak dalam fungsi tersuai anda.

Kod sampel berikut memaparkan ikon dan petua alat berdasarkan satu daripada tiga nilai (1: Panas, 2: Hangat, 3: Sejuk) dalam atribut (Rating) opportunityratingcode. Kod sampel juga menunjukkan cara untuk memaparkan teks petua tip yang disetempatkan. Untuk sampel ini berfungsi, anda mesti mencipta tiga sumber web imej dengan imej 16x16 dengan nama berikut: new_Hot, new_Warm, dan new_Cold.

Penting

Sampel ini memerlukan jadual peluang yang tersedia dengan aplikasi Dynamics 365 Sales.

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;  
}  

Tingkah laku paparan pandangan ikon tersuai

Lajur utama

Dalam pandangan senarai grid, ikon tersuai yang digunakan pada lajur utama jadual menggantikan ikon yang dijana oleh sistem lalai.

Lajur utama menggantikan ikon lalai dalam pandangan ikon tersuai.

Lajur lain

Dalam pandangan senarai grid, ikon tersuai yang digunakan pada lajur yang bukan dipaparkan oleh lajur utama sebagai ikon sekunder sebagai tambahan kepada ikon yang dijana oleh sistem lalai.

Pandangan ikon tersuai lajur utama bukan jadual.

Borang kad

Ikon tersuai menggantikan ikon yang dijana oleh sistem lalai apabila pandangan dikonfigurasikan untuk menggunakan borang kad.

Pandangan ikon tersuai pandangan kad.

Lihat juga

Fahami pandangan aplikasi dipacu model

Nota

Adakah anda boleh memberitahu kami tentang keutamaan bahasa dokumentasi anda? Jawab tinjauan pendek. (harap maklum bahawa tinjauan ini dalam bahasa Inggeris)

Tinjauan akan mengambil masa lebih kurang tujuh minit. Tiada data peribadi akan dikumpulkan (pernyataan privasi).