Tampilkan ikon kustom bersama nilai-nilai dalam tampilan daftar

Administrator lingkungan dan penyesuai Power Apps dapat menambahkan grafis ke tampilan dan menetapkan logika yang digunakan untuk memilih grafis berdasarkan nilai kolom yang menggunakan JavaScript. Kemampuan ini memungkinkan Anda menyesuaikan tampilan daftar yang menampilkan ikon bersama teks atau nilai angka.

Contoh ini menampilkan ikon kustom di tampilan untuk tabel peluang yang tersedia dengan aplikasi tertentu, seperti Dynamics 365 Sales. Anda dapat menampilkan ikon kustom dalam tampilan dengan tabel standar lainnya, seperti tabel akun atau kontak, serta tabel kustom.

Semua Peluang ditampilkan dengan kolom Peringkat yang menampilkan ikon dan nilai teks.

Ikon kustom dalam tampilan daftar dapat ditampilkan di aplikasi berbasis model, aplikasi seluler, dan Aplikasi untuk Outlook.

Catatan

  • Ikon kustom tidak tersedia saat aplikasi dalam mode offline seluler.
  • Penyesuaian ini saat ini hanya dapat diselesaikan dengan menggunakan penjelajah solusi klasik.

Tambahkan grafis kustom dan JavaScript sebagai sumber daya web

  1. Buat file grafis baru yang diperlukan untuk kustomisasi Anda. Kami merekomendasikan ukuran ikon 16 x 16 piksel (gambar yang lebih besar akan dikecilkan).

  2. Tulis satu atau beberapa fungsi JavaScript yang menetapkan ikon mana yang akan ditampilkan untuk nilai mana (Anda biasanya memerlukan satu fungsi untuk setiap kolom yang ingin Anda sesuaikan). Masing-masing fungsi harus menerima sebuah objek data baris dan kode bahasa (LCID) sebagai masukan dan menghasilkan larik yang berisi nama gambar dan teks tooltip. Untuk contoh fungsi, lihat Contoh fungsi JavaScript, nanti dalam artikel ini.

  3. Masuk ke lingkungan Anda dan buka Penjelajah Solusi.

  4. Tab solusi terbuka. Buka Sumber Daya Web Komponen>.

  5. Sekarang, unggah grafik kustom Anda, satu per satu, sebagai sumber daya web. Pilih Baru di toolbar untuk membuat sumber daya web baru. Jendela pop-up terbuka untuk membantu Anda membuat sumber daya. Ikuti langkah berikut:

    1. Berikan resource baru Nama yang bermakna. Ini adalah nama yang Anda gunakan untuk merujuk ke setiap grafik dari kode JavaScript Anda.

    2. Atur Jenis ke format grafis yang Anda gunakan untuk menyimpan file grafis (PNG, JPEG, atau GIF).

    3. Pilih Pilih File untuk membuka jendela browser file. Gunakan itu untuk menemukan dan memilih file grafis.

    4. Tambahkan Nama Tampilan dan/atau Deskripsi jika Anda mau.

    5. Pilih Simpan , lalu tutup jendela Sumber Daya Web .

  6. Ulangi langkah sebelumnya untuk setiap file grafis yang Anda miliki.

  7. Sekarang, tambahkan JavaScript Anda sebagai sumber daya web akhir. Pilih Baru di toolbar untuk membuat sumber daya web baru. Jendela pop-up yang lain terbuka untuk membantu Anda membuat sumber daya. Lakukan hal-hal berikut:

    1. Berikan resource baru Nama yang bermakna.

    2. Atur Jenis ke Skrip (JScript).

    3. Pilih Editor Teks (di samping pengaturan Jenis ) untuk membuka jendela editor teks. Tempelkan kode JavaScript Anda di sini dan pilih OK untuk menyimpannya.

    4. Tambahkan Nama Tampilan dan/atau Deskripsi jika Anda mau.

    5. Pilih Simpan , lalu tutup jendela Sumber Daya Web .

  8. Dengan tab solusi masih terbuka, perluas hierarki Tabel Komponen> dan temukan tabel yang ingin Anda sesuaikan.

  9. Perluas tabel Anda dan pilih ikon Tampilan .

  10. Anda sekarang melihat daftar tampilan untuk tabel yang Anda pilih. Pilih lihat dari daftar. Kemudian buka daftar drop-down Tindakan Lainnya di bilah alat dan pilih Edit.

  11. Jendela pop-up yang akan terbuka dengan kontrol untuk mengedit tampilan yang dipilih. Ini menunjukkan setiap kolom yang merupakan bagian dari tampilan. Pilih kolom target, lalu pilih Ubah Properti di kotak Tugas Umum . Dialog Ubah Properti Kolom terbuka; buat pengaturan berikut di sini:

    • Sumber Daya Web: Tentukan nama sumber daya web yang Anda buat untuk menyimpan fungsi JavaScript Anda (pilih Telusuri untuk memilih dari daftar).

    • Nama Fungsi: Ketik nama fungsi yang Anda tulis untuk mengubah kolom dan tampilan yang dipilih.

  12. Pilih OK untuk menutup dialog Ubah Properti Kolom .

  13. Pilih Simpan dan Tutup untuk menyimpan tampilan Anda.

  14. Ulangi langkah ini untuk setiap tabel, tampilan, dan bidang sesuai kebutuhan.

  15. Setelah siap, pilih Terbitkan Semua Penyesuaian untuk menerbitkan perubahan Anda. Kemudian, tutup jendela Solusi Default .

