Microsoft Dynamics 365 CRM: Grafiken in Ansichtsspalten hinzufügen

5 Min.
01.02.2023

Bild Blogartikel Grafiken Ansichtsspalten(Bildquelle: Canva)

In Microsoft Dynamics 365 werden Datensätze einer Entität (z. B. Kontakte) als Ansicht in Tabellenform/Spalten dargestellt. Diese Auflistung kann je nach Komplexität und Anzahl der Datensätze schon mal unübersichtlich werden. Neben der Möglichkeit, Ansichten zu filtern (z. B. alle Kontakte aus Deutschland) kannst Du ausgewählte Datensätze innerhalb einer Ansicht auch visuell kennzeichnen (z.B. Länderflagge), um die gewünschten Datensätze schneller zu finden.

In diesem Blogartikel zeigen wir Dir anhand zweier Beispiele, wie Du Grafiken basierend auf Feldwerten anzeigen kannst.

 

Beispiel 1: Geschlecht darstellen

In diesem Beispiel zeigen wir, wie Du die Ansicht der Kontakte entsprechend des Geschlechtes in weiblich, männlich oder divers anpassen und anzeigen kannst.

Hier sind kurzgefasst die erforderlichen Schritte:

  • Schritt 1: Erstellen von Bild-Webressourcen
  • Schritt 2: Erstellen von Optionssatz
  • Schritt 3: Erstellen von JavaScript-Webressource
  • Schritt 4: Verknüpfung des Codes mit der Ansicht
Schritt 1: Erstellen von Bild-Webressourcen

Zuerst müssen die Bilder für die Symbole in den Webressourcen gespeichert werden. Navigiere dazu in Deiner Lösung in den Bereich Webressourcen und erstelle für jedes Icon eine neue Webressource. Verwende am besten die Bilder im 16*16-Pixel-PNG-Format.

Microsoft_Dynamics _365_Grafiken_in_Ansichtsspalten_hinzufuegen_Abb1(Bildquelle: infinitas GmbH / bei allen nachfolgenden Darstellungen handelt es sich ebenfalls um Bildquellen der infinitas GmbH)

 
Schritt 2: Erstellen von Optionssatz

Wir benötigen außerdem einen Optionssatz, um die Icons basierend auf den Informationen des Datensatzes ausgewählten Optionen anzuzeigen. Das Feld, das wir in diesem Beispiel verwenden, ist das standardmäßige Feld für das Geschlecht. (Natürlich lässt sich dieses Vorgehen auf jedes Option-Set anwenden.)

Microsoft_Dynamics _365_Grafiken_in_Ansichtsspalten_hinzufuegen_Abb2

Für den Code brauchen wir die technischen Werte der verschiedenen Optionen.

Microsoft_Dynamics _365_Grafiken_in_Ansichtsspalten_hinzufuegen_Abb3

 
Schritt 3: Erstellen von JavaScript-Webressource

Im nächsten Schritt erstellst Du eine Webressource vom Typ JavaScript. In diesem JavaScript gibst Du an, welches Icon für welchen Wert des Optionssatzes angezeigt werden soll.

Tipps & Tricks rund um Microsoft Dynamics 365: In unserem Self-Service-Bereich  erhältst Du weitere Informationen zum Thema CRM. »

Navigiere wie im ersten Schritt unter Webressourcen und erstelle die Webressource mit folgenden Einstellungen:

  • Name: Du kannst die Webressource beliebig benennen (in dem Beispiel heißt die Webressource: „inf_/contact/scripts/display_icon.js“).
  • Typ: Skript (JScript)

Microsoft_Dynamics _365_Grafiken_in_Ansichtsspalten_hinzufuegen_Abb4

Unten siehst Du den Code, den wir für dieses Beispiel verwenden:

//Hinzufügen von Icons und einer Quickinfo in der Kontakt-Ansicht im CRM

function displayIcon(rowData, userLCID) {
//rowData in das JSON-Format parsen
var str = JSON.parse(rowData);
//Abrufen des gewünschten Felds aus den JSON-Daten für die Zeile
var colData = str.gendercode_Value;
var imgName = "";
var tooltip = "{" + colData +"}";
switch (colData) {
case 1:
imgName = "inf_/person_man.png";
tooltip = "Männlich";
break;
case 2:
imgName = "inf_/person_woman.png";
tooltip = "Weiblich";
break;
case 3:
imgName = "inf_/person_unknown.png";
tooltip = "Divers";
break;
default:
imgName = "inf_/person_unknown.png";
tooltip = "Divers";
break;
}
var resultarray = [imgName, tooltip];
//Berechnungen an CRM zurückgeben
return resultarray;
}

Hier arbeiten wir in einer deutschsprachigen Umgebung. Wenn der Code mehrere Sprachen unterstützen soll, kannst Du den Code wie folgt bearbeiten:

case 2:
imgName = "new_Female";
switch (userLCID) {
case 1033: //Englisch
tooltip = "Male";
break;
default:
tooltip = "Männlich";
break;
}

Speichere und veröffentliche die Änderungen. Sobald Du veröffentlicht hast, kann die Ansicht angepasst werden (diese Funktionalität kannst Du sowohl in Systemansichten als auch in persönlichen Ansichten verwenden). Stelle sicher, dass die Spalte Geschlecht in der Ansicht vorhanden ist. Falls nicht, klicke auf „Spalten hinzufügen“, um die Spalte hinzufügen.

Microsoft_Dynamics _365_Grafiken_in_Ansichtsspalten_hinzufuegen_Abb5

Schritt 4: Verknüpfung des Codes mit der Ansicht

Nun soll das JavaScript mit der Spalte Geschlecht in der Ansicht verknüpft werden. Wähle die Spalte Geschlecht aus und klicke auf die Option "Eigenschaft ändern".

Wähle in dem Lookup „Webressource“ die JS-Webressource und gib die Funktion an. Du kannst bei Bedarf die Breite der Spalte bearbeiten und anpassen. Klicke auf Speichern und veröffentliche die Anpassungen.

Microsoft_Dynamics _365_Grafiken_in_Ansichtsspalten_hinzufuegen_Abb6

Gehe zur Ansicht zurück und die Symbole werden angezeigt.

Microsoft_Dynamics _365_Grafiken_in_Ansichtsspalten_hinzufuegen_Abb7

 

Beispiel 2: Hinzufügen des Entitätsbilds eines Kontaktes in einer Ansichtsspalte

Microsoft_Dynamics _365_Grafiken_in_Ansichtsspalten_hinzufuegen_Abb8

Hier sind kurzgefasst die erforderlichen Schritte:

  • Schritt 1: Erstellen von JavaScript-Webressource
  • Schritt 2: Verknüpfung des Codes mit der Ansicht
Schritt 1: Erstellen von JavaScript-Webressource

Erstelle eine Webressource mit der folgenden Einstellung:

  • Name: Du kannst die Webressource beliebig benennen. (In dem Beispiel heißt die Webressource: „inf_/contact/scripts/display_icon.js“).
  • Typ: Skript (JScript)

Verwende hierfür den beigefügten Code:

// Hinzufügen von Entitätsbild in Kontakt-Ansicht
function displayEntityImage(rowData, userLCID) {
var str = JSON.parse(rowData);
// Die Entitätsbild-URL ist bereits im Entityimage_url_value-feld des rowData-JSON verfügbar. Das bedeutet, dass dies nicht über den Webservice abgerufen werden muss. Es wird nur die Entitätsbild-URL zusammen mit dem Namen zurückgegeben (als Tooltip).
var imgName = str.entityimage_url_Value;
var tooltip = str.name_Value;
var resultarray = [imgName, tooltip];
//Berechnungen an CRM zurückgeben
return resultarray;
}

Schritt 2: Verknüpfung des Codes mit der Ansicht

Nun kann der Code wie im vorherigen Beispiel mit einer beliebigen Ansichtsspalte verknüpft werden. Suche hier die Webressource, füge diese anschließend als Webressource für die Spalte hinzu und gib die Funktionsnamen an (hier: displayEntityImage).

Microsoft_Dynamics _365_Grafiken_in_Ansichtsspalten_hinzufuegen_Abb9

Sobald Du gespeichert und veröffentlicht hast, navigiere unter Ansicht. Jetzt wird das Entitätsbild in der Ansicht angezeigt.

Microsoft_Dynamics _365_Grafiken_in_Ansichtsspalten_hinzufuegen_Abb10

Das Anzeigen von Grafiken neben Ansichtsspalten ist eine großartige Funktion, mit der Du Deine Ansichten optisch und ansprechend gestalten kannst. Es gibt dem Benutzer auf einen Blick gute Informationen und eine Vorstellung davon, um welchen Datensatz es sich handelt.

 

Neuer Call-to-Action

Diese Blogartikel könnten Dich ebenfalls interessieren: 

Blog abonnieren