Aracılığıyla paylaş


Liste görünümüne özel simgeler ekleme

Bu konu, Dynamics 365 Customer Engagement (on-premises) için geçerlidir. Bu konunun Power Apps sürümü için bkz: Liste görünümlerinde değerlerin yanı sıra özel simgeleri görüntüleme

Yöneticiler ve özelleştiriciler bir görünüme grafik ekleyebilir ve JavaScript'i kullanarak sütun değerine göre grafiği seçmek için kullanılan mantığı oluşturabilir. Bu özellik Tüm Fırsatlar görünümündeki bu Derecelendirme sütunundaki gibi metin veya sayısal değerlerin yanı sıra simgeleri de gösteren liste görünümlerini özelleştirmenizi sağlar.

Simgeleri ve metin değerini görüntüleyen Derecelendirme sütunuyla Tüm Fırsatlar görünümü.

Liste görünümlerindeki özel simgeler Birleşik Arabirim, klasik web istemcisi, mobil uygulama ve App for Outlook'ta görüntülenebilir.

Web kaynakları olarak özel grafikler ve JavaScript ekleme

  1. Özelleştirmeniz için gereken yeni grafik dosyalarını oluşturun. 16x16 piksel simge boyutunu öneririz (büyük resimler aşağı doğru ölçeklendirilir).

  2. Hangi simgelerin hangi değerleri göstereceğini oluşturan bir veya daha fazla JavaScript işlevi yazın (genellikle özelleştirmek istediğiniz her sütun için bir işleve ihtiyaç duyarsınız). Her işlev girdi olarak bir satır veri nesnesi ve bir dil (LCID) kodu kabul etmeli ve görüntü adını ve araç ipucu metnini içeren bir diziye dönmelidir. Örnek bir işlev için bu konunun ileriki bölümünde bkz. Örnek JavaScript fonksiyonu.

  3. Ortamınızda bir yönetici olarak oturum açın ve çözüm gezginini açın.

  4. Varsayılan Çözüm açılır penceresi belirir. Buradan, Bileşenler>Web Kaynakları'na gidin.

  5. Şimdi, her defasında bir özel grafiği web kaynağı olarak karşıya yükleyebilirsiniz. Yeni bir web kaynağı oluşturmak için Yeni düğmesini seçin. Kaynağı oluşturmanıza yardımcı olmak için başka bir açılır pencere açılır. Aşağıdakileri yapın:

    1. Yeni kaynağa anlamlı bir Ad verin. Bu, JavaScript kodunuzdan her bir grafiğe başvurmanız için kullanacağınız addır.

    2. Grafik dosyanızı (PNG, JPEG, veya GIF) kaydetmek amacıyla kullandığınız grafik biçimini Tür olarak ayarlayın.

    3. Dosya tarayıcı penceresi açmak için Dosya Seç öğesini seçin. Grafik dosyanızı bulmak ve seçmek için kullanın.

    4. İsterseniz bir Görünen Ad ve/veya Açıklama ekleyin.

    5. Kaydet'i seçin ve ardından Web Kaynağı penceresini kapatın.

  6. Sahip olduğunuz her grafik dosyası için önceki adımı tekrarlayın.

  7. Şimdi, son web kaynağı olarak JavaScript'inizi ekleyin. Yeni bir web kaynağı oluşturmak için araç çubuğunda Yeni öğesini seçin. Kaynağı oluşturmanıza yardımcı olmak için başka bir açılır pencere açılır. Aşağıdakileri yapın:

    1. Yeni kaynağa anlamlı bir Ad verin.

    2. TürKomut Dosyası (JScript) olarak ayarlayın.

    3. Metin düzenleyicisi penceresini açmak için Metin Düzenleyicisi'ni (Tür ayarının yanında) seçin. JavaScript kodunuzu buraya yapıştırın ve kaydetmek için Tamam'ı seçin.

    4. İsterseniz bir Görünen Ad ve/veya Açıklama ekleyin.

    5. Kaydet'i seçin ve ardından Web Kaynağı penceresini kapatın.

  8. Varsayılan Çözüm açılır penceresi hala açıkken Bileşenler>Varlıklar ağacını genişletin ve özelleştirmek istediğiniz varlığı bulun.

  9. Varlığınızı genişletin ve Görünümler simgesini seçin.

  10. Şimdi de seçtiğiniz varlık için görünümler listesini görürsünüz. Listeden bir görünüm seçin. Sonra araç çubuğundaki Diğer Eylemler açılan listesini açın ve Düzenle'yi seçin.

  11. Seçilen görünümünüzü düzenlemek için denetimlerle bir açılır pencere belirir. Görünümün bir parçası olan her bir sütunu gösterir. Hedef sütunu seçin ve ardından Ortak Görevler kutusunda Özellikleri Değiştir öğesini seçin. Sütun Özelliklerini Değiştir iletişim kutusu açılır, burada şu ayarları yapın:

    • Web Kaynağı: JavaScript işlevlerinizi tutmak için oluşturduğunuz web kaynağının adını belirtin (listeden seçmek için Gözat öğesini seçin).

    • Fonksiyon Adı: Seçilen sütunu ve görünümü değiştirmek için yazdığınız işlevin adını yazın.

  12. Tamam'ı seçerek Sütun Özelliklerini Değiştir iletişimini kapatın.

  13. Görünümünüzü kaydetmek için Kaydet ve Kapat'ı seçin.

  14. Gerektiğinde her bir varlık, görünüm ve sütun için bu adımları yineleyin.

  15. Hazır olduğunuzda, değişikliklerinizi yayımlamak için Tüm Özelleştirmeleri Yayımla'yı seçin. Ardından, Varsayılan Çözüm penceresini kapatın.

Örnek JavaScript işlevi

Özel simgeleri ve araç ipuçlarını görüntüleyen JavaScript işlevinden şu iki diyalog beklenir: layoutxml öğesinde belirtilen tüm satır nesnesi ve çağıran kullanıcının Yerel Kimliği (LCID). LCID parametresi araç ipucu metnini birden çok dilde belirtmenizi sağlar. Ortam tarafından desteklenen diller hakkında daha fazla bilgi için bkz. Dilleri etkinleştirme ve Dynamics 365 for Customer Engagement için dil paketlerini yükleme veya yükseltme. Kodunuzda kullanabileceğiniz yerel kimlik (LCID) değerlerinin listesi için bkz. Microsoft Tarafından atanan Yerel Kimlikler.

Önceden tanımlanmış sınırlı sayıda seçenekleri olan bir özniteliğin seçenek ayar türü için özel simgeler ekleyeceğinizi varsayarsak, yerelleştirme sorunlarını önlemek için etiket yerine seçeneklerin tam sayı değerini kullandığınızdan emin olun.

Not: Simgeyi belirlemek için veri almanız gerekiyorsa, Birleşik Arabirim boole değerine çözümlenen (şerit kurallarına benzer şekilde) bir JavaScript Promise nesnesini döndürmeyi destekler. Özel işlevinizde zaman uyumlu XMLHttpRequest (XHR) kullanmayın.

Aşağıdaki örnek kod, opportunityratingcode (Derecelendirme) özniteliği içinde simgeleri ve araç ipuçlarını üç değerden birine (1: Sıcak, 2: Ilık, 3: Soğuk) göre görüntüler. Örnek kod ayrıca yerelleştirilmiş araç ipucu metninin nasıl görüntülendiğini gösterir. Bu örnek ile çalışmak için 16x16 görüntülerle üç web kaynağını şu adlarda oluşturmanız gerekir: new_Hot, new_Warm ve 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;  
}  

Ayrıca bkz.

Görünüm oluşturma veya düzenleme