Beim Wert X soll ein Image in der Spalte erscheinen

Andi Fandrich Als Antwort am 24 Juli 2018 15:15

Falsches Herangehen ;-)

Seit SharePoint 2013 kann man dafür Client Side Rendering (CSR / JSLink) verwenden. Da Du ja grade so schön am Lernen bist, solltest Du Dir das auf jeden Fall auch anschauen. Das Beispiel habe ich auf die Schnelle gefunden: http://www.aerieconsulting.com/blog/using-a-js-link-override-in-sharepoint-online

AndyBy Als Antwort am 25 Juli 2018 09:48

Ein wunderschönen guten Morgen Andi,

ist immer wieder schön am Morgen von dir zu erfahren das ich auf dem Holzweg bin :-)fg)

Ach und danke für die Übung da ich den Text nicht hab herauskopieren können, musste ich den Code abschreiben und herausfinden wofür die einzelnen Zeilen stehen. Das hat mich vom Begreifen des Aufbau weiter gebracht :) Wo finde ich den eine Beschreibung zu den einzelnen Aufrufe wie zum Beispiel spPageContextInfo.webServerRelativeURL oder SP.UI.ModalDialog.showModalDialog?

Ich habe sein Code abgeschrieben und alles so gemacht wie er drin stehen hat, aber es funktioniert nicht. 

// Define a function that will run as a JS Link

(function(){
 // Set up a file context, specifing the function that
 //will change what is displayed for status
 var oFldCtx = {};
 oFldCtx.Templates = {};
 oFldCtx.Templates.Fields = {"Dringlichkeit": {"View": overrideDringlichkeit} };
 
 //Register the template override
 SPClientTemplates.TemplateManager.RegisterTemplateOverrides(oFldCtx);
})();

//Next, add the following code to specify the function that will return the value (an icon)
//that we want to display in the Status column for each item in the list view of Tasks:

function overrideDringlichkeit(ctx) {

 //Get the Task Dringlichkeit of the current row
 var sStatus = ctx.CurrentItem.Dringlichkeit;
 
 // Choose the icon based on the status
 var sIconFileName = "";
 switch(sStatus) {
  case "Hoch":
    sIconFileName "SymHoch.PNG";
   break;
  case "Normal":
    sIconFileName "SymNeutral.PNG"
   break;
  case "Niedrig":
    sIconFileName "SymNiedrig.PNG"
   break;
  default:
   break; 
 }
 
 // Return the original status if we are not overriding it with an icon
 if (sIconFileName == "") return sStatus;
 
 // Build an image tag with Hoch or Neutral or Niedrig icon and add link to edit task
 var sWebURL = spPageContextInfo.webServerRelativeURL;
 var sIconSrc = sWebURL + "_catalogs/masterpage/Icon/" + sIconFileName;
 var sImgTag = "<img id='" +ctx.CurrentItem.ID +"' ";
 sImgTag += "src='" + sIconSrc + "' ";
 sImgTag += "onclick='callEditForm(this)' "; //optional
 sImgTag += "/>";
 
 //Return image tag as the new field value
 return sImgTag;

}

//I added an “onclick” event handler to the image tag that will navigate to the standard edit
//form for a Task item. You can remove that line above, or add the following code to support it:

function callEditForm(img) {

  var sWebUrl = _spPageContextInfo.webServerRelativeUrl;
  var list = "/sites/Lists/Bestellung/";
  var form = "EditForm.aspx?id=";
  var id = img.id;
  var url = sWebUrl + list + form + id;
  var ptitle = "Edit Task";
  if (id > 0 openDialog(url, ptitle);
 }

function openDialog(url, title) {

  SP.UI.ModalDialog.showModalDialog({url: url,title: title,dialogReturnValueCallback:
 RefreshOnDialogClose});

 }

Auch ohne den Fehler in Reihe 3 (Die Klammer vor Function) möchte kein Bild auftauchen. Den Code habe ich auch schon 3x mit dem Original auf der Site abgeglichen und keine Unstimmigkeit gefunden. Das einzige was ich ausgetauscht habe ist das Feld Status gegen das Feld Dringlichkeit. Habe ich vielleicht irgendwo eins übersehen? Oder funktioniert das nur beim SP Online so und beim SP Server mit Foundation nicht?

Oder muss ich den ersten Abschnitt auf ein Button oder etwas vergleichbares legen? Da ja die function insgesamt auch in einer Klammer liegt? 

Danke an alle Helfer

Viele Grüße

AndyBy

AndyBy Als Antwort am 25 Juli 2018 10:47

Ich habe es jetzt auch mit einer Task-Liste versucht genau wie im Beispiel aber es möchte irgendwie nicht so ganz klappen

Andi Fandrich Als Antwort am 31 Juli 2018 15:13

[quote user="AndyBy"]Ach und danke für die Übung da ich den Text nicht hab herauskopieren können, musste ich den Code abschreiben[/quote]

Sorry dafür. Das war einfach der erste vielversprechende Link, den ich ergoogelt habe und dabei habe ich nicht bemerkt, daß der Code in Bildern steckt. Was für ein Blödsinn...

Immerhin hast Du sicher was dabei gelernt. Und es sollte auch nur beispielhaft darstellen, wie man sowas machen könnte. Mit den Stichworten CSR und JSLink findest Du wirklich viele Beispiele im Web. Bestimmt auch welche die funktionieren.

Die angesprochene Klammer in Zeile 3 ist kein Bug, sondern best practice. Sie wird am Ende des Block ca. zehn Zeilen tiefer wieder geschlossen. Warum das bei Dir nicht geht, kann ich aus der Ferne natürlich nicht sagen. Dein nächstes Lernthema heißt also JavaScript Debugging und das geht mit den Entwicklertools im Browser.

AndyBy Als Antwort am 1 Aug. 2018 07:44

Hallo Andi,

das war ernst gemeint mit dem Danke für die Übung. Immer nur heraus kopieren bringt doch nichts und so habe ich den Code zumindest schon mal analysieren können ;-) Verstehen ist zwar noch etwas entfernt aber der Anfang ist getan. 

Ich habe eine einfachere Methode gefunden um die Pfeile anzeigen zu lassen. Ich habe eine Berechnende Spalte genommen und folgendes eingefügt

="<a href='
IF([SpaltennameA]=Hoch,'&uArr',
 IF([SpaltennameA]=Normal,'&hArr;',
  IF([SpaltennameA]=Niedrig,'&dArr;',Alert(Klappt nicht)
)))'>
"&Dringlichkeit&"
</a>"

Allerdings funktioniert das auch noch nicht ganz da die Pfeile zwar im Formelfeld der berechnenden Spalte angezeigt werden, aber nach dem Abspeichern ist wieder der Text da. Und dazu kommt noch das ich den Befehl style=color:red und orange und green noch mit einbauen muss.

Mit DIV habe ich es auch versucht, bringt mir aber eine Syntax-Fehlermeldung. 

