Anzeigen von benutzerdefinierten Symbolen in Dynamics-365-Views

Habt ihr schon gewusst, dass in Dynamics-365-Ansichten benutzerdefinierte Symbole neben Optionswerten angezeigt werden können? Wir nutzen das unter anderem bei Leads und Verkaufschancen als visuelle Unterstützung, damit unser Vertrieb in großen Ansichten besser zwischen vielversprechenden und weniger vielversprechenden Leads oder Verkaufschancen unterscheiden kann.

Darüber bin ich das erste Mal beim Durchstöbern der Microsoft Docs gestolpert.

Ich zeige euch heute, wie wir das bei uns ein- und umgesetzt haben.

Icons bereitstellen

Ladet zunächst die gewünschten Symbole als Webressourcen mit entsprechendem Typ hoch. Icons im PNG-Format mit einer Größe von 16×16 Pixel werden hierfür empfohlen, da diese sowohl im klassischen als auch im Unified Interface dargestellt werden können. Bei uns funktioniert das Ganze in Unified Interface mit SVG-Grafiken sehr gut, wobei diese auf jedem Bildschirm und Gerät schön scharf dargestellt werden. Merkt euch die Schema-Namen der Icons – diese werden später noch benötigt.

Logik bereitstellen

Die Logik für die Zuordnung der Symbole zu den Optionswerten muss in JavaScript erbracht werden. Erstellt dazu eine weitere Webressource mit dem Typ Script (JScript). Das Skript muss mindestens eine Funktion enthalten, die später automatisch beim Rendern einer Reihe in der Ansicht aufgerufen wird und die Logik für die Darstellung der Icons in der entsprechenden Spalte übernimmt.

Das System übergibt zwei Parameter an diese Funktion – die Daten aller Spalten der aktuellen Reihe als Array (rowData) und die Sprache des Benutzers als numerischen Wert (userLCID). Aus rowData kann der aktuelle Optionswert der entsprechenden Spalte ausgelesen werden. Über diesen kann dann die Auswertung erfolgen, welches Icon dazu angezeigt werden soll. Weiter kann ein Beschreibungstext spezifiziert werden, der beim Hovern mit der Maus über das Icon in der Ansicht als Tooltip angezeigt wird. Dieser kann auf Basis der userLCID auf die Sprache des aktuellen Benutzers abgestimmt werden. Als Rückgabewert der Funktion erwartet das System ein Array, das an erster Stelle den Schema-Namen der anzuzeigenden Icon-Webressource und an zweiter Stelle den Beschreibungstext für den Tooltip – beides String-Werte – enthält.

Unser Skript hierfür ist beispielhaft nachfolgendem Gist zu entnehmen. Wir haben dabei die zuvor beschriebene Funktion entsprechend parametrisiert und hinterlegen in den jeweiligen Ansichten dann einen der beiden dedizierten Callbacks (siehe nächster Abschnitt).

/*
 * @author Tobias Heilig <the@objektkultur.de>
 * 
 * Visualisierung von Bewertungsoptionen (rot, gelb, grün) in Lead- und Verkaufschancenansichten.
 */

/* Webressource, die die skalierbare Vektorgrafik für eine grüne Bewertung enthält. */
var RATINGCODE_GREEN_ICON_NAME  = "ok_ratingcode_green_icon"

/* Webressource, die die skalierbare Vektorgrafik für eine gelbe Bewertung enthält. */
var RATINGCODE_YELLOW_ICON_NAME = "ok_ratingcode_yellow_icon"

/* Webressource, die die skalierbare Vektorgrafik für eine rote Bewertung enthält. */
var RATINGCODE_RED_ICON_NAME = "ok_ratingcode_red_icon"

/* Webressource, die die skalierbare Vektorgrafik für eine nicht vorhandene Bewertung enthält. */
var RATINGCODE_NONE_ICON_NAME = "ok_ratingcode_none_icon"

/*
 * Callback für Lead-Ansichten.
 * @param rowData - Spalten der aktuellen Reihe.
 * @param userLCID - Sprachcode des Benutzers.
 */
