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.

introduzca la descripción de la imagen aquí

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 introduzca la descripción de la imagen aquí

Crear una aplicación en Visual Studio

Comencemos con la creación de nuestra primera aplicación.

  1. Abrir estudio visual y crear nuevo proyecto.
  2. Ingrese Nombre y Ubicación introduzca la descripción de la imagen aquí
  1. Ingrese la URL de su sitio de desarrollador creada en el paso anterior y seleccione Hospedado por el proveedor

introduzca la descripción de la imagen aquí

  1. Se abrirá una ventana emergente que abrirá para iniciar sesión

  2. El siguiente paso será en cuanto al tipo de aplicación, ya sea seleccionar MVC o Webform. Estoy seleccionando MCV aquí introduzca la descripción de la imagen aquí

  3. 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

  4. 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

introduzca la descripción de la imagen aquí

Vamos a empezar a codificar

Aquí estoy tomando el ejemplo de una aplicación de noticias básica.

  1. Abra el sitio para desarrolladores de SharePoint y cree una lista para almacenar nuestros artículos de noticias

  2. Cree una lista personalizada y agregue 3 columnas más Cuerpo, Summery, ThumbnailImageUrl introduzca la descripción de la imagen aquí

  3. 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. introduzca la descripción de la imagen aquí

  4. 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

  5. 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);
    }
    
  6. Ahora haga clic derecho en Índice y haga clic en Agregar vista. Luego haga clic en Agregar

introduzca la descripción de la imagen aquí

  1. Ahora abra el archivo Index.cshtml Desde el directorio Vistas> Inicio

  2. 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>
    
  3. 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; }
    
     }
    }
    
  4. 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.

  1. 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);
    }
    
  2. 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



Modified text is an extract of the original Stack Overflow Documentation
Licenciado bajo CC BY-SA 3.0
No afiliado a Stack Overflow