=
<DIV style="color:red;">
<a href=if([SpaltennameA]=Hoch;'&uArr;';>"&Dringlichkeit&"</a>
</DIV>
<DIV style="color:Orange;">
<a href=if([SpaltennameA]=Normal;'&hArr;';>"&Dringlichkeit&"</a>
</DIV>
<DIV style="color:green;">
<a href=if([SpaltennameA]=Niedrig;'&dArr;';>"&Dringlichkeit&"</a>
</DIV>

Die berechnende Spalte heißt test. Referenziere ich da was falsch oder hängt das mit dem berechnenden Feld zusammen und ich muss die ganze Syntax in ein String umwandeln?

Viele Grüße

AndyBy

Andi Fandrich Als Antwort am 1 Aug. 2018 07:51

Der beste Tip, den ich Dir geben kann ist wirklich, vergiß das Gewürge mit den berechneten Spalten und schau Dir das CSR an. Das ist der von Microsoft unterstützte Weg und man kann damit so gut wie alles machen.

Nur der Vollständigkeit halber wenn man in einer berechneten Spalte Text zusammensetzen möchte macht man das so:

="Text"&<irgendeine Formel>&"mehr Text"&<eine andere Formel>&"noch mehr Text"

AndyBy Als Antwort am 1 Aug. 2018 11:16

Hallo Andi,

ich muss immer den Vorschriften nach agieren und die sind leider nicht immer so wie ich das gern hätte :-)

Aber ich habe die Lösung gefunden und sie funktioniert. Ich habe in die Berechnende Spalte folgenden Text eingegeben

=IF(Spaltenname="Hoch";"<div style='color:red'>&uArr;</div>";
IF(Spaltenname="Normal";"<div style='color:yellow'>&hArr;</div>";
IF(Spaltenname="Niedrig";"<div style='color:green'>&dArr;</div>";""
)))

So kann ich die Spalte nach den Vorgaben verändern und muss (darf) nicht im css herum schreiben.

danke für die Hilfe

Viele Grüße

AndyBy

AndyBy Als Antwort am 1 Aug. 2018 14:05

Ich nochmal

Ja die Lösung oben funktioniert. ABER:

Ich habe gerade festgestellt das in der Versionierung dann nicht die Änderung als Text drin steht, sondern die gesamte div-Anweisung. 

Also wieder zurück auf halber Strecke (schade)

Viele Grüße

AndyBy

AndyBy Als Antwort am 2 Aug. 2018 14:00

Ich habe jetzt mal den simpelsten Code genommen den ich finden konnte im JS und habe in versucht doch irgendwas mache ich falsch.  

(function () {

var priorityFiledContext = { };

 priorityFiledContext.Templates = { };

priorityFiledContext.Templates.Fields = {

   "Dringlichkeit": { "View": priorityFiledTemplate }

  };

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(priorityFilesContext;

})();

function priorityFiledTemplate(ctx) {

  var priority = ctx.CurrentItem[ctx.CurrentFieldSchema.Dringlichkeit];

Switch (priority) {

  case "Hoch":

      return "<span style='Color :#ff0000'>" + priority + "</span>;

      break;

  case "Normal":

      return "<span style='Color :#ff6a00'>" + priority + "</span>;

      break;

  case "Niedrig":

      return "<span style='Color :#cab023'>" + priority + "</span>

   }

}

Andi Fandrich Als Antwort am 2 Aug. 2018 14:37

Deiner Beschreibung nach hört sich alles richtig an und der Code sieht auch gut aus (außer daß er unkontrolliert abbricht). Rufe die Ansicht im Browser auf, drücke dann F12 um die Entwicklertools zu öffnen, öffne dort die JS-Datei uns setze einen Breakpoint in die zweite Zeile. Dann kannst Du den Code Schritt für Schritt durchgehen, Dir Variablen anschauen, bekommst Fehler angezeigt usw. Du bist aber auf dem richtigen Weg.

AndyBy Als Antwort am 7 Aug. 2018 07:31

Hallo Andi,

ich habe den Code erst gar nicht gesehen. Irgendwas muss auf Farmebene eingestellt sein das mein Script nicht läuft. Aber SharePoint wäre nicht SharePoint wenn nicht mehrere Wege nach Rom führen ;-) 

Ich habe eine css erstellt und auf der Site im Script-Editor bekannt gegeben das sie für die Liste gilt. Das funktioniert auch nur habe ich noch das Problem mit dem Vergleich innerhalb der Zellen. folgende css habe ich erstellt:

/* All in one selector */
.ms-cellstyle ms-vb2 {
  name:Hoch;
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url( /sites/SiteAssets/Image/red.GIF )no-repeat;
  width: auto; /* Width of new image */
  height: auto; /* Height of new image */
  padding-left: 180px; /* Equal to width of new image */
}

/* All in one selector */
.ms-cellstyle ms-vb2 {
  name:Normal;
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url( /sites/SiteAssets/Image/yellow.GIF )no-repeat;
  width: auto; /* Width of new image */
  height: auto; /* Height of new image */
  padding-left: 180px; /* Equal to width of new image */
}

/* All in one selector */
.ms-cellstyle ms-vb2 {
  name:Niedrig;
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url( /sites/SiteAssets/Image/green.GIF )no-repeat;
  width: auto; /* Width of new image */
  height: auto; /* Height of new image */
  padding-left: 180px; /* Equal to width of new image */
}

Laut Entwicklertool ist das die class in der Hoch/Normal/Niedrig steht. Aber ich bekomme nur die Ampel wenn ich MS-vb2 mache und dann auch nur die erste in Ampel, also Rot in die oberste Zeile. Jetzt meine Frage:

Mit name bestimme ich schon welcher Block ausgeführt werden soll? Und ich habe es auch mit dem Inhalts-Editor versucht und es klappt auch nicht. Ebenso ist die CSS eingecheckt. 

Bin für jeden Rat dankbar

Vile Grüße 

AndyBy

Andi Fandrich Als Antwort am 7 Aug. 2018 07:58

Tut mir leid, aber da kann ich nicht weiterhelfen. CSS ist nicht mein Ding...

AndyBy Als Antwort am 8 Aug. 2018 10:44

Jetzt weis ich warum :-) 

Kannst du mir bitte mal die ersten 4 Zeilen vom JSLink erklären? Ja ich weis sie sorgen für die Überschreibung aber ist der function noch was vorgestellt? und was ist mit dem Template wird da ein neues erstellt? oder welches Template nimmt er da? Und bei Fields ist das in den "" die Spaltenbezeichnung und View ist das AllItems oder irgend eine die hat die Spalte mit anzeigt? Denn ich glaube da liegt irgendwo mein Fehler.

Ich habe gedacht mit CSS kann man mehr anstellen

(function () {

var priorityFiledContext = { };

 priorityFiledContext.Templates = { };

priorityFiledContext.Templates.Fields = {

   "Dringlichkeit": { "View": priorityFiledTemplate }

Ich habe den JSLink auf der aspx-Seite registriert und im Webpart angegeben. Oder muss ich ihn nur im Webpart angeben?

Viele Grüße

AndyBy

Andi Fandrich Als Antwort am 8 Aug. 2018 11:22

Ich versuche es mal in aller Kürze...

(function() {
// function implementation
})();

Diese sog. self-executing functions sind in JS best practices, weil man damit den globalen Namensraum nicht vollmüllt. Der Inhalt dieser Funktion wird einfach sofort ausgeführt.

var ctx = { };
ctx.Templates = { };

Damit erzeugt man ein neues Objekt und gleich danach ein Kindobjekt dazu. Der Name des Objekts (hier ctx) ist frei, aber die Kindobjekte müssen bekannte Namen haben. Durch die Zeile
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ctx)
wird dieses Objekt dann mit dem Standard zusammengeführt. Alle im eigenen Objekt angegebenen Templates überschreiben dann die Standard-Implementierung.

Du bekommst in alle überschriebenen Methoden immer ein Context-Objekt übergeben. Das ist genau das Resultat dieser Überschreibung. Du kannst es Dir im Debugger anschauen und siehst dann auch welche Möglichkeiten es gibt. Und das sind wirklich sehr, sehr viele.

Bei den Spalten/Fields mußt Du immer den internen Namen angeben, der sich vom sichtbaren unterscheiden kann. Du findest ihn in der Adresszeile des Browsers, wenn Du z.B. in den Listeneinstellungen auf eine Spalte klickst.

[quote user="AndyBy"]Ich habe den JSLink auf der aspx-Seite registriert und im Webpart angegeben. Oder muss ich ihn nur im Webpart angeben?[/quote]

Eines von beidem reicht. Schöner ist es über die Webparteinstellungen.

AndyBy Als Antwort am 9 Aug. 2018 06:56

Ein guten Morgen Andi,

ich danke dir für die gute Erklärung :-) Jetzt kenn ich wenigstens den Aufbau und was die im Internet mit dem Kind gleich dazu erstellen meinten :-)) 

Danke

AndyBy