function displayLeadRatingcode(rowData, userLCID) {
    return displayRatingcodeIcons(rowData, userLCID,
        "ok_leadratingcode_options_Value", /* Optionsfeld für Leadbewertungen */
        100000000, /* Optionswert für grüne Leadbewertung */
        100000001, /* Optionswert für gelbe Leadbewertung */
        100000002) /* Optionswert für rote Leadbewertung */
}

/*
 * Callback für Verkaufschancenansichten.
 * @param rowData - Spalten der aktuellen Reihe.
 * @param userLCID - Sprachcode des Benutzers.
 */
function displayOpportunityRatingcode(rowData, userLCID) {
    return displayRatingcodeIcons(rowData, userLCID,
        "opportunityratingcode_Value", /* Optionsfeld für Verkaufschancenbewertungen */
        1, /* Optionswert für grüne Verkaufschancenbewertung */
        2, /* Optionswert für gelbe Verkaufschancenbewertung */
        3) /* Optionswert für rote Verkaufschancenbewertung */
}

/*
 * Rendert die Bewertungssymbole für die entsprechenden Optionsfelder- und werte.
 * @param rowData - Spalten der aktuellen Reihe.
 * @param userLCID - Sprachcode des Benutzers.
 * @param ratingcodeFieldSchemaName - Schemaname des Optionsfelds für die Bewertung.
 * @param greenOptionValue - Optionswert für grüne Bewertung.
 * @param yellowOptionValue - Optionswert für gelbe Bewertung.
 * @param redOptionValue - Optionswert für rote Bewertung.
 */
function displayRatingcodeIcons(rowData, userLCID, ratingcodeFieldSchemaName, greenOptionValue, yellowOptionValue, redOptionValue) {
    var str = JSON.parse(rowData);
    var coldata = str[ratingcodeFieldSchemaName];
    var imgName = "";
    var tooltip = "";

    switch (parseInt(coldata, 10)) {

        case greenOptionValue:

            imgName = RATINGCODE_GREEN_ICON_NAME;
            tooltip = "Grün";
            break;

        case yellowOptionValue:

            imgName = RATINGCODE_YELLOW_ICON_NAME;
            tooltip = "Gelb";
            break;

        case redOptionValue:

            imgName = RATINGCODE_RED_ICON_NAME;
            tooltip = "Rot";
            break;

        default:

            imgName = RATINGCODE_NONE_ICON_NAME;
            tooltip = "Keine Bewertung";
            break;
    }

    var resultarray = [imgName, tooltip];

    return resultarray;
}

Mit Ansicht verknüpfen

Wie bereits erwähnt müsst ihr zuletzt noch eure JavaScript-Logik mit der entsprechenden Ansicht und Spalte verknüpfen. Ich habe noch keinen Weg gefunden, dies über die neue Lösungsverwaltung im Browser zu bewerkstelligen. Falls ihr einen kennt, würde ich mich freuen, wenn ihr diesen über Twitter oder in den Kommentaren mit mir teilt! Navigiert andernfalls also über die alten Einstellungen in die Systemanpassung und öffnet die Eigenschaften der entsprechenden Spalte in der Ansicht, in der die Icons angezeigt werden sollen.

Dort hinterlegt ihr die Webressource, die eure JavaScript-Logik enthält und registriert die entsprechende Callback-Funktion aus eurem Skript für die entsprechende Spalte.

Das war’s!

Nun sollten die von euch hinterlegten Icons neben den entsprechenden Optionswerten der Spalte, wie zu Anfangs gezeigt, in der Ansicht erscheinen.

Habt ihr das schon gekannt? Dann würde mich interessieren, wo und wie ihr das bei euch oder euren Kunden schon eingesetzt habt! Oder kennt ihr einen Weg, das über die neue Umgebung zu bewerkstelligen? Ich würde mich freuen, wenn ihr eure Ideen und Tipps mit mir auf Twitter oder in den Kommentaren teilt.