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;
}

Arbeiten mit dem Webpart für Inhaltssuche – Teil 3 – Arbeiten mit Displaytemplates

Arbeiten mit dem Webpart für Inhaltssuche – Teil 1 Übersicht
Arbeiten mit dem Webpart für Inhaltssuche – Teil 2 – KQL
Arbeiten mit dem Webpart für Inhaltssuche – Teil 3 – Arbeiten mit Displaytemplates
Arbeiten mit dem Webpart für Inhaltssuche – Teil 4 – Vordefinierte Suchen erstellen

Dies ist der dritte Beitrag in der kleinen Serie über den Webpart für Inhaltssuche in SharePoint 2013. In den vorherigen Beiträgen haben wir uns angeschaut, wie der Webpart konfiguriert wird und wie Sie Suchabfrage gestalten können. Jetzt wird es darum gehen, wie wir die Suchanfrage optisch aufpeppen können. Denn die schon vorhandenen Vorlagen sind, abgesehen von den Funktionen für Bilder, eher sehr technisch. Ich werde mich dabei auf eine einfache Anwendung konzentrieren, es gibt im Internet viele Blogs welche sich dem Thema angenommen haben. Wenn man einmal das Prinzip verstanden hat, kann man auch schnell eigene Lösungen implementieren.

Die Vorlagen heißen Displaytemplates und gibt eine ganze Menge davon im System. Displaytemplates regeln sowohl die prinzipielle Anzeige der Suchergebnisse (Tabelle, Liste, Slideshow) als auch die Anzeige der einzelnen Elemente (welche Metadaten werden angezeigt, wie groß ist ein Bild). Ebenso werden Displaytemplates verwendet, wenn beim Überfahren eines Elementes eine Vorschau angezeigt wird.

Für Demonstrationszwecke werde ich eine vorhandene Vorlage anpassen und diese ergänzen. Im ersten Teil habe ich mit dem Displaytemplate Two Lines gearbeitet und dort zusätzlich das Metadatum Author eingefügt. Jetzt möchte ich, dass vor dem Metadatum der Begriff Autor steht. Dazu muss das vorhandene Displaytemplate kopiert werden, in der Kopie erfolgt dann die Anpassung. Die Displaytemplates sind im Pfad http:///_catalogs/masterpage/Display%20Templates gespeichert. Dieser bzw. sein Inhalt ist allerdings nicht immer sichtbar im Browser. Wenn dies der Fall ist, müssen Sie das SharePoint Publishingfeature aktivieren. Um zum Pfad zu navigieren, gehen Sie zu den Site Settings und dann zu Master pages and page layouts im Abschnitt Web Designer Galleries. Auch diesen Link finden Sie erst nach der Aktivierung des Features. Sie sehen eine Bibliothek, in welcher alle Pagelayouts und Masterpages liegen sowie einige Ordner. Suchen Sie den Ordner Display Templates und öffnen Sie diesen. Die Displaytemplates für den Webpart für Inhaltssuche liegen im Unterordner Content Web Parts. Dort finden Sie jetzt alle Displaytemplates , welche Sie auch im Webpart auswählen können.

Um möglich einfach zu arbeiten, öffnen sie Sie die Bibliothek im Windows Explorer. Klicken Sie dazu auf das Menüband Library und im Abschnitt Connect & Export auf Open with Explorer. Wenn Sie möchten, können Sie den Pfad auch einen Laufwerkbuchstabe zuweisen. Sie können dann in jeden beliebigen HTML Designer arbeiten, denn die Displaytemplates bestehen nur aus HTML und JavaScript. Beide zusammen bilden dann jeweils ein Displaytemplate.

Angepasst werden immer nur die HTML Dateien, NIEMALS die JS Dateien. Die JS Dateien werden von SharePoint automatisch erzeugt wenn eine HTML Datei gespeichert wird und sind für die Bearbeitung tabu. Suchen Sie die Datei Item_TwoLines.html und kopieren Sie diese zu Item_TwoLines_with_Author.html. Sie werden sehen, unmittelbar danach wird auch die entsprechende JS Datei erstellt. Ich öffne die kopierte HTML Datei in Notepad++, aber natürlich geht auch jede anderer Editor.

Es lohnt sich die Datei einmal in aller Ruhe anzuschauen. Sie enthält viele Möglichkeiten und Ideen, was mit Displaytemplates alles möglich ist. Ich gebe nur einen kleinen Abriss, um zu zeigen was man mindestens für ein eigenes Displaytemplate machen muss. Als erstes sollten wir den Titel in Zeile drei ändern. Unter diesen Namen können wir nämlich später das Displaytemplate im Webpart auswählen. Unschön, wenn es zwei Displaytemplates mit dem gleichen Namen gibt. Ich nenne mein Displaytemplate TwoLines with Author.

<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
<head>
<title>TwoLines with Author</title>

Als nächstes interessant ist die Zeile acht. In dieser Zeile legen Sie fest, mit welchen verwalteten Eigenschaften Sie im Displaytemplate arbeiten möchten. Dabei gibt es immer ein Wertepaar, interne Bezeichnung der Eigenschaft und Anzeigename. Da in unseren Fall allerdings die Werte über Eingabefelder (Line1 und und Line2) übergeben werden, brauchen wir die Eigenschaften hier nicht extra zu benennen.

Es folgt einiger JavaScript Code, welcher in Token

<!--#_ _#-->

eingeschlossen ist. Die eigentliche Darstellung erfolgt erst ab Zeile 63. In Zeile 73 steht die Darstellung der zweiten Zeile.

<div class="cbs-Line2 ms-noWrap" title="_#= $htmlEncode(line2.defaultValueRenderer(line2)) =#_" id="_#= line2Id =#_">_#= line2 =#_</div>

Wir können jetzt erkennen, dass hier sowohl reines HTML als auch JavaScript vermischt wird. Der JavaScript Code steht wieder in Token. Der Wert der Eigenschaft steht vor dem letzten Div in _#= line2 =#_ . Also ändere ich die Zeile folgendermaßen indem ich direkt davor Author schreibe:
Orginal

<div class="cbs-Line2 ms-noWrap" title="_#= $htmlEncode(line2.defaultValueRenderer(line2)) =#_" id="_#= line2Id =#_">_#= line2 =#_</div>

Mit Änderung

<div class="cbs-Line2 ms-noWrap" title="_#= $htmlEncode(line2.defaultValueRenderer(line2)) =#_" id="_#= line2Id =#_">Author: _#= line2 =#_</div>

Speichern Sie die Änderung.

ACHTUNG: Damit alle Benutzer die Änderung später sehen, muss das geänderte Displaytemplate noch veröffentlicht werden. Gehen Sie im Browser deshalb zu der Bibliothek, markieren Sie die Datei und wählen Sie aus der Menüleiste Publish Dieser Vorgang ist jedes Mal erforderlich, wenn Sie ein fertiges Displaytemplate zur Verfügung stellen wollen. Veröffentlichen Sie nur die HTML Datei, um die JS Datei kümmert sich SharePoint alleine.

Damit Sie das neue Displaytemplate auswählen können, müssen Sie die Seite neu laden, welche den Webpart für Inhaltssuche enthält und diesen wieder zur Bearbeitung auswählen.

Unter Property Mappings können wir das Metadatum Author auswählen, welches dann auch in der zweiten Zeile zusammen mit dem Suffix angezeigt wird. Natürlich wird jetzt immer der Präfix Author angezeigt, aber als Beispiel soll es genügen.

Dies alles nur als Beispiel. Wenn man das konsequent zu Ende denkt, kann eine Anwendung entstehen, wie sie Maggi erstellt hat. Die Rezepte arbeiten mit der Suche und die Präsentation der Suchergebnisse erfolgt mit Displaytemplates. https://www.maggi.de/rezepte. Displaytemplates sind DAS Mittel zur Wahl zur Präsentation von Inhalten in SharePoint. Auch, aber nicht nur deswegen sollte man überlegen mehr Inhalte über die Suche zu erschließen und auf Drilldown Strukturen immer mehr zu verzichten.

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
http://www.nicothiemer.de

Arbeiten mit dem Webpart für Inhaltssuche – Teil 2 – KQL

Dieser zweite Teil der kleinen Serie über das Arbeiten mit dem Webpart für Inhaltssuche beschäftigt sich mit dem Schreiben der Suchquery für den Webpart. Diese wird in Keyword Query Language (KQL) geschrieben, ist enorm leistungsfähig und dabei nicht einmal kompliziert. Natürlich können die Suchabfragen, welche ich unten beschreibe, auch an allen anderen Orten der SharePoint Suche (Suchergebnisquellen, JS Code, etc.) verwendet werden. Los geht’s.

Um die Beispiele nachvollziehbar zu machen eine kleine Erläuterung, was ich angelegt habe: Es gibt eine Bibliothek mit vier Bildern, welche auch als Inhaltstyp Bild klassifiziert sind. Außerdem gibt es in der Bibliothek auch Videos und MP3. Die Bibliothek heißt BilderTest.

Wenn Sie den Suchwebpart im Modus zum Bearbeiten geöffnet haben, klicken Sie auf die Schaltfläche Change query im oberen Abschnitt des Webparts.

Es öffnet sich ein Overlayfenster mit ziemlich vielen Optionen.

