Dynamics CRM – Einer Ansicht Grafiken hinzufügen – Ampelfunktion

Nachdem ich schon einmal erläutert habe, wie man in einer SharePoint Ansicht eine Ampel Funktion hinzufügt, ist das Thema jetzt bei Dynamics CRM dran. Dabei gilt, dass das Folgende von mir nur mit Dynamics CRM 2016 bzw. 365 getestet wurde.

Die Anforderung war in einer Ansicht der Entität Anfragen eine grafische Übersicht zu bekommen, welcher Anfragen welche Priorität haben und wann zuletzt diese geändert worden. Um das gewünschte Ziel zu erreichen genügt ein kleines JavaScript.

Bevor wir uns den JavaScript zuwenden, müssen wir zuerst die entsprechenden Bilder zu Verfügung stellen. Dafür erstelle ich drei Webressourcen, jede Webressource stellt dabei ein Bild dar.

Das eigentliche JavaScript finden Sie unten. Erstellen Sie damit zuerst eine Webressource vom Typ JavaScript. Gehen Sie danach zur Verwaltung ihrer Ansicht (in System anpassen) und öffnen Sie diese. Klicken Sie auf die Spalte, welche Sie anpassen möchten und dann auf Eigenschaften ändern.

Geben Sie nun die Webressource an welche das JavaScript enthält und den Namen der Funktion, welche Sie im JavaScript verwenden möchten. Speichen Sie die Änderung und veröffentlichen Sie ggf. diese.

Noch eine kurze Erklärung zum JavaScript. Es wird das Feld Geändert an mit einer Ampelgrafik versehen. Dazu werden alle Einträge von Heute bis 30 Tage älter als grün markiert, 30 Tage älter aber jünger als 60 Tage mit gelb, der Rest mit Grün. Dazu müssen in einem Array zwei Werte übergeben werden. Der zweite Wert ist ein Tooltipp, dieser kann auch über die userLCID angepasst werden, also mehrsprachig erscheinen. Beachten Sie, das ich beim Bild nicht den Name der Datei angebe, sondern den Namen der Webressource!

function displayIconTooltipModi(rowData, userLCID)
{
var str = JSON.parse(rowData);
var coldata = str.modifiedon_Value;
var imgName = "";
var tooltip = "";
var now = new Date();
var warn = new Date();
var zulang = new Date();

warn.setDate(now.getDate() - 30);
zulang.setDate(now.getDate() - 60);
var targetDate = new Date(coldata);

if (targetDate > warn)
{
imgName = "new_gruen32";
tooltip = "Good";
}
else if (targetDate > zulang && targetDate < warn)
{
imgName = "new_gelb32";
tooltip = "Warning";
}
else
{
imgName = "new_rot32";
tooltip = "Bad";
}
var resultarray = [imgName, tooltip];
return resultarray;
}

Ampelfunktion für Aufgabenlisten hinzufügen

Wer hat sich nicht schon einmal für Aufgabenlisten in SharePoint eine visuelle Statusanzeige gewünscht? Zum Beispiel eine, mit welcher es möglich ist, abhängig vom Füllstand der Aufgabe (% abgeschlossen) eine rotes, gelbes oder grünes Symbol anzeigen zu lassen? Genau dies leistet das unter stehende JavaScript. Ist die Aufgabe bis zu 30% abgeschlossen, wird ein rotes Symbol angezeigt. Ist sie zu mehr als 30% und zu weniger als 100% Prozent abgeschlossen ein gelbes Symbol, bei 100% wird ein grünes Symbol angezeigt.

