Inbound-Marketing und CRM Blog

Microsoft Dynamics 365: Grafiken in Ansichtsspalten hinzufügen

Microsoft_Dynamics _365_Grafiken_in_Ansichtsspalten_hinzufuegen_Abb(Bildquelle: pixabay)

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) können Sie ausgewählte Datensätze innerhalb einer Ansicht auch visuell kennzeichnen (z.B. Länderflagge), um die gewünschten Datensätze schneller zu finden.

Im heutigen Blogartikel zeigen wir Ihnen anhand zweier Beispiele, wie Sie Grafiken basierend auf Feldwerten anzeigen können.

 

Beispiel 1: Geschlecht darstellen

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

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. Navigieren Sie dazu in Ihrer Lösung in den Bereich Webressourcen und erstellen Sie für jedes Icon eine neue Webressource. Verwenden Sie 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 erstellen Sie eine Webressource vom Typ JavaScript. In diesem JavaScript geben Sie an, welches Icon für welchen Wert des Optionssatzes angezeigt werden soll.

Sie wollen weitere Tipps & Tricks rund um Microsoft erhalten? Dann schauen Sie  in unserem kostenlosen Self-Service-Bereich zu Microsoft vorbei. Dort teilen  wir in verschiedensten kostenlosen Ressourcen unser Wissen mit Ihnen. »

Navigieren Sie wie im ersten Schritt unter Webressourcen und erstellen Sie die Webressource mit folgenden Einstellungen:

  • Name: Sie können 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 sehen Sie den Code, den wir für dieses Beispiel verwenden:

//Hinzufügen von Icons und einer Quickinfo in der Kontakt-Ansicht in 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, können Sie den Code wie folgt bearbeiten:

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

Speichern und veröffentlichen Sie die Änderungen. Sobald Sie veröffentlicht haben, kann die Ansicht angepasst werden (diese Funktionalität können Sie sowohl in Systemansichten als auch in persönlichen Ansichten verwenden). Stellen Sie sicher, dass die Spalte Geschlecht in der Ansicht vorhanden ist. Falls nicht, klicken Sie 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ählen Sie die Spalte Geschlecht aus und klicken Sie auf die Option "Eigenschaft ändern".

Wählen Sie in dem Lookup „Webressource“ die JS-Webressource und geben Sie die Funktion an. Sie können bei Bedarf die Breite der Spalte bearbeiten und anpassen. Klicken Sie auf Speichern und veröffentlichen Sie die Anpassungen.

Microsoft_Dynamics _365_Grafiken_in_Ansichtsspalten_hinzufuegen_Abb6

Gehen Sie 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

Erstellen Sie eine Webressource mit der folgenden Einstellung:

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

Verwenden Sie 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. Suchen Sie hier die Webressource, fügen Sie diese anschließend als Webressource für die Spalte hinzu und geben Sie die Funktionsnamen an (hier: displayEntityImage).

Microsoft_Dynamics _365_Grafiken_in_Ansichtsspalten_hinzufuegen_Abb9

Sobald Sie gespeichert und veröffentlicht haben, navigieren Sie 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 Sie Ihre Ansichten optisch und ansprechend gestalten können. 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 Sie ebenfalls interessieren: 

Themen: Arbeiten mit Microsoft Dynamics CRM How To Microsoft