Introducción a la creación de complementos de SharePoint hospedados en SharePointGet started creating SharePoint-hosted SharePoint Add-ins

Los complementos hospedados en SharePoint son uno de los dos tipos principales de complementos de SharePoint. Para obtener información general sobre los complementos de SharePoint y los dos tipos distintos, vea Complementos de SharePoint. Este es un resumen de los complementos hospedados en SharePoint:SharePoint-hosted add-ins are one of the two major types of SharePoint Add-ins. For an overview of SharePoint Add-ins and the two different types, see SharePoint Add-ins. Here's a summary of SharePoint-hosted add-ins:

  • Contienen listas de SharePoint, elementos web, flujos de trabajo, páginas personalizadas y otros componentes, todos los cuales se instalan en una subred, denominada web de complemento, del sitio web de SharePoint donde está instalado el complemento.They contain SharePoint lists, web parts, workflows, custom pages, and other components, all of which are installed on a subweb, called the add-in web, of the SharePoint website where the add-in is installed.
  • El único código que tienen es JavaScript en páginas de SharePoint personalizadas.The only code they have is JavaScript on custom SharePoint pages.

En este artículo, completará los pasos siguientes:In this article, you'll complete the following steps:

  • Configurar el entorno de desarrolloSet up your dev environment
  • Crear el proyecto de complementoCreate the add-in project
  • Código del complementoCode your add-in
  • Ejecutar el complemento y probar la listaRun the add-in and test the list

Configurar el entorno de desarrolloSet up your dev environment

Hay muchas maneras de configurar un entorno de desarrollo para Complementos de SharePoint. En esta sección se explica la forma más sencilla.There are many ways to set up a development environment for SharePoint Add-ins. This section explains the simplest way.

Obtener las herramientasGet the tools

Para Visual Studio 2017, la instalación de las herramientas de desarrollo de Microsoft Office debería realizarse mediante el instalador de Visual Studio 2017, al que puede obtener acceso desde la ventana Nuevo proyecto.For Visual Studio 2017, installing the Microsoft Office Developer Tools should be done through the Visual Studio 2017 Installer, which can be accessed from the New Project window.

Consulte las versiones anteriores de Visual Studio u otra documentación de Visual Studio.Reference earlier versions of Visual Studio or other Visual Studio documentation.

Registrarse para obtener una suscripción de Office 365 DeveloperSign up for an Office 365 developer subscription

Nota

Podría tener ya acceso a una suscripción de Office 365 Developer:You might already have access to an Office 365 developer subscription:

Para obtener un plan de Office 365:To get an Office 365 plan:

Abrir el sitio para desarrolladoresOpen your developer site