Fungsi JavaScript sampel

Fungsi JavaScript untuk menampilkan ikon kustom dan tooltips mengharapkan dua argumen berikut: objek seluruh baris yang ditentukan dalam layoutxml dan Locale ID pengguna yang menelepon (LCID). LCID parameter memungkinkan Anda untuk menentukan teks tooltip dalam berbagai bahasa. Untuk informasi selengkapnya tentang bahasa yang didukung oleh lingkungan, lihat Mengaktifkan bahasa dan Menginstal atau meningkatkan paket bahasa. Untuk daftar nilai ID lokal (LCID) yang dapat Anda gunakan dalam kode Anda, lihat ID lokal yang ditetapkan oleh Microsoft.

Dengan asumsi Anda menambahkan ikon kustom untuk jenis atribut set opsi, yang memiliki serangkaian opsi yang telah ditentukan sebelumnya yang terbatas, pastikan Anda menggunakan nilai bilangan bulat opsi, bukan label untuk menghindari masalah pelokalan.

Catatan

Jika perlu mengambil data untuk menentukan ikon, Antarmuka Terpadu mendukung pengembalian objek Janji JavaScript, yang diselesaikan menjadi boolean (mirip dengan aturan pita). Jangan gunakan sinkron( XMLHttpRequest XHR) dalam fungsi kustom Anda.

Kode sampel menampilkan ikon dan tooltip berdasarkan salah satu dari tiga nilai (1: Panas, 2: Hangat, 3: Dingin) dalam opportunityratingcode atribut (Rating). Kode contoh juga menunjukkan bagaimana untuk menampilkan teks tooltip lokal. Agar contoh ini bekerja, Anda harus membuat tiga sumber daya web image dengan gambar 16 x 16 dengan nama berikut: new_Hot, new_Warm, dan new_Cold.

Penting

Sampel ini memerlukan tabel 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;  
}  

Perilaku tampilan ikon kustom

Kolom utama

Di tampilan daftar kisi, ikon kustom yang diterapkan ke kolom utama tabel menggantikan ikon default yang dibuat sistem.

Kolom utama menggantikan ikon default dalam tampilan ikon kustom.

Kolom lain

Di tampilan daftar kisi, ikon kustom yang diterapkan ke kolom yang tidak menampilkan kolom utama tabel sebagai ikon sekunder, selain ikon default yang dihasilkan sistem.

Bukan tampilan ikon kustom kolom utama tabel.

Formulir kartu

Ikon kustom menggantikan ikon yang dihasilkan sistem default saat tampilan dikonfigurasi untuk menggunakan formulir kartu.

Tampilan ikon kustom tampilan kartu.

Baca juga

Memahami tampilan aplikasi berbasis model