Personaliser le header et footer des listes avec JSLink

Share on FacebookTweet about this on TwitterShare on LinkedInShare on Google+

Dans ce post, nous présenterons de manière simplifiée comment personnaliser le header et le footer avec JSLink dans SharePoint 2013.

Créer la liste et l’insérer dans une page au travers d’une web part de liste

Liste SharePoint simple
Liste SharePoint simple

Bien entendu en pré requis il faut créer une liste, et insérer la vue de la liste au travers d’une webpart de liste dans une page.

Créer la fonction JSLink

Dans une fichier que l’on nommera JSLinkHeaderFooter.js nous allons overrider les propriétés Header et Footer du template du context:

Ajouter le fichier aux pièces jointes du site

Nous ajoutons ensuite la fichier JSLinkHeaderFooter.js aux pièces jointes du site afin qu’il soit accessible depuis la page (http://monsite/SiteAssets)

Editer la web part pour ajouter le lien JSLink

Il ne reste plus qu’a éditer la webpart pour ajouter le lien JSLink vers le fichier

Parametres JSLink de la webpart
Paramètres JSLink de la webpart

Une fois appliqué les header et footer de la liste sont visible.

Liste personalisée
Liste personalisée

Bon c’est très moche mais c’est pas l’objet du post :). L’esthétique sera traité une prochaine fois

Share on FacebookTweet about this on TwitterShare on LinkedInShare on Google+

Laisser un commentaire

Top