Damit Sie die Suchquery überhaupt eingeben können, klicken Sie auf Switch to Advanced Mode. Wenig überraschend können Sie die Suchquery in das gleichnamige Feld eingeben. Entfernen Sie dazu den schon darin stehenden Inhalt. Folgende Parameter können Sie u.a. für die Query verwenden. Die meisten Parameter werden in der Form Parametername:Wert verwendet.

Parameter	Bedeutung	Beispiel
path	Gibt einen Speicherplatz an, aus dem die Ergebnisse angezeigt werden sollen. Dies kann eine Sitecollection, eine Website oder eine Liste/Bibliothek sein.	Path:“http://intranet.contoso.com/ BilderTest“ Würde alle Inhalte aus der Bibliothek BilderTest anzeigen.
ContentTypId	Gibt eine ID eines Inhaltstyps an, auf dem Suchergebnisse verengt werden. Um diese ID zu finden, schalten Sie wieder in den QuickMode und wählen bei Select a query den Wert Items matching a content type (System) aus. Weiter unten können Sie dann unter Restrict by content type im DropDown den gewünschten Inhaltstyp auswählen. Der Wert mit Parameter steht dann im Abfragefeld wenn Sie wieder umschalten.	ContentTypeId:0x010102* Wählt alle Bilder aus.
Author	Damit kann der Autor eines Elementes gesucht und damit gefiltert werden.	Author:{User.Name} Damit werden alle Elemente angezeigt, welche den Benutzer, welcher die Seite gerade aufruft, als Autor enthalten.
FileType	Grenzt die Abfrage auf einen Dateiformat, z.B. pdf oder docx, ein.	FileType:jpg Zeige nur JPG Dateien an.

Sie können als Parameter jede verwaltete Eigenschaft nutzen. Wie Sie diese erstellen, ist hier beschrieben für onPremise und für Office 365. Die Parameter können untereinander mit den Operatoren AND und OR verbunden werden. Wenn Sie nichts angegeben, ist es immer ein AND. Wenn Sie ein OR verwenden möchten, so müssen Sie dies großschreiben. Ebenso können Sie + und – bzw. NOT verwenden.

Eine typische Abfrage um alle Bilder in der Bildbibliothek BilderTest anzuzeigen könnte wie unten aussehen. {Pfad} müssen Sie mit Ihrem Pfad ersetzen, dies ist kein Platzhalter im KQL.

Path:“http://{Pfad} / BilderTest/“ ContentTypeId:0x010102*

Um alles außer Bilder, also z.B. nur Videos und MP3 anzuzeigen würde sich anbieten:

Path:“http://{Pfad} / BilderTest/“ NOT ContentTypeId:0x010102*

Um alle meine Dokumente zu sehen:

Path:“http://{Pfad} / BilderTest/“ Author:{User.Name}

Am rechten Rand des Fensters können Sie jeweils eine Vorschau sehen, wenn Sie auf Test query klicken. Wenn Sie den Test in der Suchanwendung in der Zentraladministration durchführen, sehen Sie keine Vorschau sondern erhalten einen Fehler. Dies ist „normal“. Haben Sie die Query fertig, klicken Sie auf OK. Damit Sie eine Änderung auf der Webseite sehen, klicken Sie entweder auf Apply oder auf OK in der Konfiguration des Webparts. Damit die Bilder auch entsprechend angezeigt werden, wählen Sie die Konfiguration wie unten aus.

Der nächste Beitrag wird sich tiefer mit der Darstellung der Ergebnisse, also den DisplayTemplates beschäftigen.

Zum Abschluss noch ein Tipp: Thomas Maier, der SharePoint Schwabe, hat einige gute Gedanken zum Vergleich Google und SharePoint Suche geschrieben. Schauen Sie doch mal rein. https://www.sharepoint-schwabe.de/suche-wie-kann-sie-besser-genutzt-werden-tipps-und-parameter

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.

Speichern Sie den JavaScript Code in einer Datei lokal ab.
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.
Gehen Sie in die Websiteeinstellungen und dort in Gestaltungsvorlagen bzw. in MasterPage gallery. Sie finden diesen Link im Abschnitt Web-Designer-Kataloge.
Klicken Sie auf Dateien -> Neues Dokument und dann auf JavaScript-Anzeigenvorlage bzw. auf JavaScript Display Template.
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.
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.
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 = {
&quot;KPI&quot;: {&quot;View&quot;: StatusIconViewTemplate}
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(statusFieldCtx);
})();

function StatusIconViewTemplate(ctx){

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

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

Nico Thiemer

Teilen:

Gefällt mir:

Teilen:

Gefällt mir:

Teilen:

Gefällt mir:

Teilen:

Gefällt mir: