Agregar una página personalizada y un estilo a un complemento de SharePoint hospedado en SharePoint
Este es el séptimo de una serie de artículos sobre los conceptos básicos de desarrollo de un Complementos de SharePoint hospedado en SharePoint. Primero debe familiarizarse con Complementos de SharePoint y con los anteriores artículos de esta serie, los cuales puede encontrar en Introducción a la creación de complementos de SharePoint hospedados en SharePoint | Siguientes pasos.
Nota:
Si ha estado trabajando en esta serie sobre complementos hospedados por SharePoint, hay una solución de Visual Studio que puede usar para continuar con este tema. También puede descargar el repositorio que encontrará en SharePoint_SP-hosted_Add-Ins_Tutorials y abrir el archivo BeforePage.sln.
En este artículo, agregará una página de ayuda al complemento de SharePoint “Orientación para empleados”y lo configurará para usar una hoja de estilo CSS personalizada.
Agregar una página
En el Explorador de soluciones, haga clic con el botón derecho en la carpeta Páginas y seleccione Agregar>Nuevo elemento. Se abrirá el cuadro de diálogo Agregar nuevo elemento en el nodo Office/SharePoint.
Seleccione Página y asígnele el nombre Help.aspx.
Busque los dos elementos asp:Content del archivo y agregue el tercer marcado asp:Content en medio.
<asp:Content ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server"> Help </asp:Content>Busque el elemento asp:Content con el id. de PlaceholderAdditionalPageHead y agréguele el marcado siguiente.
<link rel="Stylesheet" type="text/css" href="../Content/App.css" />Busque el elemento asp:Content con el id. de PlaceHolderMain y quite los elementos secundarios que contenga.
Agregue lo siguiente como contenido al mismo elemento asp:Content.
<H3>Having a problem with the add-in?</H3> <p>Call the help line for Fabrikam Add-ins:</p> <p>1-555-555-5555</p>Guarde y cierre el archivo.
Abra el archivo Default.aspx.
Busque el elemento asp:Content con el id. de PlaceHolderMain y, después, agregue el marcado siguiente al final del elemento.
<p><asp:HyperLink runat="server" NavigateUrl="JavaScript:window.location = _spPageContextInfo.webAbsoluteUrl + '/Pages/Help.aspx';" Text="Get help for the Employee Orientation add-in" /></p>Guarde y cierre el archivo.
Agregar una clase de estilo a la hoja de estilo
En el Explorador de soluciones, abra el archivo app.css en la carpeta Contenido y, después, agregue la línea siguiente al archivo.
p {color: green;}Guarde y cierre el archivo.
Ejecutar y probar el complemento
Use la tecla F5 para implementar y ejecutar el complemento. Visual Studio instala temporalmente el complemento en el sitio de SharePoint de prueba y ejecuta el complemento inmediatamente.
Cuando se abra la página predeterminada del complemento, seleccione el vínculo Obtener ayuda sobre el complemento Orientación para empleados para abrir la página Ayuda.
Se abrirá su página personalizada y las dos líneas que puso entre etiquetas
<p>se mostrarán en verde.Figura 1. Página de ayuda
Para finalizar la sesión de depuración, cierre la ventana del explorador o detenga la depuración en Visual Studio. Cada vez que seleccione F5, Visual Studio retirará la versión anterior del complemento e instalará la más reciente.
Trabajará con este complemento y con la solución de Visual Studio en otros artículos. Es recomendable que vuelva a retirar el complemento cuando deje de trabajar con él por un tiempo. Haga clic con el botón derecho en el proyecto en el Explorador de soluciones y seleccione Retirar.
Pasos siguientes
En el siguiente artículo de esta serie, agregará una representación personalizada del lado cliente a un complemento de SharePoint hospedado en SharePoint.