Das Resultat sieht so aus:

Traffic light column in custom list (de en)_4

 

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

Meine Dropdownwerte in der Statusspalte sind:

Traffic light column in custom list (de en)_3

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

Traffic light column in custom list (de en)_1

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

Traffic light column in custom list (de en)_2

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!

2 COMMENTS

  1. Hello,

    is there any trick how to do it because I tried now three times you very good step-by-step description – but it will show always only the name of the status, but not the dot. 🙁

    Best regards,
    Matthias

    • Hi Matthias, da ist nicht wirklich ein Trick dabei. Sollte normalerweise schon so klappen. Ich habe leider gerade keinen SP2013 rumstehen. Du kannst ja mal schauen ob ein paar “einfachere” JS Sachen gehen und dich dann versuchen zur Ampel hinzuarbeiten. Sorry, dass ich nicht besser gerade helfen kann. Liebe Grüße, Patrick

LEAVE A REPLY

Please enter your comment!
Please enter your name here