Damit alles funktioniert, müssen allerdings einige Anpassungen vorgenommen werden, was ja nicht wirklich verwunderlich ist.

  1. Speichern Sie den JavaScript Code in einer Datei lokal ab.
  2. Gehen Sie zur Aufgabenliste und legen Sie eine neue Spalte mit dem Namen KPI und vom Typ Link oder Bild an. Die URL muss dabei als Bild formatiert werden. Blenden Sie die neue Spalte in die Ansicht ein, falls dies nicht automatisch geschieht.
  3. Gehen Sie in die Websiteeinstellungen und dort in Gestaltungsvorlagen bzw. in MasterPage gallery. Sie finden diesen Link im Abschnitt Web-Designer-Kataloge.
  4. Klicken Sie auf Dateien -> Neues Dokument und dann auf JavaScript-Anzeigenvorlage bzw. auf JavaScript Display Template.

  5. Sie müssen jetzt noch Einstellungen vornehmen wie in der Abbildung unten gezeigt. Der Zielbereich ist dabei die Site, auf welcher Sie das Script verwenden möchten, im Allgemeinen also die Website auf der Sie sich gerade befinden. Es sind dies die Eigenschaften Zielsteuerelement-Typ, Eigenständig und Zielbereich.
  6. Gehen Sie jetzt zu der Ansicht in der Aufgabenliste, in welcher Sie die grafische Anzeige nutzen möchten. Editieren Sie die Seite und bearbeiten Sie den Webpart. Ganz am unteren Ende des Webpartsmenü gibt es den Punkt Verschiedene bzw. Miscellaneous. Im Feld JS-Link tragen Sie den Ort zu der JavaScript in dem Format
    ~site/_catalogs/masterpage/<IhrName.js>
    ein.
  7. Laden Sie zuletzt die von Ihnen gewünschten Bilder in die von Ihnen gewünschte Bibliothek hoch. Der Code geht davon aus, dass es die Bilder
    green.png
    red.png
    yellow.png

    in der Bibliothek SiteAssets gibt. Die Websitesammlung befindet sich in unter http://<Servername>/Sites/dev/.

Das sollte es gewesen sein. Natürlich läßt sich das JavaScript anpassen, der Fantasie sind da wenig Grenzen gesetzt. Inspiriert zu der Lösung wurde ich übrigens durch den folgenden Blog: http://www.abelsolutions.com/2013-blog/creating-a-simple-kpi-column-in-sharepoint-2013-list-views-using-js-link/

