-
Upload .js files and link it to lists in 9 Steps (de / en)
1. Auf der SharePoint Hauptseite die Websiteeinstellungen aufrufen. EN: Navigate to your SharePoint startpage and open the website settings. 2. Die Gestaltungsvorlagen öffnen EN: Then open the (Masterpages and page layouts) 3. Neue Javascript-Anzeigevorlage erstellen EN: Create a new Javascript-DisplayTemplate 4. Die .js Datei auswählen und auf OK klicken. Der Rest kann so beibehalten werden EN: Search for your .js file and click OK. Nothing else must be changed. 5. Nun die Einstellung an die untenstehenden anpassen. (Name, Titel, Beschreibung und Zielbereich könnte natürlich anders sein). Ausgeblendet, Zielsteuerelement-Typ und Eigenständig muss beibehalten werden. EN: Edit the settings like the
-
Color Calendar and Icons in 10 easy Steps (en)
Let’s go! If you don’t have a calendar already, click on the cogwheel, site contents and then add an app. 2. Add a Calendar and give it a name. In this guide I took the name “Eventcalendar”. 3. Add a new column. You can do that in two different ways. Click on List Settings and then Create Column or directly like in the picure below: 4. This column will show the icon and the category of the events. In my case the name is “kind” and the choice values are: Fair, Release, Lecture and something else. 5.
-
Color Calendar and Icons in 10 easy Steps (de)
Legen wir los! Wenn nicht schon vorhanden, klicke über Websiteinhalte auf App hinzufügen. 2. Füge einen Standardkalender hinzu und vergib einen Namen. In dem folgenden Beispiel habe ich den Namen “Eventkalender” verwendet. 3. Füge nun eine neue Spalte hinzu. Entweder über die Listeneinstellungen und dann Spalte hinzufügen oder direkt wie im folgenden Bild: 4. Diese Spalte dient später dazu ein Icon anzuzeigen und die Art des Events festzulegen. In meinem Fall ist der Name der Spalte “Art” und die Dropdownoptionen sind: Messe, Release, Vortrag und Etwas anderes. 5. Füge nun noch eine weitere Spalte vom Typ
-
Slice Description without cutting words (en)
This blog post will show you how to make the description text shorter without cutting words in half and display the whole description text as a tooltip. Before: After: Even with a tooltip: Just take the Javascript below, save it and link it to your list. How to do that? Check my other blog post here! // List View – Slice Long String Sample Without Cutting Words // Patrick , afraIT.com (function () { // Create object that have the context information about the field that we want to change it’s output render var bodyFiledContext = {}; bodyFiledContext.Templates = {}; bodyFiledContext.Templates.Fields
-
Slice Description without cutting words (de)
Dieser Beitrag zeigt, wie du die Beschreibung verkürzt ohne dass Wörter auseinander geschnitten werden. Ausserdem wird die komplette Beschreibung in einem Pop-Up angezeigt. Vorher: Nachher: Sogar mit Tooltip: Nimm einfach das unten stehende Javascript und verbinde es mit deiner Liste. Wie machst du das? Schau hier nach! Wenn du Fragen hast, trau dich zu fragen oder kommentiere einfach den Beitrag. // List View – Slice Long String Sample Without Cutting Words // Patrick , afraIT.com (function () { // Create object that have the context information about the field that we want to change it’s output render var bodyFiledContext
-
Progress bar in task list (de)
Die Standardanzeige innerhalb der Aufgabenliste lässt von Haus’ aus etwa zu wünschen übrig. Hier kommt das allseits beliebte CSR (Client Side Rendering) ins Spiel. Das Ergebnis sieht mit unten stehenden Skript wie folgt aus: Füge eine Aufgabenliste deiner Seite hinzu und verwende das nachfolgende Javascript um die Anzeige wie oben anzupassen: var taskSample = taskSample || {}; taskSample.CustomizeFieldRendering = function () { RegisterSod(‘hierarchytaskslist.js’, ‘/_layouts/15/hierarchytaskslist.js’); LoadSodByKey(‘hierarchytaskslist.js’, null); // Intialize the variables for overrides objects var overrideCtx = { Templates: { Fields: { ‘PercentComplete’: { ‘View’ : taskSample.PercentCompleteRendering } } } }; // Register the override of the field SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx); }
-
Progress bar in task list (en)
The out of the box look and feel of an task list could have been better. But there we can just use our favourite option. CSR = Client Side Rendering! We can get a great user experience if it looks like in the picutre below: And now how it works. Create a default tasklist and take the javascript below to get the progress bar: var taskSample = taskSample || {}; taskSample.CustomizeFieldRendering = function () { RegisterSod(‘hierarchytaskslist.js’, ‘/_layouts/15/hierarchytaskslist.js’); LoadSodByKey(‘hierarchytaskslist.js’, null); // Intialize the variables for overrides objects var overrideCtx = { Templates: { Fields: { ‘PercentComplete’: { ‘View’ : taskSample.PercentCompleteRendering } }
-
Traffic light column in custom list (en)
The final output looks like: If you want to get my icons you can get them here. The dropdown values of the column status are: I uploaded my traffic light icons here (http://sp13/teams/PublishingImages/Ampel/): (I guess your location is something different) Important: Don’t forget to publish them as a major version! In the picture below you can see, that there are 4 pictures saved as draft! Now save the Javascript below and upload it to your masterpage gallery and link it to a list like in my other post. If your column isn’t called “Status” you have to change this in
-
Traffic light column in custom list (de)
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
-
Highlight rows in list with CSR (de)
Füge einen Skripteditor auf der Seite der Liste ein, klicke auf Codeauschnitt bearbeiten (1) und innerhalb diesem füge das folgende Javascript ein (2): <script type=”text/javascript”> SP.SOD.executeFunc(“clienttemplates.js”, “SPClientTemplates”, function() { SPClientTemplates.TemplateManager.RegisterTemplateOverrides({ OnPostRender: function(ctx) { var statusColors = { ‘fertig’ : ‘#FFF1AD’, ‘gestoppt’ : ‘#FFD800’, ‘in Arbeit’ : ‘#01DF3A’ }; var rows = ctx.ListData.Row; for (var i=0;i<rows.length;i++) { var status = rows[i][“Status”];