En un explorador, vaya a la colección de sitios de SharePoint que creó cuando configuró la suscripción de desarrollador de Office 365.In a browser, navigate to the SharePoint site collection you created when you setup your Office 365 developer subscription. (Si no tiene un sitio, siga las instrucciones que aparecen aquí).(If you don't have a site, follow the instructions here). Debería ver un sitio que se parece al de la figura siguiente.You should see a site that looks like the one in the following figure. La lista Aplicaciones/Complementos en pruebas en la página confirma que el sitio web se ha realizado con la plantilla de Sitio para desarrolladores de SharePoint.The Add-ins in Testing list on the page confirms that the website was made with the SharePoint Developer Site template. Si ve un sitio de grupo normal en su lugar, espere unos minutos y, después, reinicie el sitio.If you see a regular team site instead, wait a few minutes and then restart your site.

Nota

Anote la dirección URL del sitio (se usa al crear proyectos de complementos de SharePoint en Visual Studio).Make a note of the site's URL; it's used when you create SharePoint Add-in projects in Visual Studio.

Página principal del sitio para desarrolladores con la lista Aplicaciones/Complementos en pruebasYour developer site home page with the Add-ins in Testing list

Captura de pantalla donde se muestra la página principal del sitio para desarrolladores.

Crear el proyecto de complementoCreate the add-in project

  1. Inicie Visual Studio con la opción Ejecutar como administrador.Start Visual Studio by using the Run as administrator option.

  2. En Visual Studio, seleccione Archivo > Nuevo > Proyecto.In Visual Studio, select File > New > New Project.

  3. En el cuadro de diálogo Nuevo proyecto, expanda el nodo Visual C#, expanda el nodo Office/SharePoint y, después, seleccione Complementos > Add-in for SharePoint (Complemento para SharePoint).In the New Project dialog box, expand the Visual C# node, expand the Office/SharePoint node, and then select Add-ins > Add-in for SharePoint.

  4. Asigne el nombre EmployeeOrientation al proyecto y seleccione Aceptar.Name the project EmployeeOrientation, and then select OK.

  5. En el cuadro de diálogo Specify the Add-in for SharePoint Settings (Especificar el complemento para la configuración de SharePoint), especifique la dirección URL completa del sitio de SharePoint que desea utilizar para depurar el complemento.In the Specify the Add-in for SharePoint Settings dialog box, provide the full URL of the SharePoint site that you want to use to debug your add-in. Esta es la dirección URL del sitio para desarrolladores.This is the URL of the developer site. (Use HTTPS en lugar de HTTP en la dirección URL). En How do you want to host your SharePoint Add-in (¿Cómo desea hospedar su complemento de SharePoint?), seleccione Hospedado por SharePoint y después seleccione Finalizar.(Use HTTPS, not HTTP in the URL.) Under How do you want to host your SharePoint Add-in, select SharePoint-hosted, and then select Finish.

  6. Puede que se le pida que inicie sesión en su sitio para desarrolladores.You may be prompted to sign in to your developer site. Si es así, use las credenciales de administrador de su suscripción.If so, use your subscription administrator's credentials.

  7. Una vez creado el proyecto, abra el archivo /Pages/Default.aspx de la raíz del proyecto.After the project is created, open the file /Pages/Default.aspx from the root of the project. Entre otras cosas, este archivo generado carga uno o ambos scripts que se hospedan en SharePoint: sp.runtime.js y sp.js.Among other things, this generated file loads one or both of two scripts that are hosted on SharePoint: sp.runtime.js and sp.js. La marca para cargar estos archivos está en el control Content situado cerca de la parte superior del archivo que tiene el identificador PlaceHolderAdditionalPageHead.The markup for loading these files is in the Content control near the top of the file that has the ID PlaceHolderAdditionalPageHead. La revisión varía según la versión de Microsoft Office Developer Tools para Visual Studio que está usando.The markup varies depending on the version of Microsoft Office Developer Tools for Visual Studio that you are using. Esta serie de tutoriales requiere que ambos archivos se carguen mediante etiquetas normales HTML de <script>, en lugar de con etiquetas de <SharePoint:ScriptLink>.This series of tutorials requires that both files be loaded and that they be loaded with ordinary HTML <script> tags, not <SharePoint:ScriptLink> tags.

    Asegúrese de que las líneas siguientes están en el control PlaceHolderAdditionalPageHead, justo encima de la línea <meta name="WebPartPageExpansion" content="full" />:Ensure that the following lines are in the PlaceHolderAdditionalPageHead control, just above the line <meta name="WebPartPageExpansion" content="full" />:

    <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script> 
    <script type="text/javascript" src="/_layouts/15/sp.js"></script> 
    
  8. Busque en el archivo cualquier otra marca que también permita cargar uno de estos archivos y quite el marcado redundante.Search the file for any other markup that also loads one or the other of these files and remove the redundant markup. Guarde y cierre el archivo.Save and close the file.

Código del complementoCode your add-in

Para su primer complemento de SharePoint hospedado en SharePoint, tendrá que incluir la extensión de SharePoint clásica: una lista personalizada y una instancia de lista.For your first SharePoint-hosted SharePoint Add-in, we'll include the classic SharePoint extension: a custom list and list instance.

  1. En el Explorador de soluciones, abra el archivo AppManifest.xml.In Solution Explorer, open the AppManifest.xml file.

  2. Cuando se abra el diseñador de manifiestos, agregue un espacio entre las palabras en el campo Título para que se lea Employee Orientation.When the manifest designer opens, add a space between the words in the Title field so that it reads Employee Orientation. (No cambie el campo Nombre).(Do not change the Name field.)

  3. Guarde y cierre el archivo.Save and close the file.

  4. Haga clic con el botón derecho en el proyecto en Explorador de soluciones y seleccione Agregar > Nueva carpeta.Right-click the project in Solution Explorer and select Add > New Folder. Asigne un nombre a la carpeta Listas.Name the folder Lists.

  5. Haga clic con el botón secundario en la nueva carpeta y seleccione Agregar > Nuevo elemento.Right-click the new folder and select Add > New Item. Se abrirá el cuadro de diálogo Agregar nuevo elemento en el nodo Office/SharePoint.The Add New Item dialog opens to the Office/SharePoint node.

  6. Seleccione Lista.Select List. Asígnele el nombre NewEmployeeOrientation y, después, seleccione Agregar.Give it the name NewEmployeeOrientation, and then select Add.

  7. En la página Elegir configuración de la lista del Asistente para la personalización de SharePoint, deje el nombre para mostrar de la lista con el valor predeterminado NewEmployeeOrientation, seleccione el botón de opción Crear una plantilla de lista personalizable y una instancia de lista de ella y, en la lista desplegable, seleccione Predeterminado (lista personalizada). Después, seleccione Finalizar.On the Choose List Settings page of the SharePoint Customization Wizard, leave the list display name at the default NewEmployeeOrientation, select the Create a customizable list template and a list instance of it option button, select Default (Custom List) on the drop-down list, and then select Finish.

  8. El asistente crea una plantilla de lista NuevaOrientacionEmpleados con una instancia de lista secundaria llamada InstanciaDeNuevaOrientacionEmpleados. Es posible que se abra un diseñador de listas. Se usa en un paso posterior.The wizard creates a NewEmployeeOrientation list template with a child list instance named NewEmployeeOrientationInstance. A list designer may open. It is used in a later step.

  9. Expanda el nodo InstanciaDeNuevaOrientacionEmpleados en el Explorador de soluciones, si aún no lo está, de forma que puede distinguir claramente el archivo elements.xml que es un elemento secundario de la instancia de lista del archivo elements.xml que es un elemento secundario de la plantilla de lista.Expand the NewEmployeeOrientationInstance node in Solution Explorer, if it isn't already, so that you can clearly distinguish the elements.xml file that is a child of the list instance from the elements.xml file that is a child of the list template.

    Carpeta de lista con la plantilla NewEmployeeOrientation secundaria, que a su vez tiene tres elementos secundarios: una instancia NewEmployeeOrientationInstance, un archivo elements.xml y un archivo schema.xml. La propia instancia tiene un elemento secundario denominado elements.xml.

  10. Abra el elemento secundario elements.xml de la plantilla de lista NewEmployeeOrientation.Open the elements.xml child of the NewEmployeeOrientation list template.

  11. Agregue espacios al atributo DisplayName (no al atributo Nombre) para que sea más comprensible: "Nueva orientación para empleados".Add spaces to the DisplayName attribute (not the Name attribute) to make it friendlier: "New Employee Orientation."

  12. Establezca el atributo Descripción en "Información de orientación sobre nuevos empleados".Set the Description attribute to "Orientation information about new employees."

  13. Deje los otros atributos con su valor predeterminado, guarde el archivo y ciérrelo.Leave all other attributes at their default, save the file, and close it.

  14. Si el Diseñador de lista no está abierto, seleccione el nodo NewEmployeeOrientation en el Explorador de soluciones.If the list designer is not open, select the NewEmployeeOrientation node in Solution Explorer.

  15. Abra la pestaña Lista del diseñador. Esta pestaña se usa para configurar determinados valores de la lista instancia, no la lista plantilla, pero tiene algunos valores predeterminados que heredó de la plantilla.Open the List tab of the designer. This tab is used to set certain values for the list instance, not the list template, but it has some default values that it inherited from the template.

  16. Cambie los valores de la pestaña Lista por los siguientes:Change the values on the List tab to the following:

    • Título: Nuevos empleados de SeattleTitle: New Employees in Seattle
    • URL de lista: Listas/NuevosEmpleadosDeSeattleList URL: Lists/NewEmployeesInSeattle
    • Descripción: Los nuevos empleados de SeattleDescription: The new employees in Seattle
  17. Deje las casillas en su estado predeterminado, guarde el archivo y, a continuación, cierre el Diseñador.Leave the check boxes at their default status, save the file, and then close the designer.

  18. La instancia de lista podría tener el nombre antiguo en el Explorador de soluciones.The list instance may have its old name in Solution Explorer. Si es así, abra el menú contextual de NewEmployeeOrientationInstance, seleccione Cambiar el nombre de y cambie el nombre a NewEmployeesInSeattle.If so, open the shortcut menu for NewEmployeeOrientationInstance, select Rename, and change the name to NewEmployeesInSeattle.

  19. Abra el archivo schema.xml.Open the schema.xml file.

  20. En el elemento Vista cuyo valor BaseViewID es "0", cambie el elemento ViewFields existente por el siguiente marcado. (Use exactamente este GUID para el FieldRef llamado Title).In the View element whose BaseViewID value is "0", replace the existing ViewFields element with the following markup (use exactly this GUID for the FieldRef named Title). Pueden producirse saltos de línea en ubicaciones inesperadas del archivo schema.xml generado automáticamente.Line breaks may come at odd places in this autogenerated schema.xml file. Asegúrese de que ha encontrado las etiquetas de inicio y finalización coincidentes del elemento ViewFields.Be sure you have found the matching begin and end tags for the ViewFields element. Agregue saltos de línea para mejorar la legibilidad.Add line breaks to improve readability.

    <ViewFields>
      <FieldRef Name="Title" ID="{fa564e0f-0c70-4ab9-b863-0177e6ddd247}" DisplayName="Employee" />
    </ViewFields>
    
  21. En el archivo schema.xml, en el elemento Vista cuyo valor BaseViewID es "1", cambie el elemento ViewFields existente por el marcado siguiente. (Use exactamente este GUID del FieldRef denominado LinkTitle).Still in the schema.xml file, in the View element whose BaseViewID value is "1", replace the existing ViewFields element with the following markup (use exactly this GUID for the FieldRef named LinkTitle).

    <ViewFields>
      <FieldRef Name="LinkTitle" ID="{82642ec8-ef9b-478f-acf9-31f7d45fbc31}" DisplayName="Employee" />
    </ViewFields>
    
  22. Guarde y cierre el archivo schema.xml.Save and close the schema.xml file.

  23. Abra el archivo elements.xml, que es un elemento secundario de la instancia de lista NewEmployeesInSeattle (no el archivo elements.xml, que es un elemento secundario de plantilla de lista NewEmployeeOrientation).Open the elements.xml file that is a child of the list instance NewEmployeesInSeattle (not the elements.xml that is a child of the list template NewEmployeeOrientation).

  24. En este archivo, rellene la lista con algunos datos iniciales. Para ello, agregue el siguiente elemento de marcador Data como elemento secundario del elemento ListInstance.In this file, populate the list with some initial data. You do this by adding the following Data element markup as a child element of the ListInstance element.

    <Data>
      <Rows>
        <Row>
          <Field Name="Title">Tom Higginbotham</Field>
        </Row>
        <Row>
          <Field Name="Title">Satomi Hayakawa</Field>
        </Row>
        <Row>
          <Field Name="Title">Cassi Hicks</Field>
        </Row>
        <Row>
          <Field Name="Title">Lertchai Treetawatchaiwong</Field>
        </Row>
      </Rows>
    </Data>
    
  25. Guarde y cierre el archivo.Save and close the file.

  26. En el Explorador de soluciones, haga doble clic en Feature1 para abrir el Diseñador de características.In Solution Explorer, double-click Feature1 to open the Feature designer. En el diseñador, configure el Título en Componentes de la nueva orientación para empleados y configure la Descripción en Listas y otros componentes para conseguir que los empleados reciban orientaciones sobre la empresa.In the designer, set the Title to New Employee Orientation Components and set the Description to Lists and other components for getting employees oriented to the company. Guarde el archivo y, a continuación, cierre el Diseñador.Save the file, and then close the designer.

  27. Si no se cambió automáticamente el nombre de Feature1 en el Explorador de soluciones, abra el menú contextual, seleccione Cambiar nombre y cambie el nombre a NewEmployeeOrientationComponents.If the Feature1 in Solution Explorer has not been automatically renamed, open its shortcut menu, select Rename, and rename it to NewEmployeeOrientationComponents.

  28. Abra el archivo Default.aspx.Open the Default.aspx file.

  29. Busque el elemento Contenido de ASP.NET con el identificador PlaceHolderPageTitleInTitleArea.Find the ASP.NET Content element with the ID PlaceHolderPageTitleInTitleArea. Reemplace la cadena predeterminada Título de página por Nuevos empleados según la ubicación.Replace the default string Page Title with New Employees by Location.

  30. Busque el elemento Contenido de ASP.NET con el identificador PlaceHolderMain.Find the ASP.NET Content element with the ID PlaceHolderMain. Reemplace sus contenidos por el siguiente marcado.Replace its contents with the following markup. _spPageContextInfo es un objeto de JavaScript que SharePoint incluye automáticamente en la página.The _spPageContextInfo is a JavaScript object that SharePoint automatically includes on the page. Su propiedad webAbsoluteUrl devuelve la dirección URL de la web del complemento.It's webAbsoluteUrl property returns the URL of the add-in web.

    <p><asp:HyperLink runat="server" 
    NavigateUrl="JavaScript:window.location = _spPageContextInfo.webAbsoluteUrl + '/Lists/NewEmployeesInSeattle/AllItems.aspx';" 
    Text="New Employees in Seattle" /></p>
    

Ejecutar el complemento y probar la listaRun the add-in and test the list

  1. Use la tecla F5 para implementar y ejecutar el complemento.Use the F5 key to deploy and run your add-in. Visual Studio instala temporalmente el complemento en el sitio de SharePoint de prueba y ejecuta el complemento inmediatamente.Visual Studio makes a temporary installation of the add-in on your test SharePoint site and immediately runs the add-in. (Para averiguar cómo los usuarios finales ejecutan un complemento de SharePoint instalado, vea Siguientes pasos).(To find out how end users run an installed SharePoint Add-in, see Next Steps.)

  2. Cuando se abra la página predeterminada del complemento, seleccione el vínculo New Employees in Seattle (Nuevos empleados en Seattle) para abrir la instancia de lista personalizada.When the add-in's default page opens, select the New Employees in Seattle link to open the custom list instance.

    La página predeterminada del complemento se muestra con su título Nuevos empleados por ubicación. Hay un vínculo con la etiqueta Nuevos empleados de Seattle. Una flecha parte desde este vínculo y señala a la página de vista de listas para la lista. El título de la página es Nuevos empleados de Seattle, con la lista debajo del título.

  3. Agregue y elimine elementos de la lista.Add and delete items from the list.

  4. Para terminar la sesión de depuración, cierre la ventana del explorador o detenga la depuración en Visual Studio. Cada vez que presione F5, Visual Studio retirará la versión anterior del complemento e instalará la más reciente.To end the debugging session, close the browser window or stop debugging in Visual Studio. Each time that you press F5, Visual Studio will retract the previous version of the add-in and install the latest one.

  5. 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.You will work with this add-in and Visual Studio solution in other articles, and it's a good practice to retract the add-in one last time when you are finished working with it for a while. En el proyecto, haga clic con el botón derecho en el Explorador de soluciones y seleccione Retirar.Right-click the project in Solution Explorer, and select Retract.

Pasos siguientesNext steps

Para crear los complementos, siga los pasos siguientes en este orden:To create your add-ins, walk through the following steps in this order:

  1. Implementar e instalar un complemento hospedado en SharePoint para SharePointDeploy and install a SharePoint-hosted SharePoint Add-in
  2. Agregar columnas personalizadas a un complemento de SharePoint hospedado en SharePointAdd custom columns to a SharePoint-hosted SharePoint Add-in
  3. Agregar un tipo de contenido personalizado a un complemento de SharePoint hospedado en SharePointAdd a custom content type to a SharePoint-hosted SharePoint Add-in
  4. Agregar un elemento web a una página en un complemento de SharePoint hospedado en SharePointAdd a web part to a page in a SharePoint-hosted SharePoint Add-in
  5. Agregar un flujo de trabajo a un complemento hospedado en SharePoint para SharePointAdd a workflow to a SharePoint-hosted SharePoint Add-in
  6. Agregar una página y un estilo personalizados a un complemento hospedado en SharePoint para SharePointAdd a custom page and style to a SharePoint-hosted SharePoint Add-in
  7. Agregar representación del lado cliente personalizada a un complemento de SharePoint hospedado en SharePointAdd custom client-side rendering to a SharePoint-hosted SharePoint Add-in
  8. Crear un botón personalizado de cinta de opciones en la web de host de un complemento de SharePointCreate a custom ribbon button in the host web of a SharePoint Add-in
  9. Usar las API de JavaScript de SharePoint para trabajar con datos de SharePointUse the SharePoint JavaScript APIs to work with SharePoint data
  10. Trabajar con datos de web de host de JavaScript en la web de complementoWork with host web data from JavaScript in the add-in web