Kongsi melalui


Tambah ikon tersuai pada pandangan senarai

Topik ini digunakan untuk Dynamics 365 Customer Engagement (on-premises). Untuk versi Power Apps topik ini, rujuk: Paparkan ikon tersuai bersama nilai dalam pandangan senarai

Pentadbir dan penyesuai boleh menambah grafik pada pandangan dan mewujudkan logik yang digunakan untuk memilih grafik berdasarkan pada nilai lajur menggunakan JavaScript. Keupayaan ini membolehkan anda menyesuaikan pandangan senarai yang memaparkan ikon bersama teks atau nilai berangka, seperti dalam lajur Penarafan ini dalam pandangan Semua Peluang .

Semua paparan Peluang dengan lajur Penilaian memaparkan ikon dan nilai teks.

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

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. Untuk fungsi contoh, lihat Contoh fungsi JavaScript, kemudian dalam topik ini.

  3. Daftar masuk ke dalam persekitaran anda sebagai pentadbir dan bukan penjelajah penyelesaian.

  4. Tetingkap timbul Penyelesaian Lalai dibuka. Navigasi ke Sumber>Web Komponen 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. Lakukan yang berikut:

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

    2. Tetapkan Jenis kepada 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 Penerangan 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 sumber baharu Nama yang bermakna.

    2. Tetapkan Jenis kepada 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 Penerangan jika anda mahu.

    5. Pilih Simpan dan kemudian tutup tetingkap Sumber Web.

  8. Dengan tetingkap timbul Penyelesaian Lalai masih terbuka, kembangkan pokok Entiti Komponen> dan cari entiti yang anda mahu sesuaikan.

  9. Kembangkan entiti anda dan pilih ikon Pandangannya .

  10. Anda kini nampak senarai pandangan untuk entiti yang anda pilih. Pilih pandangan daripada senarai. Kemudian buka senarai juntai bawah Lagi 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 lajur sasaran dan kemudian pilih Ubah Sifat dalam kotak Tugas Biasa. Dialog Tukar 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 Tukar Sifat Lajur .

  13. Pilih Simpan dan Tutup untuk menyimpan paparan anda.

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

  15. Apabila anda sudah 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 maklumat lanjut tentang bahasa yang disokong oleh persekitaran, lihat Dayakan bahasa dan Pasang atau naik taraf pek bahasa untuk Dynamics 365 for Customer Engagement. Untuk senarai nilai ID tempatan (LCID) yang boleh anda gunakan dalam kod anda, lihat ID tempatan yang diperuntukkan 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 semula data untuk menentukan ikon, Antara Muka Disatukan menyokong pengembalian objek Janji JavaScript yang diselesaikan kepada boolean (serupa dengan 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.

"use strict";

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

Lihat juga

Cipta atau edit pandangan