SharePoint: herramientas de desarrollo

En este capítulo, cubriremos los diferentes niveles de "desarrollo" relacionados con SharePoint. Cada nivel sirve al usuario final del sitio de SharePoint de alguna manera. Puede dividir este espectro en lo siguiente:

End users - que utilizan la plataforma como plataforma de aplicaciones.
Power users - que crean y administran (y tal vez marca) sitios.
Designers - quién marca el sitio y construye la experiencia del usuario.
Developers - que crean e implementan aplicaciones.

Varias personas interactúan con SharePoint, desde los desarrolladores hasta los usuarios finales. Está representado en la siguiente figura

Configuración del sitio

La configuración del sitio es una de las partes principales de SharePoint. Es muy importante que estemos familiarizados con él.

Step 1 - Para acceder a la página Configuración del sitio, haga clic en User Profile en SharePoint Admin center. Haga clic en la opciónSetup My Site en Configuración de Mi sitio.

Se abrirá la siguiente página.

Encontrará la mayoría de las configuraciones para su sitio en esta página, como:

Cambie el tema de su sitio.
Activar funciones.
Administrar permisos.

Step 2- Algunas opciones de configuración también están disponibles en Configuración. Entonces haga clic en Configuración en el panel izquierdo.

Tenga en cuenta que las funciones principales de la página Configuración del sitio se dividen en categorías principales. Por ejemplo, la mayoría de las configuraciones de seguridad están disponibles para usted en la categoría Usuarios y permisos, temáticas en Galerías de diseñadores web, etc.

Agregar página HTML

La experiencia de edición abarca desde formatear texto hasta agregar imágenes o multimedia. Puede introducir un poco más en el código incorporando HTML directamente en su sitio de SharePoint.

Esta tarea se siente un poco más como un desarrollo, así que echemos un vistazo a un ejemplo simple agregando una página HTML.

Step 1- Abra su sitio de SharePoint y navegue hasta la página de inicio del sitio. En la pestaña Página, haga clic en la opción de menú Editar.

Step 2 - En la pestaña INSERTAR, haga clic en la opción Código incrustado.

Se abrirá el siguiente cuadro de diálogo:

Step 3 - Agregue algún código HTML en el campo de código como se muestra a continuación -

Step 4 - Click Insert y verá que se inserta el fragmento HTML.

Step 5 - Click Save.

Puede ver que el código HTML está insertado en su sitio de SharePoint.

Agregar archivo multimedia

Para agregar una aplicación de Media Player a su sitio de SharePoint, abra su sitio de SharePoint y navegue hasta la página de inicio del sitio.

Step 1 - En la pestaña Página, haga clic en la opción de menú Editar.

Step 2 - Seleccione la opción Elemento web.

Step 3 - Seleccione los medios y el contenido de Categories y seleccione el Media with Partsde la sección de Piezas. Hacer clicAdd.

Step 4 - Guarde la página y verá la siguiente página, que contiene el archivo multimedia.

Diseñador de SharePoint

Muchos desarrolladores prefieren no usar SharePoint Designer como herramienta para desarrollar un sitio de SharePoint. Sin embargo, el punto es que la herramienta SharePoint Designer puede facilitar algunas tareas de desarrollo.

Las características importantes son:

SharePoint Designer se puede usar para una variedad de funciones de diseñador para SharePoint, incluida la creación y edición de sitios, páginas, listas y tipos de contenido.
SharePoint Designer también es útil para crear un flujo de trabajo declarativo basado en reglas que luego se puede importar en Visual Studio para una personalización de nivel más profundo.
Se puede descargar e instalar desde https://www.microsoft.com/en-pk/download/details.aspx?id=35491
Cuando abre SharePoint Designer por primera vez, debe proporcionarle la URL de su sitio de SharePoint y autenticarse como un usuario elevado.
SharePoint Designer hereda los permisos estándar de SharePoint.
Después de abrir su sitio en SharePoint Designer, aparecen varias opciones navegables y cierta información sobre su sitio, como metadatos del sitio, permisos, subsitios, etc.

Entonces, usemos SharePoint Designer, pero primero debemos configurar SharePoint Designer usando Office 365 abriendo su sitio de SharePoint.

Step 1 - Abra el sitio de SharePoint.

Step 2- Seleccione la opción de menú Configuración de Office 365. Seleccione Configuración en el panel izquierdo y luego seleccione el software en el panel central.

Step 3 - Seleccionar Tools & add-insen el panel izquierdo y verá las diferentes opciones. Al final verá la opción de SharePoint Designer, haga clic en el enlace.

Step 4- Abra SharePoint Designer después de la instalación. Haga clic en elOpen Site opción.

Step 5 - Especifique la URL de su sitio de SharePoint y haga clic en Abrir.

Step 6 - Una vez que el sitio de SharePoint Designer esté abierto, verá que hay diferentes opciones disponibles.

Step 7 - Haga clic en Listas de SharePoint en la cinta y seleccione Tareas en el menú.

Step 8- Se abre un nuevo cuadro de diálogo. Especifique el nombre y la descripción y haga clic en Aceptar.

Step 9 - Vayamos al mismo sitio, utilizando el portal y verá la lista de tareas pendientes en su sitio.

Visual Studio y Expression Blend

También puedes usar Visual Studio y Blendpara agregar contenido a su sitio de SharePoint. Visual Studio ofrece muchas características para ayudar a desarrollar aplicaciones en SharePoint; Es útil familiarizarse con ellos en detalle.

