sharepoint
Creación de una aplicación alojada por el proveedor
Buscar..
Entorno de desarrollo de ajuste
Para comenzar con el desarrollo de aplicaciones necesitamos Visual Studio 2013 o una versión superior. Descargue la última edición de la comunidad o expresión desde aquí> https://www.visualstudio.com/products/free-developer-offers-vs
Una vez descargado e instalado
Abrir y hacer clic crear nuevo proyecto
expandir la sección Office / SharePoint debería ver una opción para la aplicación como se muestra a continuación.
Si la opción de aplicación no está disponible Cierre el VS, descargue e instale Microsoft Office Developer Tools https://www.visualstudio.com/en-us/features/office-tools-vs.aspx
Preparación para el sitio de desarrollador
Una vez que tengamos Visual Studio, necesitamos un sitio para desarrolladores para implementar aplicaciones en SharePoint. La forma más sencilla de obtener es> Registrarse para obtener una cuenta de desarrollador de Office 365 gratuita en un año https://profile.microsoft.com/RegSysProfileCenter/wizardnp.aspx?wizid=14b845d0-938c-45af-b061ffb4d170&lcid=1033
Una vez que finalice el proceso de registro https://www.office.com/ center URL para toda su aplicación
Crear una aplicación en Visual Studio
Comencemos con la creación de nuestra primera aplicación.
- Ingrese la URL de su sitio de desarrollador creada en el paso anterior y seleccione Hospedado por el proveedor
Se abrirá una ventana emergente que abrirá para iniciar sesión
El siguiente paso será en cuanto al tipo de aplicación, ya sea seleccionar MVC o Webform. Estoy seleccionando MCV aquí
En ¿Cómo desea que su complemento se autentique?, Elija Usar el Servicio de control de acceso de Windows Azure y haga clic en Finalizar
En explorador de soluciones podemos ver 2 proyectos creados. Una es la parte de la aplicación de SharePoint y la otra es la aplicación web asp.net
Vamos a empezar a codificar
Aquí estoy tomando el ejemplo de una aplicación de noticias básica.
Abra el sitio para desarrolladores de SharePoint y cree una lista para almacenar nuestros artículos de noticias
Cree una lista personalizada y agregue 3 columnas más Cuerpo, Summery, ThumbnailImageUrl
Regrese a nuestra aplicación de SharePoint, abra el archivo AppManifest.xml, haga clic en la pestaña de permisos y otorgue permiso de Lectura a la colección de sitios y guárdela.
Abrir HomeController desde la aplicación web, en mi caso es una aplicación MVC. Si está creando una aplicación de formulario web, su código debería estar en la página default.aspx.cs
A continuación se muestra el fragmento de código para obtener las últimas noticias de la lista. Así debería ser nuestra página de índice.
[SharePointContextFilter] public ActionResult Index() { User spUser = null; var spContext = SharePointContextProvider.Current.GetSharePointContext(HttpContext); List<NewsList> newsList = new List<NewsList>(); using (var clientContext = spContext.CreateUserClientContextForSPHost()) { if (clientContext != null) { spUser = clientContext.Web.CurrentUser; clientContext.Load(spUser, user => user.Title); clientContext.ExecuteQuery(); ViewBag.UserName = spUser.Title; List lst = clientContext.Web.Lists.GetByTitle("News"); CamlQuery queryNews = CamlQuery.CreateAllItemsQuery(10); ListItemCollection newsItems = lst.GetItems(queryNews); clientContext.Load(newsItems, includes => includes.Include(i => i.Id, i => i.DisplayName, i => i["ThumbnailImageUrl"], i => i["Summery"])); clientContext.ExecuteQuery(); if (newsItems != null) { foreach (var lstProductItem in newsItems) { newsList.Add( new NewsList { Id = Convert.ToInt32(lstProductItem.Id.ToString()), Title = lstProductItem.DisplayName.ToString(), Summery = lstProductItem["Summery"].ToString(), Thumbnail = lstProductItem["ThumbnailImageUrl"].ToString() }); } } } } return View(newsList); }
Ahora haga clic derecho en Índice y haga clic en Agregar vista. Luego haga clic en Agregar
Ahora abra el archivo Index.cshtml Desde el directorio Vistas> Inicio
A continuación se muestra el fragmento de código para el archivo index.cshtml
@model List<SharePointNewsAppWeb.Models.NewsList> @{ ViewBag.Title = "My News - browse latest news"; } <br /> @foreach (var item in Model) { <div class="row panel panel-default"> <div class="col-xs-3"> <a href="/home/[email protected]"> <img class="img-responsive" style="max-height:200px;max-width:100%;" src="@item.Thumbnail" alt="@item.Title" /> </a> </div> <div class="col-xs-9 panel-default"> <div class="panel-heading"> <h4><a href="/home/[email protected]">@item.Title.ToUpper()</a></h4> </div> <div class="panel-body"> <p>@item.Summery</p> </div> </div>
Haga clic derecho en la carpeta Modelo de su solución y agregue un archivo de clase CS. Añadir a continuación las clases de modelos
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace SharePointNewsAppWeb.Models { public class NewsApp { } public class NewsList { public int Id { get; set; } public string Title { get; set; } public string Summery { get; set; } public string Thumbnail { get; set; } } public class FullArticle { public int Id { get; set; } public string Title { get; set; } public string Body { get; set; } } }
Use la tecla F5 para implementar y ejecutar su complemento. Si ve una ventana de Alerta de seguridad que le pide que confíe en el certificado de Localhost autofirmado, elija Sí.
Y ahora la primera aplicación está lista.
Creación de la página del artículo completo
Ya hemos creado la primera página que mostrará todos los artículos de noticias. Esta página mostrará el artículo completo.
Añadir un método de acción más a HomeController
[SharePointContextFilter] public ActionResult Aticle(int ArticleId) { User spUser = null; var spContext = SharePointContextProvider.Current.GetSharePointContext(HttpContext); FullArticle article = new FullArticle(); using (var clientContext = spContext.CreateUserClientContextForSPHost()) { if (clientContext != null) { spUser = clientContext.Web.CurrentUser; clientContext.Load(spUser, user => user.Title); clientContext.ExecuteQuery(); ViewBag.UserName = spUser.Title; List lst = clientContext.Web.Lists.GetByTitle("News"); CamlQuery queryNews = new CamlQuery(); queryNews.ViewXml = @"<View><Query><Where><Eq><FieldRef Name='ID'/>" + "<Value Type='Number'>" + ArticleId + "</Value></Eq></Where></Query>" + "<ViewFields><FieldRef Name='ID'/><FieldRef Name='Title'/><FieldRef Name='Body'/></ViewFields></View>";// ListItemCollection newsItems = lst.GetItems(queryNews); clientContext.Load(newsItems, includes => includes.Include(i => i.Id, i => i.DisplayName, i => i["Body"])); clientContext.ExecuteQuery(); if (newsItems != null) { foreach (var lstProductItem in newsItems) { article.Id = Convert.ToInt32(lstProductItem.Id.ToString()); article.Title = lstProductItem.DisplayName.ToString(); article.Body = lstProductItem["Body"].ToString(); } } } } return View(article); }
De nuevo, haga clic derecho en Acción y cree una vista con el mismo nombre Nombre del método de acción. En mi caso la vista se llamará Aticle
@model SharePointNewsAppWeb.Models.FullArticle @{ ViewBag.Title = "Aticle"; } <br /> <div class="panel panel-default"> <div class="panel-heading"><a style="font-size:20px;" href="/"><i class="glyphicon glyphicon-chevron-left"></i> <i class="glyphicon glyphicon-home"></i> </a></div> <div class="panel-heading"><h1 class="h2">@Model.Title.ToUpper()</h1></div> <div class="panel-body">@Html.Raw(@Model.Body)</div> </div>
Este es el código de la página del artículo completo que muestra el cuerpo del artículo de noticias