(function() {
var statusFieldCtx = {};
statusFieldCtx.Templates ={};
statusFieldCtx.Templates.Fields = {
&amp;quot;KPI&amp;quot;: {&amp;quot;View&amp;quot;: StatusIconViewTemplate}
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(statusFieldCtx);
})();

function StatusIconViewTemplate(ctx){

var _percentValue = ctx.CurrentItem.PercentComplete;
var _percentValueConvert = parseFloat(_percentValue);

	if ( _percentValueConvert == '100')
	{
		return &amp;quot;&amp;amp;lt;img src='/Sites/dev/SiteAssets/green.png' /&amp;amp;gt;&amp;quot;;
	}
	else if (_percentValueConvert &amp;amp;lt;= '30')
	{
		return &amp;quot;&amp;amp;lt;img src='/Sites/dev/SiteAssets/red.png' /&amp;amp;gt;&amp;quot;;
	}
	else if ( _percentValueConvert &amp;amp;lt;='100' &amp;amp;amp;&amp;amp;amp; _percentValue &amp;amp;gt;'30'  )
	{
		return &amp;quot;&amp;amp;lt;img src='/Sites/dev/SiteAssets/yellow.png' /&amp;amp;gt;&amp;quot;;
	}
}

Vielen Dank für Ihr Interesse an meinem Blogeintrag.
Gerne beantworte ich Ihnen persönlich weitergehende Fragen zu diesem Thema.
Kontaktieren Sie mich einfach über mein Kontaktformular.

Sie wollen mehr über mich erfahren? Dann gehen Sie auf meine Site
http://www.nicothiemer.de

Nico Thiemer

Öffnen von Dateifreigaben aus Microsoft CRM 201x

Eine häufige Anforderung in Projekten ist die Möglichkeit, aus einem Microsoft CRM Datensatz heraus eine Dateifreigabe zu öffnen. Dies sind zum Beispiel Netzlaufwerke, auf welchen Daten für Projekte liegen. Leider ist dies mit Bordmitteln nicht ohne weiteres möglich. Ich kann natürlich einen UNC Pfad (file://Freigabe) in einem Textfeld erfassen, aber dieser wird nicht als Hyperlink formatiert. Über Kopieren -> Einfügen geht es natürlich immer. Wie Sie viel einfach per Klick diesen Pfad öffnen können, erläutert dieser Artikel. Dabei wird so soweit als möglich auf Programmierung verzichtet, auch wenn es nicht völlig ohne geht.

Voraussetzungen

Der Grundgedanke der Lösung ist, ein Feld einzufügen, in welcher der UNC Pfad in Klartext steht. Über eine neu eingefügte Schaltfläche wird ein JavaScript ausgeführt, welches den Inhalt des Feldes liest und über die Funktion windows.open() die Freigabe öffnet.

Um eine Schaltfläche einzufügen, eignet sich die CRM Erweiterung Ribbon Workbench for Dynamics CRM. Diese können Sie hier herunterladen. Fügen Sie diese Lösung Ihren Microsoft CRM hinzu. Falls noch nicht vorhanden, müssen Sie noch Microsoft Silverlight installieren. Dieses finden Sie als Download hier.

TIPP: Wenn Sie in einer virtuellen Maschine arbeiten und keine Verbindung zu Laufwerken des Hosts haben, können Sie mit dem ISO Recorder eine ISO Datei erzeugen und diese dann in einem Laufwerk des Gastes verwenden. Den ISO Recorder finden Sie hier.

In meinen Beispiel möchte ich die Entität Acount bzw. Firma anpassen. Dazu habe ich dieser ein Textfeld mit dem Schemaname new_dateifreigabeprojekte hinzugefügt. Dazu habe ich eine eigene Lösung genutzt, welche vorerst nur die Entität Firma enthält. Dies ist wichtig, wie wir gleich sehen werden.

JavaScript erstellen und einbinden

Damit auf das Feld zugegriffen werden kann, erstellen Sie eine Textdatei mit dem Namen OeffneFreigabe.js und darin den folgenden Code, welchen Sie anschießend speichern.

function FreigabeOeffnen()

{

window.open(Xrm.Page.getAttribute(’new_dateifreigabeprojekte ‚).getValue());

}

Gehen Sie zu der Lösung Firma und klicken Sie links im Baum auf Webressourcen. Klicken Sie auf Neu und geben Sie der Ressource den Namen OeffneFreigabe, als Typ wählen Sie Script und laden die Datei hoch, welche wir gerade erstellt haben. Speichern und veröffentlichen Sie die Lösung.

Schaltfläche hinzufügen

Öffnen Sie nun die Lösung Ribbon Workbench for Dynamics CRM. Diese wird Sie zuerst fragen, welche Lösung importiert werden soll, in welcher Sie Anpassungen vornehmen möchten. Öffnen Sie die eben erstellte Lösung Firma und klicken Sie in der Mitte auf account. Sie haben im oberen Drittel drei Menübänder. Für uns ist das dritte Menüband Form interessant. Dies wird aufgerufen, wenn ein einzelner Datensatz angezeigt wird. Zeigen Sie in der Toolbox links auf Button und ziehen Sie diesen hinter Connect.

Klicken Sie dann in die Eigenschaften der Schaltfläche rechts und füllen Sie die Felder

  • AltText
  • Description
  • LabelTextText
  • ToolDescriptionText
  • ToolTipTitelText

mit der Beschriftung Öffne Dateifreigabe.

Klicken Sie jetzt in der Mitte mit der rechten Maustaste auf Command und dort auf Add New.

Öffnen Sie danach Command und klicken Sie auf neu erstellte Kommando.

Klicken Sie in den Eigenschaften rechts auf das Lupensymbol neben Actions und dann Add. Wählen Sie Javascript Function Action. Als Funktionsname tragen Sie FreigabeOeffnen ein. Klicken Sie auf das Lupensymbol neben Library und wählen Sie die JavaScript Datei aus. Bestätigen Sie alle Änderungen mit OK.

Klicken Sie wieder auf die neu erstellte Schaltfläche und wählen Sie in den Eigenschaften unter Command das neue Kommando aus. Klicken Sie anschließend auf Publish. Gehen Sie nach dem Abschluss der Veröffentlichung in einen Firmendatensatz, ggf. müssen Sie die Ansicht mit F5 aktualisieren. Die Schaltfläche sollte jetzt da sein und die Dateifreigabe öffnen, sofern das Feld einen sinnvollen Wert aufweist.

Vielen Dank für Ihr Interesse an meinem Blogeintrag.
Gerne beantworte ich Ihnen persönlich weitergehende Fragen zu diesem Thema.
Kontaktieren Sie mich einfach über mein Kontaktformular.

Sie wollen mehr über mich erfahren? Dann gehen Sie auf meine Site
http://www.nicothiemer.de

Nico Thiemer