Ampliando mi último artículo sobre SharePoint Apps en el que trataba el escenario de incluir el entorno (chrome) de SharePoint en una SharePoint App Auto-hosted, quería compartir cómo incluir los estilos de SharePoint 2013 para que consigamos mejorar aún más la sensación de seguir dentro del sitio y, por tanto, del contexto de SharePoint.
Supongamos que queremos conseguir el siguiente efecto
Tal y como especifiqué en su día cuando explicaba cómo incluir el chrome de SharePoint 2013, en la cabecera HTML de la app, debíamos tener una cabecera tal que así:
1: <head runat="server">
2: <title>Santiago Porras Rodríguez - My SharePoint App with SharePoint Style</title>
3: <script src="http://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js" type="text/javascript"> </script>
4: <script src="../Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
5: <script type="text/javascript">
6: var hostweburl;
7:
8: // Load the SharePoint resources.
9: $(document).ready(function () {
10: // Get the URI decoded app web URL.
11: hostweburl = decodeURIComponent(getQueryStringParameter("SPHostUrl"));
12: // The SharePoint js files URL are in the form: web_url/_layouts/15/resource.js
13: var scriptbase = hostweburl + "/_layouts/15/";
14: // Load the js file and continue to the success handler.
15: $.getScript(scriptbase + "SP.UI.Controls.js", function () {
16: var chromeOptions = {
17: siteUrl: hostweburl,
18: userName: '',
19: siteTitle: "SharePoint Styled App",
20: appTitle: "SharePoint Styled App",
21: appIconUrl: "/Images/MyIcon.png"
22: };
23: var nav = new SP.UI.Controls.Navigation("chrome_ctrl_container", chromeOptions);
24: nav.setVisible(true);
25: });
26: });
27:
28: // Function to retrieve a query string value. For production purposes you may want to use a library to handle the query string.
29: function getQueryStringParameter(paramToRetrieve) {
30: var params = document.URL.split("?")[1].split("&");
31: var strParams = "";
32: for (var i = 0; i < params.length; i = i + 1) {
33: var singleParam = params[i].split("=");
34: if (singleParam[0] == paramToRetrieve)
35: return singleParam[1];
36: }
37: }
38: </script>
39: </head>
De esta cabecera, vamos a tener en cuenta la línea marcada en rojo donde se establece el valor de la variable hostweburl porque la vamos a necesitar para establecer la ruta.
En el body, tal y como se ilustra en el ejemplo, tenemos el siguiente contenido:
1: <form id="form1" runat="server">
2: <div>
3: Awesome!!! I'm into SharePoint 2013 Chrome!!!
4: <div style="margin-top: 50px; border: 1px solid #0094ff;">
5: <p>Accent text </p>
6: <p>Error text </p>
7: <p>In a rectangle, heavily emphasized </p>
8: <p>Border of an emphasized element </p>
9: </div>
10: </div>
11: </form>
En primer lugar, debemos incluir la hoja de estilos de SharePoint 2013, para lo cuál añadimos el siguiente código JavaScript en la cabecera (head) de la página :
1: loadCSS(hostweburl + "/_layouts/15/defaultcss.ashx");
2:
3: function loadCSS(url) {
4: var fileref = document.createElement("link")
5: fileref.setAttribute("rel", "stylesheet")
6: fileref.setAttribute("type", "text/css")
7: fileref.setAttribute("href", url)
8: }
Como podéis ver, hacemos uso de la variable hostweburl que os comenté que habría que tener en cuenta para poder alcanzar nuestro objetivo.
Después de haber incluido el código JavaScript, tan sólo tendremos que seleccionar cuál es el estilo que se adapta a nuestras pretensiones de entre los que nos indica Microsoft en este enlace y aplicarlo a los elementos del contenido, con lo que finalmente nos queda el siguiente cuerpo de la página:
1: <form id="form1" runat="server">
2: <div>
3: Awesome!!! I'm into SharePoint 2013 Chrome!!!
4: <div style="margin-top: 50px; border: 1px solid #0094ff;">
5: <p class="ms-accentText">Accent text </p>
6: <p class="ms-error">Error text </p>
7: <p class="ms-emphasis">In a rectangle, heavily emphasized </p>
8: <p class="ms-emphasisBorder">Border of an emphasized element </p>
9: </div>
10: </div>
11: </form>
Y…. ¡todo listo! Llegados a este punto ya podremos aplicar los estilos de SharePoint 2013 a una SharePoint App Auto-hosted.
NOTA: Si ya tenemos incluido el «chrome» de SharePoint, se supone que ya está cargada la hoja de estilos con lo que no debería hacer falta incluirla a mano. Así que, en el artículo anterior, todo esto debería funcionar sin necesidad de cargar el fichero con los estilos.
