AFRAIT

Das Resultat sieht so aus:

Wenn du dir die Arbeit der Ampelicons ersparen möchtest, habe ich dir hier einige bereitgestellt.

Meine Dropdownwerte in der Statusspalte sind:

Meine Icons bzgl. diesem Tutorial habe ich im SharePoint an diese Stelle (http://sp13/teams/PublishingImages/Ampel/) gespeichert: (Deine wird wahrscheinlich eine andere sein)

Wichtig: Vergiss nicht all deine Bilder als Hauptversion zu veröffentlichen! Im unten stehenden Bild siehst du, dass vier noch ausgecheckt sind.

Nun speichere den unten stehenden Javascript Code in z.B. deinen Gestaltungsvorlagenkatalog und verbinde die .js Datei zu deiner Liste. Wie das geht erfährst du hier!

Wenn deine Spalte nicht “Status” heisst musst du dies natürlich im Code abändern, ebenfalls wenn deine Dropdownoptionen anders benannt sind und / oder dein Speicherort der Ampelicons ein anderer ist.

(function () {
    var statusFieldCtx = {};

  
    statusFieldCtx.Templates = {};
    statusFieldCtx.Templates.Fields = {
        "Status": {
            "View": StatusFieldViewTemplate
        }
    };

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(
        statusFieldCtx
        );
})();

function StatusFieldViewTemplate(ctx) {

    var _statusValue = ctx.CurrentItem.Status;

     if (_statusValue == 'abgeschlossen')
     {
         return "<img src='http://sp13/teams/PublishingImages/Ampel/green.png'>";
     }
    
     if (_statusValue == 'in Bearbeitung')
     {
         return "<img src='http://sp13/teams/PublishingImages/Ampel/yellow.png'>";
     } 

     if (_statusValue == 'offen')
     {
         return "<img src='http://sp13/teams/PublishingImages/Ampel/red.png'>";
     }   
	 
	 if (_statusValue == 'wartet')
     {
	 return "<img src='http://sp13/teams/PublishingImages/Ampel/brown.png'>";
     } 

}

Bei Fragen wie immer: Don’t be afraIT to ask or comment!