Bienvenue à Blogs CodeS-SourceS Identification | Inscription | Aide

Jean-Christophe Brabant

SharePoint, HTML5, UX,PowerShell, ...
[SharePoint Online] Comment référencer Script js et Css dans une masterpage

Dans le cadre de développement d’application sur SharePoint Online, il nous est impossible de créer des pages au niveau du “Layout”, dû au développement sandboxed des solutions.

Il nous est donc impossible d’y placer des fichiers pour les référencer simplement dans une masterpage.

Pour utiliser des scripts JS et fichiers CSS dans notre application, nous sommes obligé de stocker les fichiers dans une librairie de document dans le site SharePoint afin de pouvoir les référencer dans notre masterpage.

Afin de référencer les fichiers Js ou css nous pourrions utiliser la balise <script> HTML. Ainsi lorsque nous allons référencer ces fichiers, nous allons vouloir les situer de manières relatives à l’adresse de la collection de site. Malheureusement nous ne connaissons pas cette adresse à l’avance.

Le seul moyen est d’utiliser les tokens SharePoint, notamment un très utile pour récupérer cette adresse : ~sitecollection.

Cependant, ce token n’est utilisable que dans des balises server grâce au SPUrlExpressionBuilder : $SPUrl 

   1: <%$SPUrl:~SiteCollection/SiteAssets/js/jquery-1.8.0.min.js%>

Fichier Js

Pour référencer les fichiers Js, nous utiliserons la balise <asp:ScriptManager>.

   1: <asp:ScriptManager id="ScriptManager" runat="server" EnablePageMethods="false" EnablePartialRendering="true" EnableScriptGlobalization="false" EnableScriptLocalization="true">
   2:     <Scripts>
   3:         <asp:ScriptReference Path="<%$SPUrl:~SiteCollection/SiteAssets/js/jquery-1.8.0.min.js%>"></asp:ScriptReference>
   4:     </Scripts>
   5: </asp:ScriptManager>

Il nous appartiendra ensuite de gérer le côté relatif à l’intérieur des scripts.

Fichier Css

De la même manière, nous pourrons référencer ces fichiers avec la balise <SharePoint:CssRegistration>.

   1: <SharePoint:CssRegistration ID="Default" Name="<%$SPUrl:~SiteCollection/SiteAssets/css/perso.css%>" After="corev4.css" runat="server"></SharePoint:CssRegistration>

L’avantage des fichiers css, c’est que l’ensemble des liens qui sont listé à l’intérieur, sont relatifs au fichier et non à la page qui l’appel.

Vous pourrez désormais vous amuser en jouant avec les scripts Js et fichiers Css.

Bon code,

Jicay

Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :
Posted: lundi 12 novembre 2012 07:30 par Lauzange

Commentaires

Pas de commentaires

Les commentaires anonymes sont désactivés

Les 10 derniers blogs postés

- Office 365: Script PowerShell pour auditer l’usage des Office Groups de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 11:02

- Office 365: Script PowerShell pour auditer l’usage de Microsoft Teams de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 10:39

- Office 365: Script PowerShell pour auditer l’usage de OneDrive for Business de votre tenant par Blog Technique de Romelard Fabrice le 04-25-2019, 15:13

- Office 365: Script PowerShell pour auditer l’usage de SharePoint Online de votre tenant par Blog Technique de Romelard Fabrice le 02-27-2019, 13:39

- Office 365: Script PowerShell pour auditer l’usage d’Exchange Online de votre tenant par Blog Technique de Romelard Fabrice le 02-25-2019, 15:07

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Stream Portal par Blog Technique de Romelard Fabrice le 02-21-2019, 17:56

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Video Portal par Blog Technique de Romelard Fabrice le 02-18-2019, 18:56

- Office 365: Script PowerShell pour extraire les Audit Log basés sur des filtres fournis par Blog Technique de Romelard Fabrice le 01-28-2019, 16:13

- SharePoint Online: Script PowerShell pour désactiver l’Option IRM des sites SPO non autorisés par Blog Technique de Romelard Fabrice le 12-14-2018, 13:01

- SharePoint Online: Script PowerShell pour supprimer une colonne dans tous les sites d’une collection par Blog Technique de Romelard Fabrice le 11-27-2018, 18:01