SharePointCommunity
Die deutschsprachige Community für SharePoint, Office 365 und mit Azure

Beim Wert X soll ein Image in der Spalte erscheinen

bewertet von 0 Usern
Beantwortet Dieser Beitrag hat 1 Geprüfte Antwort | 15 Antworten | 1 Follower

Top-500-Beitragsschreiber
51 Beiträge
AndyBy erstellt in 24 Jul 2018 13:06

Hallo Community,

ich hoffe ihr habt noch etwas Geduld mit mir ;-)

Ausgangslage:

Ich habe eine Liste mit dem Feld Dringlichkeit(Auswahlmenü) mit der Auswahl Hoch,Normal & Niedrig.

Ich möchte je nach Auswahl das ein Image in die Spalte geladen wird. Dafür habe ich folgenden Code zusammengestellt:

<script src="/SiteAssets/jquery.js" type="text/javascript"></script>

<script type="text/javascript">

    $(document).ready(function(){

  $('.ms-vb2:contains("Hoch")').css('background-image:url("/SiteAssets/Symbol%20Hoch.PNG")');
  $('.ms-vb2:contains("Normal")').css('background-image:url("/SiteAssets/Symbol%20Neutral.PNG")');
  $('.ms-vb2:contains("Niedrig")').css('background-image:url("/SiteAssets/Symbol%20niedrig.PNG")');

 });

</script> 

Doch leider funktioniert das nicht. Kann mir jemand sagen warum?

Ich habe auch schon den absoluten Pfad eingegeben und getestet ob der Link zum Bild funktioniert. Der Link funktioniert, der absolute Pfad nicht.

Wenn ich das ganze mit backround-color mache da funktioniert dies einwandfrei aber nicht mit dem Image.

Danke für eure Geduld mit mir :-)

AndyBy

Beantwortet Geprüfte Antwort

Top-10-Beitragsschreiber
18.750 Beiträge

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"

Viele Grüße
Andi
af @ evocom de
Blog

Alle Antworten

Top-10-Beitragsschreiber
18.750 Beiträge

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

Viele Grüße
Andi
af @ evocom de
Blog
Top-500-Beitragsschreiber
51 Beiträge

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

Top-500-Beitragsschreiber
51 Beiträge

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

 

Top-10-Beitragsschreiber
18.750 Beiträge

AndyBy:
Ach und danke für die Übung da ich den Text nicht hab herauskopieren können, musste ich den Code abschreiben

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.

Viele Grüße
Andi
af @ evocom de
Blog
Top-500-Beitragsschreiber
51 Beiträge

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

Top-10-Beitragsschreiber
18.750 Beiträge

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"

Viele Grüße
Andi
af @ evocom de
Blog
Top-500-Beitragsschreiber
51 Beiträge

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

Top-500-Beitragsschreiber
51 Beiträge

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

Top-500-Beitragsschreiber
51 Beiträge

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>

   }

}

Visual Studio hat mir kein Fehler ausgegeben. Ich habe alles in dringlichkeit.js eingeschrieben und diese in die Objektbibliothek gelegt. Anschließend bin ich in die Objektbibliothek gegangen und habe mir den Link zur File kopiert und im Webpart unter JS-Link eingefügt. Doch da geschieht nichts. Hab ich irgendwo ein Denkfehler? Oder muss ich noch das ganze in Scripts setzten? Oder muss ich etwas aktivieren damit das funktioniert?

 

Top-10-Beitragsschreiber
18.750 Beiträge

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.

Viele Grüße
Andi
af @ evocom de
Blog
Top-500-Beitragsschreiber
51 Beiträge

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

Top-10-Beitragsschreiber
18.750 Beiträge

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

Viele Grüße
Andi
af @ evocom de
Blog
Top-500-Beitragsschreiber
51 Beiträge

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

 

Top-10-Beitragsschreiber
18.750 Beiträge

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.

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

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

Viele Grüße
Andi
af @ evocom de
Blog
Seite 1 von 2 (16 Elemente) 1 2 Weiter > | RSS