SharePoint – Modyfikowanie widoku za pomocą JSLink

JSLinki są to skrypty w JavaScripcie które umożliwiają renderowanie kontrolek po stronie użytkownika. Za pomocą tych skryptów można zmienić ich wygląd na formularzach wyświetlania, edycji i dodawania nowego elementu, a także widoki listy. W tym wpisie zaprezentuję prosty przykład zmiany widoku.

Założenia

Mam listę składającą się z kolumn:

  • Tytuł – pole tekstowe
  • Pole1 – typu Tak/Nie
  • Pole2 – typu Tak/Nie
  • Pole3 – typu Tak/Nie

Sama lista po zapełnieniu danymi prezentuje się tak:
splist1
Jak widać widok listy jest mało czytelny. Aby poprawić widok pokoloruję wszystkie pola które mają wartość Tak.

Skrypt

Tworzymy plik myListTemplate.js i wklejamy poniższy skrypt:

function myTemplate(){
   function viewTemplate(ctx, fieldSchema, item, view) {
	var value = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
	var result ="";
	if(value=="Tak") 
           result = "<div style='background-color: lightGreen; width:50px'>Tak</div>";
        return result;
   }
	
   var context = {};
   context.Templates = {};
   context.Templates.Fields = {
	"Pole1":{"View":viewTemplate},
	"Pole2":{"View":viewTemplate},
	"Pole3":{"View":viewTemplate}
   }
	
   SPClientTemplates.TemplateManager.RegisterTemplateOverrides(context);
}

(function () {
    ExecuteOrDelayUntilScriptLoaded(myTemplate, 'clienttemplates.js');
})();

W linijkach @10-@16 tworzymy obiekt za pomocą którego określamy jaka kolumna, w którym miejscu i za pomocą jakiej funkcji będzie renderowana. W tym przypadku kolumny Pole1, Pole2 i Pole3, w jakimkolwiek widoku (nie formularzu!), będą renderowane za pomocą funkcji viewTemplate.
W linijce @18 rejestrujemy nasz obiekt.
Teraz, gdy wywołany będzie jakiś widok, przy każdej kolumnie będzie wywołana funkcja @2 viewTemplate(): w linijce @3 pobieramy wartość renderowanej kolumny. W linijce @5 sprawdzam pobraną wartość i jeżeli jest równa „Tak” będę zwracał pokolorowanego diva – w przeciwny przypadku zwracany będzie pusty string.

Konfiguracja

Teraz pora skonfigurować listę tak, aby korzystała z powyższego skryptu:

  • Skrypt umieszczamy w bibliotece Elementy Zawartości Witryny (Site Assets)
  • Przechodzimy do naszej listy i przełączamy stronę w tryb edycji (kółko zębate w prawym górnym rogu –>Edytuj stronę)
  • Przełączamy webpart z listą w tryb edycji (klikamy na odwrócony trójkąt w prawym górnym rogu ramki web parta i wybieramy Edytuj skłądnik Web Part) spwebpart1
  • W otwartych właśnie ustawieniach Web Parta rozwijamy sekcję Różne
  • W polu Łącze JS wpisujemy ~Site/SiteAssets/myListTemplate.js
  • Dodatkowo należy się upewnić czy checkbox przy pozycji Renderowanie przez serwer nie jest zaznaczony
  • Zapisujemy wszystko i przeładowujemy stronę

Efekt jest następujący:
splist2

Modyfikowanie nazw kolumn

Na koniec chciałbym zmienić nazwy nagłówków kolumn. Można to oczywiście zrobić w ustawieniach listy, ale chcę aby nazwy kolumn nie zmieniły się na formularzach, ale w widoku miały skrócone nazwy. Aby to zrobić należy do naszego obiektu konfiguracyjnego dodać pole OnPreRender wskazujące na funkcję która będzie wykonywana przed załadowaniem widoku:

function changeColumnName(ctx, fieldName, newName) {
  for (var i = 0; i < ctx.ListSchema.Field.length; i++) {
    if (ctx.ListSchema.Field[i].Name === fieldName) {
       ctx.ListSchema.Field[i].DisplayName = newName;
    }
  }
}

function myListPreRender(ctx){
   changeColumnName(ctx,"Pole1","P1")
   changeColumnName(ctx,"Pole2","P2")
   changeColumnName(ctx,"Pole3","P3")
}
var context = {};
context.OnPreRender = myListPreRender;

Funkcja changeColumnName znajduje w schemacie listy przesłanym wraz z kontekstem (ctx.ListSchema), kolumnę którą chcemy zmienić …i zmienia jej nazwę wyświetlaną (oczywiście tylko w tym widoku).
A oto rezultat:
splist3

Cały skrypt:

function myTemplate(){
	function viewTemplate(ctx, fieldSchema, item, view) {
		var value = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
		var result ="";
		if(value=="Tak") result = "<div style='background-color: lightGreen; width:50px'>Tak</div>";
        return result;
	}
	function changeColumnName(ctx, fieldName, newName) {
        for (var i = 0; i < ctx.ListSchema.Field.length; i++) {
            if (ctx.ListSchema.Field[i].Name === fieldName) {
                ctx.ListSchema.Field[i].DisplayName = newName;
            }
        }
    }
	
	function myListPreRender(ctx){
		changeColumnName(ctx,"Pole1","P1")
		changeColumnName(ctx,"Pole2","P2")
		changeColumnName(ctx,"Pole3","P3")
	}
	
	var context = {};
	context.Templates = {};
	context.OnPreRender = myListPreRender;
    context.Templates.Fields = {
		"Pole1":{"View":viewTemplate},
		"Pole2":{"View":viewTemplate},
		"Pole3":{"View":viewTemplate}
	}
	
	SPClientTemplates.TemplateManager.RegisterTemplateOverrides(context);
}

(function () {
    ExecuteOrDelayUntilScriptLoaded(myTemplate, 'clienttemplates.js');
})();

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *