Bagikan melalui


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.

Tampilan semua peluang dengan kolom nilai yang menampilkan ikon dan nilai teks.

Ikon kustom dalam tampilan daftar dapat ditampilkan di Antarmuka Terpadu, klien web lama, aplikasi seluler, dan App for Outlook.

Catatan

Ikon kustom tidak tersedia saat aplikasi dalam mode mobile offline.

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 lebih fungsi JavaScript yang menentukan ikon mana yang menunjukkan nilai-nilai tertentu (Anda biasanya akan membutuhkan satu fungsi untuk setiap kolom yang Anda ingin 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 fungsi JavaScript Sampel nanti dalam artikel ini.

  3. Masuk ke lingkungan Anda sebagai administrator dan membuka penelusur solusi.

  4. Jendela popup Solusi default terbuka. Navigasikan ke komponen > sumber daya Web di sini.

  5. Sekarang, Anda akan meng-upload grafis kustom Anda, satu per satu waktu, sebagai sumber daya web. Pilih tombol Baru di toolbar untuk membuat sumber daya web yang baru. Jendela pop-up yang lain terbuka untuk membantu Anda membuat sumber daya. Ikuti langkah berikut:

    1. Beri nama sumber daya baru dengan Nama yang memiliki arti. Ini adalah nama yang akan Anda gunakan untuk merujuk pada setiap grafis dari kode JavaScript Anda.

    2. Tetapkan jenis untuk format grafis yang Anda telah digunakan untuk menyimpan file grafis Anda (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 inginkan.

    5. Pilih Simpan dan kemudian tutup jendela sumber daya Web.

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

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

    1. Beri nama sumber daya baru dengan Nama yang memiliki arti.

    2. Tetapkan jenis untuk Script (JScript).

    3. Pilih Editor teks (di sebelah pengaturan jenis) untuk membuka jendela editor teks. Paste kode Javascript di sini dan pilih OK untuk menyimpannya.

    4. Tambahkan nama tampilan dan/atau Deskripsi jika Anda inginkan.

    5. Pilih Simpan dan kemudian tutup jendela sumber daya Web.

  8. Dengan jendela pop-up Solusi Default masih terbuka, perluas pohon Komponen > Tabel dan temukan tabel yang Anda ingin 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 tarik-turun 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 browse untuk memilih dari daftar).

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

  12. Pilih OK untuk menutup dialog Properti Ubah Kolom.

  13. Pilih Simpan dan Tutup untuk menyimpan tampilan Anda.

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

  15. Ketika Anda sudah siap, pilih mempublikasikan 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 lebih lanjut tentang bahasa yang didukung oleh lingkungan, lihat mengaktifkan bahasa dan menginstal atau upgrade paket bahasa. Untuk daftar nilai-nilai locale ID (LCID) yang dapat Anda gunakan dalam kode Anda, lihat Locale ID yang ditetapkan oleh Microsoft.

Dengan asumsi Anda akan menambahkan ikon kustom untuk jenis set opsi atribut, yang memiliki terbatas set opsi standar, pastikan Anda menggunakan nilai bilangan bulat pilihan, bukan label untuk menghindari masalah lokalisasi.

catatan: jika perlu untuk mengambil data untuk menentukan ikon, Antarmuka Terpadu mendukung mengembalikan objek JavaScript Promise yang akan menyelesaikan ke boolean (mirip dengan aturan pita). Jangan gunakan sinkronisasi XMLHttpRequest (XHR) dalam fungsi kustom Anda.

Kode contoh berikut Menampilkan ikon dan tooltips berdasarkan salah satu dari tiga nilai (1: panas, 2: hangat, 3: dingin) di atribut opportunityratingcode (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 di 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.

Lihat juga

Memahami tampilan aplikasi berdasarkan model

Catatan

Apa bahasa dokumentasi yang Anda inginkan? Lakukan survei singkat. (perlu diketahui bahwa survei ini dalam bahasa Inggris)

Survei akan berlangsung kurang lebih selama tujuh menit. Tidak ada data pribadi yang dikumpulkan (pernyataan privasi).