Echemos un vistazo a un ejemplo sencillo de una aplicación alojada en SharePoint abriendo Visual Studio. SeleccioneFile → New → Project opción.

Step 1 - Abra Visual Studio y seleccione el File → New → Project menu.

Step 2 - En el panel izquierdo, seleccione Templates → Visual C# → Office/SharePoint y luego en el panel central seleccione App for SharePoint.

Ingrese el Nombre en el campo Nombre, haga clic en Aceptar y verá el siguiente cuadro de diálogo.

En la Nueva aplicación para SharePoint, debemos agregar la URL del sitio de SharePoint que queremos depurar y luego seleccionar el modelo alojado en SharePoint como la forma en que desea alojar su aplicación para SharePoint.

Step 3 - Vaya al centro de administración de SharePoint y copie la URL de SharePoint.

Step 4 - Pegue la URL en el New App for SharePoint cuadro de diálogo como se muestra a continuación.

Step 5 - Click Next y abrirá el Connect to SharePoint cuadro de diálogo donde necesitamos iniciar sesión.

Step 6 - Ingrese sus credenciales y haga clic en el Sign inbotón. Una vez que haya iniciado sesión correctamente en el sitio de SharePoint, verá el siguiente cuadro de diálogo:

Step 7 - Click Finish. Una vez creado el proyecto, haga clic en elAppMenifest.xml archivo en el Explorador de soluciones.

Step 8 - Haga clic en el Permissionslengüeta. Se abrirá una lista desplegable de Ámbito.

Step 9 - En la lista desplegable Alcance, seleccione Web, que es el alcance de los permisos que está configurando. En la lista desplegable Permiso, seleccioneRead, que es el tipo de permiso que está configurando.

Step 10 - Abra el archivo Default.aspx y reemplácelo con el siguiente código.

<%-- The following 4 lines are ASP.NET directives needed when 
   using SharePoint components --%>

<%@ Page Inherits = "Microsoft.SharePoint.WebPartPages.WebPartPage,
   Microsoft.SharePoint, Version = 15.0.0.0, Culture = neutral,
   PublicKeyToken = 71e9bce111e9429c" MasterPageFile = "~masterurl/default.master"
   Language = "C#" %>

<%@ Register TagPrefix = "Utilities" Namespace = "Microsoft.SharePoint.Utilities"
   Assembly = "Microsoft.SharePoint, Version = 15.0.0.0, Culture = neutral,
   PublicKeyToken = 71e9bce111e9429c" %>

<%@ Register TagPrefix = "WebPartPages"
   Namespace = "Microsoft.SharePoint.WebPartPages" Assembly = "Microsoft.SharePoint,
   Version = 15.0.0.0, Culture = neutral, PublicKeyToken = 71e9bce111e9429c" %>

<%@ Register TagPrefix = "SharePoint"
   Namespace = "Microsoft.SharePoint.WebControls" Assembly = "Microsoft.SharePoint,
   Version = 15.0.0.0, Culture = neutral, PublicKeyToken = 71e9bce111e9429c" %>

<%-- The markup and script in the following Content element 
   will be placed in the <head> of the page --%>

<asp:Content ID = "Content1" ContentPlaceHolderID = "PlaceHolderAdditionalPageHead" 
   runat = "server">
   <script type = "text/javascript" src = "../Scripts/jquery- 1.6.2.min.js"></script>
   <link rel = "Stylesheet" type = "text/css" href = "../Content/App.css" />
   <script type = "text/javascript" src = "../Scripts/App.js"></script>
</asp:Content>

<asp:Content ID = "Content2" ContentPlaceHolderID = "PlaceHolderMain" runat = "server">
   
   <script type = "text/javascript"> 
      function hello() {
         var currentTime = new Date();
         $get("timeDiv").innerHTML = currentTime.toDateString();
      }
   </script>
   
   <div id = "timeDiv"></div>
   <input type = "button" value = "Push me!" onclick = "hello();" />
</asp:Content>

Step 11- Vaya al Explorador de soluciones, haga clic con el botón derecho en el proyecto y seleccione Publicar. Haga clic en elPackage the appbotón. Esto crea su aplicación alojada en SharePoint y la prepara para su implementación en su sitio de SharePoint.

Verá la siguiente carpeta, que contiene el archivo * .app.

Step 12 - Navegue a su sitio en línea de SharePoint.

Step 13 - Click Apps for SharePointen el panel izquierdo. Se abrirá una nueva página.

Step 14 - Arrastre sus archivos aquí para cargarlos.

Una vez que se cargue el archivo, verá la siguiente página:

Step 15 - Haga clic en la opción - Site Contentsen el panel izquierdo. Haga clic en eladd an app icono como se muestra en la siguiente captura de pantalla:

Se abrirá una nueva página.

Step 16 - Seleccionar Your Apps → From Your Organizationen el panel izquierdo y verá que la aplicación está disponible para su instalación. Haz clic en la aplicación.

Step 17- Cuando hace clic en la aplicación, se abre un cuadro de diálogo como se muestra en la siguiente captura de pantalla. Hacer clicTrust it.

Step 18- Verás que la aplicación está instalada. Una vez que se complete la instalación, puede hacer clic en la aplicación.

Verá la siguiente página, que contiene un botón:

Cuando haces clic en el Push me , mostrará la fecha actual.

↰ Previous page Next page ↱